如何从事件的资源中获取数据并在 React-Big-Calendar 中的周视图上显示

Question

我正在尝试为月、周和日视图添加自定义数据。我创建了自定义事件文件，在其中我为一周的事件分隔日期和日期时间。

如果我像这个一样导出事件文件，我可以显示数据

export default [
{
progress: '80',
title: 'streak minus one',
end: new Date(2022, 2, 21, 10, 8, 0),
start: new Date(2022, 2, 21, 10, 0, 0),
resource: {
month: {
status: true,
progress: 80
}
}
},
{
progress: '80',
title: 'streak minus one',
end: new Date(2022, 2, 21, 10, 19, 0),
start: new Date(2022, 2, 21, 10, 9, 0),
resource: {
month: {
status: true,
progress: 80
}
}
}
]

但不像这个

export default [
{
title: 'streak minus one',
end: new Date(2022, 2, 21),
start: new Date(2022, 2, 21),
resource: {
month: {
progress: 70
},
week: [
{
endDateTime: new Date(2022, 2, 21, 10, 8, 0),
startDateTime: new Date(2022, 2, 21, 10, 0, 0)
},
{
endDateTime: new Date(2022, 2, 21, 10, 19, 0),
startDateTime: new Date(2022, 2, 21, 10, 9, 0)
},
{
endDateTime: new Date(2022, 2, 21, 10, 26, 0),
startDateTime: new Date(2022, 2, 21, 10, 19, 0)
},
{
endDateTime: new Date(2022, 2, 21, 10, 33, 0),
startDateTime: new Date(2022, 2, 21, 10, 26, 0)
}
]
}
},
{
title: 'second event',
end: new Date(2022, 2, 23),
start: new Date(2022, 2, 23),
resource: {
month: {
status: true,
progress: 45
},
week: [
{
endDateTime: new Date(2022, 2, 22, 10, 15, 0),
startDateTime: new Date(2022, 2, 22, 10, 0, 0)
}
]
}
}
]

如何通过在React大日历中从周视图上的资源中获取来显示事件

Answer 1

React Big Calendar希望events单个"事件"数据结构保持一致，并在所有视图中使用相同的数据"访问器"(startAccessor、endAccessor、titleAccessor(。您可以使用onRangeChange来重新加载events，但它仍然希望数据结构是相同的。