Readability of month view massively degraded in version 20

[nousernameavailableanymore]

I upgraded to NC version 20.0.4 today but found the month view of the calendar had massively changed for the worse. So I instantly went back to version 19.0.6 and am now trying to find out, if those calendar changes to the month view are bugs (which I would consider) or if someone actually thought this was a good idea and thinks this is a "feature".

1. The row height of each of the weeks massively varies and looks hideous. This seems to be because the colored backgrounds of events (which indicate the calendar) have been unneccessarily increased in height to a point, where even having as little as three events on a day "fatens" the whole row. I was able to work around this to a degree by enabling the "limit visible events per view" checkbox. This made the lines distribute evenly again (the event background is still much too high / bloated) and surprisingly this still showed three events for the day. So why even increase the line height automatically if very apparently three events per day fit in a line. Bottom line: height increased / bloated colored backgrounds behind events, making less events fit in a single day. Bug (I hope so) or "feature"?

2. Events that are not all day events do not have a colored background anymore. In NC 19, all events (all-day and events with a specific time) had a colored background, so you could easily see to which calendar they belong. In NC 20 all events that have a time picked (so they are not all-day events) only have a tiny tiny dot in front of them, indicating to which calendar they belong, where as the text color is generic white and there is no colored background anymore. This has to be a bug, as it makes getting an overview over the month so much harder to read. In the previous version the colored background of an event instantly showed you what type it was, you didnt even have to look at a specific day field specifically to get an overview / a feel of which type of events are coming up in the next days. This was massively changed for the worse by removing this colored background and I really really hope that this will be fixed again in the future. Otherwise I will need to stay on NC 19 for the foreseeable future.

The month view in NC 20 is not like unusable. But seeing how great it was in NC 19 it surely is a major change for the worse.

[GMo7944]

Hi For my usage, I installed the app : Custom CSS Then, I customize the density : .fc-scrollgrid-section div.fc-event-title-container { height: 1.5em; } .fc-scrollgrid-section div.fc-event-time, div.fc-event-title, .fc-scrollgrid-section div.fc-daygrid-event-harness { font-size: 1em; line-height: 1.5em; font-weight: normal; }

I did that quickly, but for us the result is more readable. I think that you can adapt and improve it.

Guillaume Mo.

[cu]

The only reason I have been using Nextcloud over the years was because the web-based calendar UI was far superior to even most desktop apps. These "design improvements" to the month view in recent versions move the usability needle in the wrong direction. I routinely have 5-10 events per day on my calendar and these changes have made the Nextcloud calendar less suitable for my daily work.

I would like to see:

1. The day numbers put back in the upper-left corner like every other electronic and paper calendar in the world
2. Revert to background colors for events so we can tell at a glance which calendar an event belongs in, instead of having to squint at a little dot (but more importantly, this also frees up horizontal space for the event text)
3. Reduce gratuitous use of whitespace around events. This would allow to fit more events in a single day and more text of the few events that are shown.
4. Today's day prominently highlighted around the whole box so the user can find it at a glance instead of hunting for the day that has a little circle around it.

Please prioritize function over design. Pleasing visual design is nice to have but when it hampers functionality, you have no product at all.

[alexghergh]

I think there could maybe be a switch button in the calendar settings between the current view (with the dots) and the old view.

[KlausBlum]

+1 I absolutely have to agree, and all aspects have been perfectly pointed out above.

IMO the new design even doesn't have a better "look". In terms of usability and productivity, the NC 19 design should be offered again - at least as a switchable option in the settings.

[nousernameavailableanymore]

Can anyone comment on the situation on NC21? Does this still have the hideous design from version 20 or did they return to the much better version 19 design?

[GMo7944]

Hi I use calendar 2.2.1 on nc20 (prod) and nc21 (test), in my point of view : nothing change. Then I continue to use Custom Css to adapt the tool to my need.

I think too that an option to have a "compact" view like before can be useful.

Unfortunately I'm not able to propose a development for that, but if some do it I can help by test and propose css.

Guillaume

[jficz]

I just upgraded form 19 to 21 and this came as a huge and very unpleasant surprise. At first I thought it's a bug.

The issue is up for half a year now - can someone from the team comment on this please? @ChristophWurst maybe?

[ChristophWurst]

can someone from the team comment on this please? @ChristophWurst maybe?

Sure. I'm reading this ticket for the very first time and I don't know the full history of the UI. So I'm checking against my Nextcloud 21 installation and the 22 dev instance.

Point 1 I don't understand. Was there perhaps a change in how events were rendered with the new version of Calendar back then? I don't see an overlap. I don't see any fatening either.

Point 2 isn't the case (anymore). Events have the color of the calendar, no matter if they spread across the full day or a specific time.

Does anyone have screenshots of views that don't look so pleasant? @cptMikky please show us what bothers you via screenshots. I'm possibly to used to how Nextcloud looks to see it sorry. I'll then discuss with our designers.

Scratch what I said, I clicked the wrong view :facepalm:

[ChristophWurst]

I can see that the events are not colored by background styling but with an indicating dot in front. This seems to be a deliberate design decision, we also do this for account coloring in Mail. To be honest I don't see how this could change the perception of where an event belongs so drastically. Is this about the size of the colored area? Is this a problem with visual impairment?

^ purple is my personal test calendar. The dot indicates that the evens belong there.

^ if I change one to be all day. IMO this makes the event type distinctive and I wouldn't call the change in rendering a bug. This is more a question of preference, I presume.

[GMo7944]

For me there is a huge difference too : Before V.20 Since V.20

Unfortunately I can no longer show with version 19, but it looked a lot like the dense version above. Here It's with my custom css.

[jficz]

@ChristophWurst this is what my monthly view looks like after upgrade from 19:

I really didn't expect such drastic change so I don't have 19 screenshot.

There are multiple issues with this view:

• longer events are illogically struck through days at their beginning times visually impeding the distinction between the cells and dividing the next day(s) cell(s) visually
• they also have larger padding taking up more space
• the color of the dots is less distinguishable when less contrast colors are present (see 8th or 22th)
• the events, being black text on white backgrounds, are much less readable and make day cells less distinguishable from each other
• the overall readability of the view is drastically reduced
• the month view is visually inconsistent with Week view (please don't "fix" Week view, please!)

All in all, please don't try to "fix" this new design - just go back with what it was before, i.e. each event with the proper-colored background, lesser margins, fixed-size day cells and multi-day events not crossing the day cells in the middle.

Why was this change introduced in the first place? Was there some kind of UI/UX study to back the new design choice or was it just some random "hey, let's change this thing" decision?

[GMo7944]

For my part, I use nextcloud for free, so I can't complain. But if you need a tester, I wouldn't mind spending a little time to help. Guillaume

[ChristophWurst]

Believe it or not but we don't change anything just for fun.

Are you a developer by any chance? This might help you understand what technical dept is and why a calendar app written in jQuery wasn't very maintainable anymore. As I understand (again, wasn't around in this app at that time) this was the main driver for a new UI.

[ChristophWurst]

We are looking into the issues.

[jficz]

I'm a systems engineer so I have some understanding from the code point of view (I assume you mean "technical debt" - believe me, I know that only too well :) ) . What you say though seems like you're mixing up code maintenance/quality and UI design. These two are unrelated imo.

Even if the application was completely rewritten, on its own it doesn't justify any drastic UI changes. UI changes in general should be driven by UI/UX problems, not by code quality.

Consider this a "feature request" then - create a settings option that makes the Month view visually similar to what it was in v19, especially:

• each event should look like a little "box" with the the same background color as the calendar it is in (now it's just a dot and black text without visual separation from other events)
• multi-day events should not slice the cells in the middle (either move them on top or don't make them visually continuous)
• make the view more compact (smaller fonts, lesser margins) - anyone can zoom in if they need - it's not ok when a month view doesn't fit a 2560p 27" screen.
• maybe slightly increase contrast of cell separation lines
• basically make it look similar to what Weekly view looks now

[raimund-schluessler]

For calendar rendering fullcalendar is used as underlying basis. The last Calendar version for NC19 is v2.0.5 which uses fullcalendar version 4.3.x. The latest Calendar version for NC20/21 is v.2.2.2 and uses fullcalendar version 5.5.x.

This major update of the underlying calendar rendering library might explain at least some of the (possibly undesired) differences between the appearance of NC Calendar on v19 compared to v20/21.

[jficz]

I see. Well, fullcalendar allows setting specific background (even border) for event objects: https://fullcalendar.io/docs/event-object

So this "problem", even though apparently introduced by upstream, can still be quite elegantly "fixed" locally. Also the border color feature opens the doors for even more interesting visual options, like distinguishing between event types, setting priorities, etc.

[jancborchardt]

First part of the fix at https://github.com/nextcloud/calendar/pull/3200 – increasing the color dot.

I will look into the sizing of the full day events, thanks for that feedback.

Regarding the "Events that are not all day events do not have a colored background anymore." – this in fact is Fullcalendar default, and also what people expect from widely used calendar software like Google Calendar and macOS calendar:

[alexghergh]

Regarding the "Events that are not all day events do not have a colored background anymore." – this in fact is Fullcalendar default, and also what people expect from widely used calendar software like Google Calendar and macOS calendar

It might be indeed that other softwares do that. However, NC19 had a style of its own that some of the old users I think got accustomed to it well enough (myself included). I still think having an option to switch between the 2 would be the best (if implementation allows).

[nousernameavailableanymore]

The tiny colored dot in front of the appointment makes it basically impossible for me, as a red-green color blind person (around 10% of males seem to be affected by this) to distinguish which appointment belongs to which calendar on the screenshot of the apple calendar.

1. This design makes it harder to read / identify the calendar.
2. Its wasting precious space (we dont need the colored dot, if the whole appointement has a fitting background color).

In this whole discussion, I have not heard a single advantage of this new design. The only points being made are

1. "its not that bad" (which is basically what "I don't see how this could change the perception of where an event belongs so drastically" says), which of course never is a good guide line for designing software and
2. other big companies, who treat their users like little children also adopted this bad design

Please restore the design of the old calendar or at least, make it optional or (in the very very least) provide a CSS to use with Stylus to restore the old design.

[jficz]

"_[this is] what people expect from \<insert_random_producthere>" is a very bold statement. Did you ask them all?*

It is also completely irrelevant - the question that should be asked here instead is "What people do expect from Nextcloud?". And this issue proves that the are at least some people who expect something else than what is currently provided.

*) next random product, o365, uses event's background for yet another, completely different purpose fyi. My Android Calendar client (another randomly chosen product) shows events in monthly view pretty much the same as NC19. We can keep throwing different clients back at each other but that doesn't solve anything

[nousernameavailableanymore]

So whats the status of this defect? Will there be a setting to restore the background colors for non-allday events?

[jficz]

Looks like this will have to be fixed outside Nextcloud as the team shows little interest in this issue unfortunately.

Since NC does use fullcalendar which on its own supports this design through settings, it should imho be possible to create a Nextcloud app that would change the settings appropriately. I'm actually trying to find someone with enough Vue knowledge to do that but pretty much all FE devs I know use React :/

[nousernameavailableanymore]

@jficz I personally would highly appreciate such an app (like the round corners app).