React Big Calendar - Safari fails to render events on week and day view

Question

I have been using React-big-calendar library for a while now. It works well with Crhome and Firefox, but falls flat on Safari. Safari renders events fine on month-view, but fails to render any events/background-lines or time-column on week/day views.

Here is the code to reproduce issue:

import React from 'react'
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
import 'react-big-calendar/lib/css/react-big-calendar.css'

const eventList = [
  {
    id: 0,
    title: 'Board meeting',
    start: new Date('2022-02-15T07:08:00'),
    end: new Date('2022-02-15T10:10:00')
  }
]
const MainCalendar = () => (
  <div
    style={{
      height: '75vh',
      minHeight: '580px',
      minWidth: '650px',
      background: '#fff',
      padding: '15px'
    }}
  >
    <Calendar
      localizer={momentLocalizer(moment)}
      events={eventList}
      startAccessor="start"
      endAccessor="end"
    />
  </div>
)

export default MainCalendar

Here is the month view that works fine

Here is the week view, you can see its empty and lacks normal features such as current time indicator(thin line).

Here is day view, also broken.

Does anybody have any experience about this?

Answer 1

Perhaps it will be useful to someone. I am faced with the same problem of displaying events in Week/Day views (in any browser). In my case, this was due to the use of "Resources" and different property names.

I used this interface for data with resources:

interface Resource {
  resourceId: string | number,
  resourceTitle: string
}

const resources = [{
  resourceId: 1,
  resourceTitle: 'Office A',
}];

But in Events data I used incorrect property

const events = [{
  title: 'event title in Office A',
  start: new Date(),
  end: new Date(),
  resource: 1, // must be `resourceId`
}];

<Calendar
    // ... 
    events={events}
    resources={resources}
    resourceIdAccessor={'resourceId'}
    resourceTitleAccessor={'resourceTitle'}
    // ...
  />

Answer 2

Are you using a current version of React-Big-Calendar? The documentation site uses the most current version, and everything runs fine in Safari.