React 大日历 - Safari 无法在周和日视图上呈现事件

Question

我已经使用 React-big-calendar 库有一段时间了。它在 Crhome 和 Firefox 上运行良好，但在 Safari 上表现不佳。 Safari 在月视图上渲染事件效果很好，但在周/日视图上无法渲染任何事件/背景线或时间列。

这是重现问题的代码：

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

这是运行良好的月视图

这是周视图，您可以看到它是空的并且缺乏正常功能，例如当前时间指示器（细线）。

这是日景，也坏了。

有人有这方面的经验吗？

Answer 1

您使用的是当前版本的 React-Big-Calendar 吗？文档站点使用最新版本，并且在 Safari 中一切运行良好。

Answer 2

也许这对某人有用。 我面临着在周/日视图中显示事件的相同问题（在任何浏览器中）。就我而言，这是由于使用了“资源”和不同的属性名称。

我使用此接口来获取带有资源的数据：

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

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

但是在事件数据中我使用了不正确的属性

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'}
    // ...
  />