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.
And my current timezone settings is
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 itself
Please let me know how to customize or fix this issue! Thanks.