React中FullCalendar如何根据考勤状态（请假）修改指定日期背景色

嗨，我来帮你搞定这个问题～

你现在遇到的核心问题是：直接给FullCalendar组件统一设置eventBackgroundColor时，所有事件的背景色会被覆盖成同一个值，最终只有最后一个事件的设置生效，所以只有29号的背景色变了。正确的思路应该是给每个事件单独配置背景色，根据考勤状态动态区分。

你可以在处理newEvents数组的时候，就根据attendance_val（也就是事件的title）判断是否为请假状态，然后给对应事件加上backgroundColor属性：

const newEvents = events?.map((event) => ({
  id: event?.emp_id,
  title: event?.attendance_val,
  start: event?.att_date,
  display: "background",
  allDay: true,
  // 根据考勤状态动态设置背景色
  backgroundColor: event?.attendance_val === 'Leave' ? '#ff0000' : '#919eab4d'
}));

这样处理后，每个事件都会根据自己的状态拥有对应的背景色：标记为“Leave”的日期会显示红色，其他日期则使用你原本的浅灰色。

最后记得把FullCalendar组件上的eventBackgroundColor属性删掉哦，因为现在每个事件已经自带了背景色配置，统一设置会覆盖我们刚才的动态判断结果。

备注：内容来源于stack exchange，提问作者Rahul