如何使用 React JS 更改全日历中特定日期的背景颜色

Question

我在我的 React JS 应用程序中使用 fullcalendar 进行员工考勤项目。我必须更改员工休假当天的背景颜色。

我正在从 API 的列表中获取员工出勤详细信息。

const newEvents = events?.map((event) => ({ id：事件？.emp_id， 标题：活动？.attendance_val， 开始：事件？.att_date， 显示：“背景”， 全天：真实， }));

console.log("新事件=>", newEvents)

在控制台中打印这个新的事件列表，然后获取选定员工的所有数据。

现在，当标题为“离开”时，我必须更改当天的颜色。 我正在使用 eventBackgroundColor= {newEvents ？ "#ff0000" : "#919eab4d"} 但只有最后一个交易日（2 月 29 日）的颜色发生了变化。

我也尝试过 eventBackgroundColor= {newEvents.title === "离开" ？ "#ff0000" : "#919eab4d"} 但它给出错误。

反应代码如下

    <Card>
      <StyledCalendar>
        <CalendarToolbar
          date={date}
          view={view}
          // loading={eventsLoading}
          onNextDate={onDateNext}
          onPrevDate={onDatePrev}
          onToday={onDateToday}
          onChangeView={onChangeView}
          onOpenFilters={openFilters.onTrue}
        />

        <Calendar
          weekends
          editable
          droppable
          selectable
          rerenderDelay={10}
          allDayMaintainDuration
          eventResizableFromStart
          ref={calendarRef}
          initialDate={date}
          initialView={view}
          dayMaxEventRows={3}
          eventDisplay="block"
          events={newEvents}
          // eventBackgroundColor= {newEvents.title === "Leave" ? "#ff0000" : "#919eab4d"}
          eventBackgroundColor= {newEvents ? "#ff0000" : "#919eab4d"}
          headerToolbar={false}
          select={onSelectRange}
          height={smUp ? 720 : 'auto'}
          plugins={[
            listPlugin,
            dayGridPlugin,
            timelinePlugin,
            timeGridPlugin,
            interactionPlugin,
          ]}
        />
      </StyledCalendar>
    </Card>

Answer 1

您不能使用

eventBackgroundColor

为单个事件设置颜色。根据文档，此选项仅接受包含颜色值的简单字符串。它不接受回调等。

它也提到了：

可以使用backgroundColor事件源对象选项在每个源的基础上覆盖此选项，或者使用backgroundColor事件对象选项在每个事件的基础上覆盖此选项。

所以这就是您最有可能需要走的路线。

您可以在生成事件源时设置事件的

backgroundColor

属性，或者如果不可能，您可以使用 eventDataTransform 回调在每个事件导入日历时运行颜色选择逻辑.

这是一个示例，其中颜色预加载到 JSON 事件对象中，准备传递到 fullCalendar：

{
  "title": "Leave",
  "start": "2024-04-11",
  "end": "2024-04-13",
  "display": "background",
  "backgroundColor": "#ff0000"
}

这是使用

eventDataTransform

的方法示例：

eventDataTransform = {handleEventDataTransform}

...

function handleEventDataTransform(eventData) {
  eventData.backgroundColor = (eventData.title === "Leave" ? "#ff0000" : "#919eab4d");
  return eventData;
}