Our powerful JS Calendar component


Post by licjapodaca »

How not consider the hours in DayView and WeekView with startDate or endDate when the event it's configured as allDay in true ?

We want to consider only the date part and not the time when the event comes with the property allDay in true, but we have a problem as follows:

At database side we store the dates in UTC so when our backend send these data to our frontend and load with these data the Bryntum calendar, it transform correctly to the end user timezone as expected, but when we get all events marked as allDay = true, those events in the database are configured as:

startDate = '20220309T00:00:00.000Z' <==== In UTC
endDate = '20220309T23:59:59.000Z' <==== In UTC
allDay = true

When these events loads in the DayView or WeekView the startDate starts in 20220308T04:00:00.000 because it converts in our TimeZone that is Pacific Time Zone ... this is not correct for us, we just want to shoe the event in the allDay event section but only in the date 20220309 ... how to configure the calendar to spect this behavior ?

Regards

incorrect-dates.png
incorrect-dates.png (337.92 KiB) Viewed 674 times

Post by Animal »

This could probably be done.

Events are indexed by the dates they intersect with and there is code which truncates an event's startDate to beginning of that date. There is a utility class DayTime which does this:

this.dayTime.startOfDay(eventRecord.startDate);

So if DayTime could have this knowledge, it could shift the date correctly.

Here's a ticket: https://github.com/bryntum/support/issues/4354


Post by Animal »

As an experiment, try

myCalendar.modes.week.allDayEvents.dayTime.startShift = 1000 * 60 * 60 * -4;

Immediately after construction, before data load. Obviously all DayViews will need that.

And also you can see what the calculation is. I've hardcoded it to be UTC - 4, but you can do that calculation.


Post by Animal »

Actually, I have the solution for you.

Before your app override the EventRecord's allDayEndDate getter:

// Floor end dates for allDay events instead of ceiling them
EventModel.getAllDayEndDate = function(dt) {
    if (dt?.isEvent) {
        dt = dt.get('endDate');
    }

    if (dt) {
        dt = DateHelper.clearTime(dt, true);
    }

    return dt;
}

The default implementation takes the end date and rounds it up to the end of that day. Which for normal circumstances is correct. If an allDay event ends at midday on the 26th, then its endDate point is 27th at 00:00:00

But in your case, you want to round down.

What this now means is that you must not use your 23:59:59 trick to end an event. Dates are timestamps. A one day event lasts from midnight to the next midnight.

So the event in your screenshot MUST have the following JSON representation

"startDate" : "2022-03-10T00:00:00Z",
"endDate" : "2022-03-11T00:00:00Z",

That is exactly 24 hours. Not 23 hours, 59 minutes, and 59 seconds. With the new code, that would be rounded down to be a zero duration event.


Post by licjapodaca »

Excellent @Animal, thanks for your help...

Regards


Post Reply