我在我的 ReactJS 应用程序中使用 FullCalendar(具体来说是 v6.1.4)。日历组件如下所示:
<FullCalendar
plugins={[dayGridPlugin, interactionPlugin, listPlugin]}
initialView={window.innerWidth <= 768 ? "listWeek" : "dayGridMonth"}
height={height * 0.85}
events={events}
locale={skLocale}
displayEventTime={false}
dateClick={(data) => handleDateClick({ data: data })}
eventClick={(data) => handleEventClick({ data: data })}
eventContent={(arg) => (
<div className="eventWrapper">
<div className="approved_icon">{selectApprovalIcon(arg.event.extendedProps.approvedStatus)}</div>
<b>{arg.event.title}</b>
<div>{arg.event.extendedProps.time}</div>
<div>{arg.event.extendedProps.description}</div>
</div>
)}
/>
将日志从数据库映射到事件的函数如下所示:
const mapEvents = () => {
const events = allWorkLogs.map(log => {
let colors = ['darkred', 'darkgreen', 'blue', 'purple', 'black', 'brown'];
let evColor = 'darkblue';
const projectName = findProjectName(log.project_id);
const workStart = moment(log.work_date_start, "HH:mm:ss");
const workEnd = moment(log.work_date_end, "HH:mm:ss");
for (let i = 0; i < myProjects.length; i++) {
if (projectName === myProjects[i].name) {
evColor = colors[i];
console.log(colors[i]);
}
}
return {
id: log.id,
title: projectName,
start: log.work_date,
eventColor: evColor,
time: workStart.format("HH:mm") + "-" + workEnd.format("HH:mm"),
description: log.note,
approvedStatus: findApprovalStatus(log.id)
};
});
setEvents(events);
}
问题是:映射到事件的
color
没有应用到日历的最终渲染中。
我已经检查过我选择颜色的逻辑是否以正确的格式返回了一个字符串。我也尝试过手动设置颜色,例如
'blue'
。但是,显示事件的背景颜色是透明的。
我也尝试过将
color:
更改为eventColor:
,但没有结果。
奇怪的是它在大约三周前就开始工作了(那是我用自定义事件实现日历的时候)。现在我回来实施代表每个事件批准状态的图标,突然事件的背景颜色不起作用。关于可能是什么问题的任何想法? 提前致谢