Having trouble with react big calendar and even data format crashing the calendar

Question

This SQL Query which returns to an array variable in react....

SELECT concat(LastName," ",job_desc," ",car_model) "title",DATE_FORMAT(job_date, '%Y-%m-%dT%TZ') "start" , date_format(date_add(job_date,interval 30 minute), '%Y-%m-%dT%TZ') "end" from jobs join cust_auto on jobs.cust_auto_id=cust_auto.cust_auto_id join persons on jobs.person_id=persons.person_id where job_date > date_sub(curdate(), interval WEEKDAY(curdate()) day) order by job_date

So the top event works fine however the bottom even crashes the calendar when I switch between the default view and the week or day view...the whole page just disappears...

 const testevent = [{
    'title': 'All Day Event very long title',
    'start': new Date(2023, 0, 13, 7, 0, 0),
    'end': new Date(2023, 0, 13, 8, 0, 0)
  }]

  /*const testevent = [
    {
      "end": "2023-01-12T10:30:00Z",
      "start": "2023-01-12T10:00:00Z",
      "title": "Lterkdkflskd Front Tires Camry"
    }
  ]
  */

So I'm seeing the below error with the bottom event...when I switch between calendar views...

hi, perhaps related to strict omde? https://stackoverflow.com/questions/65026280/warning-using-unsafe-componentwillreceiveprops-in-strict-mode — jspcal, Jan 12 '23 at 01:08

score 0 · Answer 1 · answered Feb 02 '23 at 14:03

Big Calendar requires true JS Date objects. Your string (UTC) may initially display in a Month view, but will bomb everywhere else.

And the 'warning' you see is because there's a lot of old code in Big Calendar that still has to be replaced. It doesn't stop it from working, yet, as React does still support those legacy class component methods. Big Calendar has a refactor scheduled for their next major release.

Having trouble with react big calendar and even data format crashing the calendar

1 Answers1