如何为timeGridWeek和timeGridDay视图的事件设置多背景色？

针对你在FullCalendar React中需要的带缓冲区域的事件显示需求，这里提供一套可行的实现方案：

核心思路 #

把单个事件拆成开始缓冲、主事件、结束缓冲三个关联的事件对象，通过标识区分类型，再控制它们的可见性和样式，仅在timeGridWeek和timeGridDay视图中展示缓冲区域。

具体步骤 #

1. 预处理事件数据 #

在传入FullCalendar的事件列表前，把原始事件拆分为三个部分，给每个事件添加eventType标识（用于区分缓冲和主事件），同时保留原始事件的ID用于关联：

// 示例原始事件
const originalEvent = {
  id: 'game-1',
  title: '篮球赛',
  start: '2024-05-20T17:00:00',
  end: '2024-05-20T20:00:00',
  startBuffer: 30, // 开始缓冲分钟数
  endBuffer: 90, // 结束缓冲分钟数
  mainColor: '#2563eb' // 主事件颜色
};

// 拆分事件的工具函数
const splitEventWithBuffers = (event) => {
  const events = [];
  // 主事件
  events.push({
    ...event,
    eventType: 'main',
    editable: true // 主事件保留可编辑权限
  });

  // 开始缓冲事件
  if (event.startBuffer > 0) {
    const bufferStart = new Date(event.start);
    bufferStart.setMinutes(bufferStart.getMinutes() - event.startBuffer);
    events.push({
      id: `${event.id}-buffer-start`,
      title: '', // 缓冲区域不显示标题
      start: bufferStart.toISOString(),
      end: event.start,
      eventType: 'buffer-start',
      originalEventId: event.id,
      editable: false, // 缓冲不可编辑
      allDay: false
    });
  }

  // 结束缓冲事件
  if (event.endBuffer > 0) {
    const bufferEnd = new Date(event.end);
    bufferEnd.setMinutes(bufferEnd.getMinutes() + event.endBuffer);
    events.push({
      id: `${event.id}-buffer-end`,
      title: '',
      start: event.end,
      end: bufferEnd.toISOString(),
      eventType: 'buffer-end',
      originalEventId: event.id,
      editable: false,
      allDay: false
    });
  }

  return events;
};

// 处理所有事件
const processedEvents = [originalEvent].flatMap(splitEventWithBuffers);

2. 控制缓冲事件的视图可见性 #

通过eventRender回调，让缓冲事件仅在timeGridWeek和timeGridDay视图中显示：

import FullCalendar from '@fullcalendar/react';
import timeGridPlugin from '@fullcalendar/timegrid';

const Calendar = () => {
  const handleEventRender = (info) => {
    const allowedViews = ['timeGridWeek', 'timeGridDay'];
    // 如果是缓冲事件且不在允许的视图中，隐藏
    if (['buffer-start', 'buffer-end'].includes(info.event.extendedProps.eventType) && !allowedViews.includes(info.view.type)) {
      info.el.style.display = 'none';
    }
  };

  return (
    <FullCalendar
      plugins={[timeGridPlugin]}
      initialView="timeGridWeek"
      events={processedEvents}
      eventRender={handleEventRender}
      eventContent={renderEventContent}
    />
  );
};

3. 自定义事件样式 #

用eventContent自定义React组件，根据eventType渲染不同样式的区块：

const renderEventContent = (info) => {
  const { eventType, mainColor } = info.event.extendedProps;
  
  // 缓冲区域样式
  if (eventType === 'buffer-start' || eventType === 'buffer-end') {
    return (
      <div className="buffer-event" style={{ backgroundColor: '#e5e7eb', width: '100%', height: '100%' }} />
    );
  }

  // 主事件样式
  return (
    <div className="main-event" style={{ backgroundColor: mainColor, width: '100%', height: '100%', padding: '2px' }}>
      <span>{info.event.title}</span>
    </div>
  );
};

也可以用CSS类名控制样式，避免内联样式：

.buffer-event {
  background-color: #e5e7eb !important;
  border: none !important;
}

.main-event {
  border: none !important;
  color: white;
}

4. 优化交互体验 #

• 给缓冲事件设置editable: false，避免误操作
• 在eventClick回调中过滤缓冲事件，防止触发不必要的弹窗：

const handleEventClick = (info) => {
  if (['buffer-start', 'buffer-end'].includes(info.event.extendedProps.eventType)) {
    info.jsEvent.preventDefault();
    return;
  }
  // 处理主事件的点击逻辑
};

内容的提问来源于stack exchange，提问作者Louis Gates