Calendar monthly view improvement suggestions

[guillaumemolter]

Hi,

Feel free to close this if you don't welcome feedback/feature requests via GitHub.

1. Either show previous events or start the calendar at the current week.
   Because you currently do not display past events, when getting close to the end of the month, most of the calendar is empty which is not great use of screen space. I would suggest to either display past events or to start the calendar with the current week and then display the next 5 weeks.
2. Remove the "round bullet" next to events name when you only have one calendar.
   It takes a lot of space and has no value.
3. Have more consistent spacing (margin and padding).
   The spacing is very different between hourly events and all day events. The calendar would look better if things were more consistent.

[AButler]

I would also like to these suggestions implemented.

[ryanckulp]

thanks for the suggestions.

1. we'll extend "show previous events" support to the Monthly view soon; currently supported on other views
2. the round bullet goes away if you disable "include event time" parameter, but i've just made this hidden by default (see below)
3. can you be more specific re margin/padding? single events have 2 columns, the time and title, so there is less space to fit on one line. below is a demo if you disable event times, both event types look about the same. perhaps all day events have ~1px left/right for the inverted label background, is that what you're referring to?

[existing] margin / padding

[updated] monthly view - no bullets

via:

.fc-daygrid-event-dot {
  display: none;
}

note, there are more options for event formatting but if i set to "block" then all events (single + all day) look like all-day, so i think the above approach is best:

[guillaumemolter]

@ryanckulp thanks! My response bellow

1. we'll extend "show previous events" support to the Monthly view soon; currently supported on other views

Great that works.

2. the round bullet goes away if you disable "include event time" parameter, but i've just made this hidden by default (see below)

I'm gald you hid them, I definitely want event time (and I suspect most people will).

3. can you be more specific re margin/padding? single events have 2 columns, the time and title, so there is less space to fit on one line. below is a demo if you disable event times, both event types look about the same. perhaps all day events have ~1px left/right for the inverted label background, is that what you're referring to?

Sure, I'll do my best and if have time I'll try to setup the developer tools to give you better styling suggestions. But at a glance here are some things that I would suggest:

• All day events increase horizontal padding by 1px. Too much difference between vertical and horizontal padding. They don't have to be the same but would look better with less difference.
• The first event of the day has too much top margin (space between the day number and the event itself).
• Time could use a slightly smaller font size, especially the AM/PM.
• When using AM/PM time, the AM/PM is sometimes on the same line and sometimes on a second line. This should be consistent.
• The left border is missing (both dotted line on the perimeter and the thick line on the active day).
• Apple calendar, Outlook and Google Calendar all keep events name on one line (either with ellipsis or overflow), you might want to use the same strategy (at least make this a setting for people with busy calendars).

Here are a few examples from my calendar that currently don't look great but would be improved by the suggestions above:

[ryanckulp]

quick update - ability to include past events is now live. just toggle it on from the settings page.

[AButler]

quick update - ability to include past events is now live. just toggle it on from the settings page.

Hi @ryanckulp, looks like the code change for including past events in month is only on the ics calendar and not the Google Calendar plugin. Any chance it could be ported over to the Google Calendar?

[ryanckulp]

@AButler just ported this over a few hours ago, thanks for the nudge.

[guillaumemolter]

@ryanckulp unfortunatly I'm still having issues with the calendar view. As you can see the last week (next week) is cut out...which obviously is not ideal:

I think some of my suggestions above would improve the situation:

• All day events increase horizontal padding by 1px. Too much difference between vertical and horizontal padding. They don't have to be the same but would look better with less difference.

• The first event of the day has too much top margin (space between the day number and the event itself).

• Time could use a slightly smaller font size, especially the AM/PM.

• When using AM/PM time, the AM/PM is sometimes on the same line and sometimes on a second line. This should be consistent.

• The left border is missing (both dotted line on the perimeter and the thick line on the active day).

• Apple calendar, Outlook and Google Calendar all keep events name on one line (either with ellipsis or overflow), you might want to use the same strategy (at least make this a setting for people with busy calendars).

But I also feel like the monthly could always start with the current week and show the next 3 weeks or something like that.

[ryanckulp]

hey everyone, just made a tweak here for Monthly view. previously the left/right column approach was just too narrow to show 4-digit times (12:15), and when a calendar had a mix of 1-2 digit times (1p) plus 4-digit times (12:45), it looked quite bad.

now the time + title are on separate lines, always:

this is now live, looking forward to more feedback. it may also be best for us to provide a CSS overrides editor so you can do this yourself, given the FullCalendar library we use for Week/Month grids has granular classes for every element.

[guillaumemolter]

@ryanckulp while I like the new time layout, and it definitely looks much better, it introduced a regression. The calendar view is now missing two weeks at the end for me:

A CSS editor would be great for sure. With that said I don't think this will solve the main issue that on busy calendars, you may be missing the last week or last few weeks. Last month, the last week of May was partially truncated and I couldn't see some events. This month it looks like I won't be able to see the last 2 weeks at all.

[ryanckulp]

sure, so if you disable past events, that first row will be much shorter (May 26 - June 1). alternatively, i think our upcoming "this week + 3" rolling month view will be superior. do you agree?

[guillaumemolter]

""this week + 3" rolling month view" if it means the current week is always first followed by the next 3 weeks. That would be perfect! That plus CSS override and you get my 5 stars glowing review 🥇 In any case thank you for responding and looking into improving this.

[ryanckulp]

10-4.

current prod behavior for Month view:

behavior if Event Layout is changed to Rolling Month (new):

deploying shortly, then we can move on to a CSS editor.

[ryanckulp]

rolling month (this week + 3) is now live.

[VidKuo]

@ryanckulp thanks a lot for the rolling month, that's a brilliant update. Although, the horizontal line underneath the event time seems to be clipping the event title now. Also, the 24-hour clock option does nothing.