AllDay event is showing up in 2 days in MonthView mode

[amrtahlawi]

Hello, I have some allDay events that are showing on the correct day and the next day when viewing the calendar in Month view. The dates good like this start date: Tue Jul 13 2021 00:00:00 GMT-0400 (Eastern Daylight Time) and end Time: Tue Jul 13 2021 23:59:59 GMT-0400 (Eastern Daylight Time)

In the above example, the event is getting duplicated. It shows up on the 13th and on the 14th. This is only happening when the mode is a month. This issue does not show up when the mode is week or day.

[twinssbc]

@amrtahlawi For all day event, you need to use UTC time and set the allDay field to true. There's detailed explanation in Event Source section in README.

[amrtahlawi]

Thank you @twinssbc for the information. QQ: It seems the fullDay event has to start the day early and finish on the day of the event. for example: if I have a full day event on 8/4/2021, Then the startTime should be: 8/3/2021 and endTime = 8/4/2021, for the event to show up on the calendar on 8/4/2021. Is this correct?

[twinssbc]

@amrtahlawi That's correct.

[rbertolig]

Hello @twinssbc,

Could you please provide any suggestion to be able to render on the calendar allday events which can take more than one day ( with no need to make one event per day )?

For example, an event begins on Feb 12 00:00 and finish on Feb 14 23:59, it should display as 3 days on the calendar ( in the week view is displayed ok ) but on monthview and dayview it takes also the next day after finishing the event, no matter the endtime set: please check live at the forked demo ( click on calendar tittle to run loadDynamicEvents ): https://ionic-calendar-demo-1-0-mft4wj.stackblitz.io

loadDynamicEvents() {
    let startTime = new Date('2023-02-12T00:00:00');
    let endTime = new Date('2023-02-14T23:59:59');
    this.eventSource.push({
      title: '3 days - test',
      startTime: startTime,
      endTime: endTime,
      allDay: true,
    });
    this.myCalendar.loadEvents();
  }

[twinssbc]

Hello @twinssbc,

Could you please provide any suggestion to be able to render on the calendar allday events which can take more than one day ( with no need to make one event per day )?

For example, an event begins on Feb 12 00:00 and finish on Feb 14 23:59, it should display as 3 days on the calendar ( in the week view is displayed ok ) but on monthview and dayview it takes also the next day after finishing the event, no matter the endtime set: please check live at the forked demo ( click on calendar tittle to run loadDynamicEvents ): https://ionic-calendar-demo-1-0-mft4wj.stackblitz.io

loadDynamicEvents() {
    let startTime = new Date('2023-02-12T00:00:00');
    let endTime = new Date('2023-02-14T23:59:59');
    this.eventSource.push({
      title: '3 days - test',
      startTime: startTime,
      endTime: endTime,
      allDay: true,
    });
    this.myCalendar.loadEvents();
  }

All day event needs to convert from UTC date without any time part. For example,

    var startTime = new Date(Date.UTC(2014, 4, 8));

[rbertolig]

Hi! thanks for your always kind reply!

if I use:

 let startTime = new Date(Date.UTC(2023, 1, 6));
 let endTime = new Date(Date.UTC(2023, 1, 8));

then the calendar only diplays 2 days events ( 6 and 7 ) not 3 days event ( 6, 7, and 8 ) https://stackblitz.com/edit/ionic-calendar-demo-1-0-mft4wj?file=src/app/example.component.ts

BUT looking at the code inside monthview.ts , the function onDataLoaded() : noticed it seems that function is is really considering the time ( hours and minutes ) for the allday events:

if (event.allDay) {
     eventUTCStartTime = eventStartTime.getTime();
     eventUTCEndTime = eventEndTime.getTime();
} else {
     eventUTCStartTime = Date.UTC(eventStartTime.getFullYear(), eventStartTime.getMonth(), eventStartTime.getDate());
     ventUTCEndTime = Date.UTC(eventEndTime.getFullYear(), eventEndTime.getMonth(), eventEndTime.getDate() + 1);
}

this might be the reason why one-day-more or one-day-less is displayed on the monthview because if the Event startTime / endTime was created by a given time-zone user at -x hours ( or + x hours ), it might means a different UTC day ( depending the time difference )

Tested using the UTC conversion as on the 'else' statement only no matter if its allday or not ( removed above if - else ) and it seems to display the correct days on my case.

eventUTCStartTime = Date.UTC(eventStartTime.getFullYear(), eventStartTime.getMonth(), eventStartTime.getDate());
eventUTCEndTime = Date.UTC(eventEndTime.getFullYear(), eventEndTime.getMonth(), eventEndTime.getDate() + 1);

I did the same on the function onDataLoaded() of dayview.ts and solved that view also.

THEN as the weekview it was always working ok, I was looking for the difference on that part of onDataLoaded() inside weekview.ts , noticing here the allday events received a different treatment calculating the 'startIndex' and 'endIndex' for them too, which lead to the question:

it might be a better approach to calculate 'startIndex' and 'endIndex' for allday events also on monthview and dayview?