0

I am using angular-calendar to show the time in week view where I can drag and drop and customize the timings. Here is the sample code below from angular calendar:- Note that this only happening when I am using drag and drop option with this settings [hourSegmentTemplate]="weekViewHourSegmentTemplate" in different timezones.

<mwl-calendar-week-view
    [viewDate]="viewDate"
    [events]="events"
    [headerTemplate]="headerTemplate"
    [hourSegments]="1"
    [hourSegmentHeight]="30"
    [hourSegmentTemplate]="weekViewHourSegmentTemplate"
    [weekStartsOn]="weekStartsOn"
    [currentTimeMarkerTemplate]="currentTimeMarkerTemplate"
    (eventClicked)="handleEvent('Clicked', $event.event)"
    (eventTimesChanged)="handleEditEvent($event)"
    (hourSegmentClicked)="dayClicked($event)"
    [dayStartHour]="0"
    [dayEndHour]="23"
  >
  </mwl-calendar-week-view>

The question is angular calendar is showing incorrect calendar time in different timezone in the layout.

for example:

  • 12 am
  • 1 am
  • 2 am
  • 3 am
  • 3 am
  • 4 am
  • 5 am ....

Here as you can see 3am comes twice in the calendar layout.

Here is a screenshot of the error

And my current timezone settings is My current device timezone settings in windows

For this issue the angular events are giving me the incorrect values.

Points to be noted:

  • this is happening only when i am using 'automatic daylight savings' "ON" in my settings. to reproduce this issue in your windows machine follow this steps below:
  • Go to your time settings.
  • Use the timezone (UTC+01:00) Brussels, Copenhagen, Madrid, Paris
  • make this option "ON" for "Adjust for daylight saving time automatically"
  • go to this url in angular-calendar library https://mattlewis92.github.io/angular-calendar/#/drag-to-create-events
  • Now you will be able to see the same issue in the angular-calendar library itselfAngular calendar itself is showing error

Please let me know how to customize or fix this issue! Thanks.

Towhidul Islam
  • 190
  • 2
  • 8

0 Answers0