Events displayed in reverse order when Calendar is in monthly view

Support
#1

Hi
someone can explain to me why manually added events to a Calendar component (using a ListCalendarEventProvider) are displayed in the correct order when in weekly view but reversed when in monthly view?

I’ve attached a couple of screenshots with a calendar filled with auto-generated events (in a simple loop), that shows the difference between weekly (correct) and monthly view (reversed).

Thanks for the help
Paolo

WeekView

MonthlyView

#2

Hi,

By default, the events’ sorting rules looks as follows:

  1. Events are sorted by start time ascending
  2. Event with equal start time sorted by end time descending. So, an event which lasts more time goes first.

If you have a different sorting, please attach a sample project, so we will be able to investigate the problem.

Regards,
Gleb

#3

Hi Gleb, thanks for responding.
Events are all of fixed length (15 minutes), they can’t overlap, and they can’t be resized.
In addition, events are always added to the provider in order (by start time), and they can’t be reordered afterward.

So for example, I can have the sequence 9:00-9:15 , 9:15-9:30 and so on for a day, with or without holes between time intervals.

I have noticed that the HTML produced by the vaadin calendar is indeed reversed. That is, the actual HTML renders the LAST event as the first DIV inner node.
But when in weekly view, it puts computed “top” style properties to adjust the order (in an absolute container), so that the last DIV element appears at the top and so on…
Instead, when in monthly view, this adjustment is not made (no “top” style properties and no absolute placement), so the browser renders the DIVs in their actual order, that is reversed…

This is really awkward, and this sums up to the lack of advanced customization of vaadin calendar, and the fact it’s been deprecated in 8.0 without a replacement…
Hope to find a quick workaround without the need of rewriting part of the component itself (already done that for another component, and it’s not funny).

Thanks,
Paolo

#4

Hi,

Could you please attach a small sample project that demonstrates the issue?

Regards,
Gleb

#5

Attached a very simple project, with only one screen.
There I create some synthetic events and add them to a calendar control, using the start/end date range specified by the two fields at the top.

You’ll notice what I wrote above… quoting myself:
I have noticed that the HTML produced by the vaadin calendar is indeed reversed. That is, the actual HTML renders the LAST event as the first DIV inner node.

But when in weekly view, it puts computed “top” style properties to adjust the order (in an absolute container), so that the last DIV element appears at the top and so on…

Instead, when in monthly view, this adjustment is not made (no “top” style properties and no absolute placement), so the browser renders the DIVs in their actual order, that is reversed…

This happens to be a quirk of the vaadin calendar… wish you embedded something like JQuery calendar or, better, some other vanilla js alternative.

Regards,
Paolo

test-calendar.zip (82.1K)

#6

Hi,

Thank you for reporting the problem. We have created a YouTrack issue, see the link on the right.

Regards,
Gleb

#7

:ticket: See the following issue in our bug tracker:

https://youtrack.cuba-platform.com/issue/PL-9330

#8

I have the same problem. Any work plan for this? or how to solve it for now?

Regards,

Nelson F.

#9

See Calendar control replacement - CUBA.Platform , and if interested, please vote for it…