Week View start date not correct in some timezones

Asked by Matt Beaucage
7 years ago.

When using the week and month view calendars having the week start is set to 1( Monday) and the system is using the timezone of EST the start dates are fine. When the timezone is changed to anything greater than UTC the week view subtracts a day and the week start is on Sunday even though Monday has been specified. This still happens when the day is switched to Sunday then the week starts on Saturday so its not because of the default based on the locale.

bug javascript

damascus-timezone.png

Answer posted by Dan Letecky [DayPilot]
7 years ago.

The date calculations shouldn't be affected by the system timezone because all internal calculations are done using the UTC base of the dates.

It is however affected by the format you use to specify the input date values (such as startDate). It will accept date strings that specify a timezone but these dates will be normalized to UTC by default.

Example:

ISO 8601 date string without TZ:

> new DayPilot.Date("2019-01-01T00:00:00")
DayPilot.Date {value: "2019-01-01T00:00:00"}

ISO 8601 date string with TZ:

> new DayPilot.Date("2019-01-01T00:00:00+02:00")
DayPilot.Date {value: "2018-12-31T22:00:00"}

If you have a Date value you need to convert it to DayPilot.Date explicitly like this to read the local date/time value.

dp.startDate = new DayPilot.Date(yourDate, true);

Otherwise it will use the UTC base:

dp.startDate = new DayPilot.Date(yourDate);

Please let me know if it didn't help.

Comment posted by Matt Beaucage
7 years ago.

Hey Dan,
I tried converting,

> this.calendar.startDate = new DayPilot.Date(options.startDate); which results in {value: "2019-07-12T00:00:00"}

which I believe is correct but am still getting the wrong date on the week view

Comment posted by Dan Letecky [DayPilot]
7 years ago.

Hi Matt,

Thanks for the update. Could you please check if you are using the latest DayPilot Pro version? If so, could you please post an example that reproduces the issue?

Comment posted by Matt Beaucage
7 years ago.

Hi Dan,

I am currently on the latest version. here is the initialize of the week calendar.

var weekCalendar = CalendarBaseModel.extend({
            initialize: function (options) {
                this.calendar = new DayPilot.Calendar(options.DayViewId);
                this.calendar.heightSpec = 'Parent100Pct';
                this.calendar.theme = 'calendarStandard';
                this.calendar.weekStarts = 0
                this.calendar.cellDuration = 15;
                this.calendar.startDate = new DayPilot.Date("2019-07-15T00:00:00");
                if (RegionalConfiguration.ShowMeridian) {
                    this.calendar.timeFormat = 'Clock12Hours';
                }
                else {
                    this.calendar.timeFormat = 'Clock24Hours';
                }
                if (options.calendarType === CalendarTypeEnum.Day) {
                    this.calendar.viewType = 'Resources';
                }
                else {
                    this.calendar.viewType = 'Week';
                }
                this.calendar.eventArrangement = 'Cascade';
                this.calendar.bubble = new DayPilot.Bubble({
                    animated: false,
                    onLoad: function (args) {
                        var ev = args.source,
                            data = ev.data,
                            startDate = moment(data.StartDateTime),
                            endDate = moment(data.EndDateTime),
                            eventLengthInMinutes = endDate.diff(startDate, 'minutes');

                        if (eventLengthInMinutes < 60) {
                            args.html = data.html;
                        }                        
                        
                        args.async = true; 
                        args.loaded();
                    }
                });
                this.calendar.init();
                return this.calendar;
            }
});

I am on Windows 10. When a timezone of windows is set to anything that is + UTC then this issue occurs.

Comment posted by Matt Beaucage
6 years ago.

Hey Dan,

Any updates on this issue?

Comment posted by Matt Beaucage
6 years ago.

Hello Dan,

Is there any other information that you need?

Thanks
Matt

Comment posted by Dan Letecky [DayPilot]
6 years ago.

Matt,

Sorry for the delay. I'm checking the issue right now and I'll get back to you soon.

Comment posted by Dan Letecky [DayPilot]
6 years ago.

I've tested it with the following code and it seems to work fine:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>calendar-timezone-test</title>

  <!-- DayPilot library -->
  <script src="js/daypilot/daypilot-all.min.js"></script>

</head>
<body>

<div class="main">
  <div id="dp"></div>
</div>

<script>
  var dp = new DayPilot.Calendar("dp", {
    viewType: "Week",
    weekStarts: 1,
    cellDuration: 15,
    startDate: new DayPilot.Date("2019-07-15T00:00:00"),
    timeFormat: 'Clock12Hours',
  });
  dp.events.list = [
    {
      id: "1",
      start: "2019-07-15T12:00:00",
      end: "2019-07-15T14:00:00",
      text: "Event 1"
    }
  ];
  dp.init();
  
  
</script>

</body>
</html>

Both UTC and UTC +1 time zones seem to work fine (the first visible date is July 15).

Are you able to modify the sample so that it reproduces the issue?

Comment posted by Matt Beaucage
6 years ago.

Hey Dan,

You are correct this was an issue with my code, What was happening was when the calendar was being loaded there is a function that was catching the header dates to format them depending on another setting. This was turning the header date into a moment object, Applying utc to is and then formating it again which is what caused the issue, Removing the utc call fixed it.

Thank you for your help

Matt

Comment posted by Dan Letecky [DayPilot]
6 years ago.

Hi Matt,

Thanks for the update!

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.