Our powerful JS Calendar component


Post by dwilliams »

Hello,

Version: I'm on version 5.1.3 , we're upgrading from 4.3.5
Library: React

Anytime I edit a calendar event we get an error on the sync return. It says:
calendar.module.js:69106 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getTime')
at DayTime.shiftDate (calendar.module.js:69106:1)
at DayTime.startOfDay (calendar.module.js:69164:1)
at EventDayIndex.removeEvent (calendar.module.js:139761:1)
at EventDayIndex.sync (calendar.module.js:139815:1)

I can create a new calendar event, it's just the editing that throws an error.

Image

Here is the API that returns data
Image

Your help is appreciated.

Regards,

Dan


Post by tasnim »

Could you please provide the steps to reproduce it? The assistance is gonna be much faster if you could provide us a runnable test case so that we can debug it and try to give you the solution right away.

Good Luck :),
Tasnim


Post by dwilliams »

Hey Tasnim,

The calendar is heavily integrated into our software so it would be difficult to have a stand-alone runnable test, but I'll see what I can figure out.

The steps to reproduce are simple. Edit an event and the error occurs, the field changed doesn't matter.

The step is:

  1. Save any type of edit

Post by tasnim »

Sorry, still not able to reproduce it. Any chance to see your calendar config?


Post by dwilliams »

Yes,

It's pretty long but I'm simplified it and we still get the error. It happens once the calendar is loaded, we edit, and then it tries to load/sync the new data into the calendar. I'll make a video with the network calls.

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [calendarConfig, setCalendarConfig] = useState<AugmentedCalendar>({
    defaultAddress: "",
    loadOnDemandFeature: true,
    sidebar: {
      items: {
        eventFilter: false,
        resourceFilter: false,
      },
    },
    mode: "month",
    modes: {
      day: null,
      year: null,
      week: null,
      agenda: null,
    },
    crudManager: {
      transport: {
        // built-in transport layer
        load: {
          method: "GET",
          url: `${api}/bryntumcalendar/load`,
          paramName: "data",
          params: {
            calendarLoadMode: mode,
          },
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${new Authorization().AccessToken}`,
          },
        },
        sync: {
          url: `${api}/bryntumcalendar/sync`,
          headers: {
            Authorization: `Bearer ${new Authorization().AccessToken}`,
          },
        },
      },
      autoSync: true, // if sync is false, saving must be done manually via programmatic execution.
      autoSyncTimeout: 500,
      onSync(request: any) {
        // if (request.response.message) {
        //   console.log(request);
        //   alert(request.response.message);
        // }

    // setTimeout(() => {
    //   calendar.current.instance.crudManager.load();
    // }, 1500);
  },
},
  });

Post by dwilliams »

Here is a video showing the error. It happens if we have an event in the calendar, edit an event and then load events into it again, it's like it can't replace the edited event or something.

It can load the calendar initially and load them again if I go to a different month but if I edit any events and then try, it throws the error. It doesn't matter what the edit is, time, name, etc...
https://loom.com/share/08ebf8037b64492cb4e846d5c89faa0d


Post by alex.l »

Cannot say exactly, all in your video look correct and clean. I tried that locally and see no errors...
I would suggest you to enable "Pause on exception" in Dev Tools and debug it to see what goes wrong.
Cannot read properties of null (reading 'getTime') may happens when code expected Date typed value, but null is found. This means that Date has not been passed or has not been parsed. Please check all server responses if all dates are there, if format is correct. Check if you have any changes for date formatting in some settings, etc.

Of course, the easiest way here if we would be able to reproduce that on our side.
Please attach full JSON responses and requests, maybe that would be enough to find the root cause...

All the best,
Alex


Post Reply