[FullCalendar 2] Odd behaviour on event displaying

Forge Component
Published on 13 Jan by Grazina
21 votes
Published on 13 Jan by Grazina

Hello again, 

I'm using the fullcallendar 2 widget to display a list of events that I created inside my webapp, but I'm noticing some odd behaviours, for example, let's consider the following types of events and what happens for each:

  • Case 1 (Green in the example): Holiday - (2017-04-14);

          I define the same start and end date. In the widget they appear on the day before, in this case - 2017-04-13.

  • Case 2 (Purple in the example): Vacation Period [of one day] - (2017-04-27);

          I define both start and end date with the same value - 2017-04-27 - the events appear on the correct day.

  • Case 3 (Blue in the example): Vacation Period [more than one day] - (start: 2017-04-04, end: 2017-04-07)

         The start date on the widget is correct but the event will finish the day before of the defined end date.

  • Case 4 (Red in the example): Missing holiday- (2017-04-25)

         All the holidays that exist in the table are created except for one.

The link bellows shows the generated JSON and how the widget shows in the webapp.

Example (needs to be a link since it's a big image) 

On the left, you have the json that I generate using my entities, on the right the visualisation of the generated events on the widget.

Edit1: the property eventLimit is set to false, so I guess that's not why the missing event is not showing.

Any thoughts on why this is happening? Any help is welcome :)

Best regards,

Vitor Mexia


Hi Vitor,

Thank you for using the component, glad to see it's being useful.

I think there are two things wrong with your JSON.

  1. Dates need to be ISO8601 string, and some of the dates you're passing have the month part with only 1 char, which is not compliant. I don't know how the component interprets 2017-4-14 and 2017-4-25, and probably that's why the behaviour is inconsistent on both cases. Please try to send 2017-04-14 to 2017-04-15 and 2017-04-25 to 2017-04-26.
  2. End date is exclusive meaning that on Case 3, you'd need to set 2017-04-08 to have the event end on 2017-04-07. For the 27th, because it's one day only, it works, but still, for consistency, the end date should be 2017-04-28.

Here's where you could check the documentation for yourself: https://fullcalendar.io/docs/event_data/Event_Object/

The exclusive date/time an event ends. Optional.
A Moment-ish input, like an ISO8601 string. Throughout the API this will become a real Moment object.
It is the moment immediately after the event has ended. For example, if the last full day of an event is Thursday, the exclusive end of the event will be 00:00:00 on Friday!

Let me know if you can get it working.

Kind Regards,

João Grazina


Thanks João, those tips were very helpful. 

To fix the problems I used some platform provided functions such as TextToDate (fixed the problems with the non-ISO dates) and AddDays, to avoid changing the existing data.

Best regards,

Vitor Mexia

Glad to be of assistance!