Calendar - get rid of icons in display, taking too much space

Calendar - get rid of icons in display, taking too much space

by Madhu Avasarala -
Number of replies: 7

In the Moodle Calendar (3.7+)  in the month view, using the default boost theme and with the administration menu bar hidden (that is with maximum possible display size) my calendar items get truncated because of inadequate space in cell. The yellow dot and the university icons are taking up too much space and the font size of the text of item name is also too large, say when compared with the Google calendar which typically can fit the entire item in one cell.

Are there any suggested remedies to:

  1. Eliminate the icons to get more space for the text of item?
  2. Make the font size of text a bit smaller?
  3. Make the item text wrap in cell ala spreadsheet style?

Any help will be gratefully received.

Attachment SharedScreenshot.jpg
Average of ratings: Useful (1)
In reply to Madhu Avasarala

Re: Calendar - get rid of icons in display, taking too much space

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
I have to say that this has bothered me, too. The "dot" and the "icon" were added somewhere along the way, maybe with Moodle 3.0.

On a wide screen, more of the text will show.
I haven't taken the time to use CSS to downsize the font, yet. But this could be a solution.
This "calendar" view presents problems to other popular products. I would like a button that goes into "list view." Your thoughts? Right now, if one clicks on the date, one does see "list view" but only for that date.
The dot and icon could probably be downsized and the white space squished.

I tend to direct my students to Upcoming Events.
Average of ratings: -
In reply to Madhu Avasarala

Re: Calendar - get rid of icons in display, taking too much space

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

1. Eliminate the icons to get more space for the text of item...

.path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle {display: none;}
.path-calendar .maincalendar .calendarmonth ul li .icon {display: none;}


2. Make the font size of text a bit smaller...

.path-calendar .maincalendar .calendarmonth ul li>a {font-size: 0.9em;}


3. Make the item text wrap in cell ala spreadsheet style...

Note that will make your rows different sizes...

.path-calendar .maincalendar .calendarmonth ul li>a {white-space: normal;}


Note that 2 and 3 are actually the same element, so combine them if you want both:

.path-calendar .maincalendar .calendarmonth ul li>a {font-size: 0.9em; white-space: normal;}
Average of ratings: Useful (1)
In reply to Jon Bolton

Re: Re: Calendar - get rid of icons in display, taking too much space

by Madhu Avasarala -
Jon,
Thank you, your suggestions work perfectly, exactly as desired smile. I ended up using the wrap and font reduction combo along with eliminating icons and now the calendar monthly view really looks usable. I will edit the Calendar Wiki page and add your really very helpful suggestions. Most grateful to you.
Just for the record, I added these statements as given by Jon, directly into the theme's Raw SCSS. In my case I am using the Boost theme and so this goes into the 2nd box. You can access it from site->appearance->themes->Boost (in my case).
Average of ratings: -
In reply to Madhu Avasarala

Re: Re: Re: Calendar - get rid of icons in display, taking too much space

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

I decided upon the following, based upon Jon's suggestions.  I will attach the before and after.  Yes, the calendar gets longer, but it is readable.

Thanks Jon.


/* Improve the visibility of items in the Calendar. From Jon Bolton. */

.path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle {display: none;}

.path-calendar .maincalendar .calendarmonth ul li .icon {margin: 0;}

.path-calendar .maincalendar .calendarmonth ul li>a {font-size: 0.9em; white-space: normal;}

Attachment 1 before.jpg
Attachment 2 after.jpg
Average of ratings: Useful (1)
In reply to Rick Jerz

Re: Re: Re: Re: Calendar - get rid of icons in display, taking too much space

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
Rick - just following up on your earlier comment about list view... I've put a link at the top of calendar/view.php which offers calendar view or upcoming events view... see https://www.smmc.org.uk/calendar/view.php?view=month as an example.
Average of ratings: Useful (1)
In reply to Jon Bolton

Re: Re: Re: Re: Re: Calendar - get rid of icons in display, taking too much space

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Yes, Jon, this is in the right direction. I assume that this is part of a custom theme, right? Do you know if a feature request exists?

When I go to your list view, it appears to be for the entire course and calendar. Any filtering planned for this?
Average of ratings: -
In reply to Rick Jerz

Re: Re: Re: Re: Re: Re: Calendar - get rid of icons in display, taking too much space

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
It's just the Adaptable theme on that site but I edited the calendar/view.php file. Not ideal as it’s changing core code but I use a version tracked codebase so not a significant issue for me.

You're not logged in on my site, so you'll only see sitewide events. When you're logged in, there is the standard course events filter as per your screenshot 😊

I have had some work done on displaying events though, but I'm QAing it at the moment. It's a block and a filter, which will allow events from ANY course to be displayed anywhere in Moodle (although it will only show you events from courses that you're involved in). It's like the Upcoming Events block on steroids 😂. It will probably be released back to the Moodle community in due course.
Average of ratings: -