我已经使用 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
这是周视图,您可以看到它是空的并且缺乏正常功能,例如当前时间指示器(细线)。
有人有这方面的经验吗?
也许这对某人有用。 我面临着在周/日视图中显示事件的相同问题(在任何浏览器中)。就我而言,这是由于使用了“资源”和不同的属性名称。
我使用此接口来获取带有资源的数据:
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'}
// ...
/>