angular-calendar - month date, event date mismatch

Question

I am using angular-calendar version - 0.26.4.

When event with date 2023-02-03T00:00:00.000Z added to the events array it get shifted to Feb 2nd. Following is the object receives in the calendar template. I checked a place to configure time zone but couldn't find such.

{
  "date": "2023-02-02T18:30:00.000Z",
  "isPast": false,
  "isToday": false,
  "isFuture": true,
  "isWeekend": false,
  "inMonth": true,
  "events": [
    {
      "id": 2,
      "start": "2023-02-03T00:00:00.000Z",
      "title": "4",
      "color": {
        "primary": "#e3bc08",
        "secondary": "#FDF1BA"
      }
    }
  ],
  "badgeTotal": 1
}

Following is the way comparing dates

Output

score 0 · Answer 1 · answered Jan 27 '23 at 07:15

It is because Date object by default has time zone applied to them. If you would do new Date().getUtc..., you would see that these are actually returning different results from your current date.

To counter-act this, you can use Date.UTC() constructor (more about it here). This creates date with +0 GMT time zone. If you pass this to angular calendar it will then properly show it.

angular-calendar - month date, event date mismatch

1 Answers1