Error: date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings

Question

I'm using https://github.com/mattlewis92/angular-calendar on my Ionic app. When I'm loading an array of events from my component file it's all good. This is how I do it:

.ts:
bookingsToLoad: BookingEvent[] = [
    {
      id: 1, 
      title: "First booking",
      start: new Date(2021, 6, 7, 12, 30, 0, 0), 
      end: new Date(2021, 6, 7, 13, 30, 0, 0), 
      userId: 2,
    },
    {
      id: 2, 
      title: "Second booking", 
      start: new Date(2021, 6, 8, 13, 30, 0, 0), 
      end: new Date(2021, 6, 8, 14, 30, 0, 0), 
    },
  ];

.html:

<mwl-calendar-week-view
      *ngSwitchCase="'week'"
      [viewDate]="viewDate"
      [events]="bookingsFromServer"
      (dayHeaderClicked)="clickedDate = $event.day.date"
      (hourSegmentClicked)="openCalModal($event)"
      [dayStartHour] = "8"
      [dayEndHour] = "18"
      [refresh]="refresh"
      [startDay] = "1"
      [weekStartsOn] = "1"
    >
    </mwl-calendar-week-view>

But when I get the same events from my server.ts file (using express node.js) it crashes showing these errors:

Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings.

Error
    at toDate (index.js:47)
    at startOfSecond (index.js:28)
    at isSameSecond (index.js:32)
    at isEventIsPeriod (calendar-utils.js:152)
    at calendar-utils.js:165
    at Array.filter (<anonymous>)
    at getEventsInPeriod (calendar-utils.js:164)
    at getWeekView (calendar-utils.js:361)
    at CalendarUtils.getWeekView (angular-calendar.js:1406)
    at CalendarWeekViewComponent.getWeekView (angular-calendar.js:2803)

And if I write my dates like this:

start: new Date('2021-7-13T12:30:00.000Z'), 
end: new Date('2021-7-13T12:30:00.000Z'), 

it shows:

angular-calendar.js:776 angular-calendar Event is missing the `start` property 
{id: 1, title: "First booking", start: null, end: null, userId: 2}
end: null
id: 1
start: null
title: "First booking"
userId: 2

Anyone knows how can I solve this issue?

Thanks a lot

Answer 1

new Date('2021-7-13T12:30:00.000Z') produces an invalid date, that's why you're start and end properties are set to null .

The correct string format should be:

new Date('2021-07-13T12:30:00.000Z') (use 2 digits for months).

If for some reason you need to stick to your original string format, I suggest you use the parse function of date-fns like this:

start: parse('2021-7-13T12:30:00.000Z', "yyyy-M-dd'T'HH:mm:ss.SSSX", new Date())