React中如何根据当日事件自定义FullCalendar的moreLink渲染

可以实现，核心是通过FullCalendar视图实例的getEvents()方法筛选出moreLink对应日期的所有事件，具体实现步骤如下：

• 从moreLinkContent的参数中提取date（链接所在日期）和view（当前视图实例）对象
• 利用view.getEvents()获取当前视图内的所有事件，再筛选出属于目标日期的事件
• 根据筛选出的事件属性，自定义渲染more链接的样式

React环境下的代码示例 #

moreLinkContent={({ date, view, text }) => {
  // 筛选出当前moreLink所在日期的所有事件
  const dayEvents = view.getEvents().filter(event => {
    // 适配moment/dayjs的日期判断逻辑，确保事件属于当前自然日
    return event.start.isSame(date, 'day');
  });

  if (dayEvents.length > 0) {
    // 假设事件类型存储在extendedProps的type字段中，根据实际结构调整
    const firstEventType = dayEvents[0].extendedProps.type;
    if (firstEventType === 'someType') {
      // 渲染绿色样式的自定义链接
      return (
        <span style={{ color: '#2ecc71', cursor: 'pointer', fontWeight: 500 }}>
          {text}
        </span>
      );
    }
  }

  // 默认样式渲染
  return <span style={{ cursor: 'pointer' }}>{text}</span>;
}}

注意事项 #

• 日期判断逻辑需根据你使用的日期库（moment/dayjs）调整，示例中使用的是isSame方法匹配自然日
• 事件的自定义属性通常存放在extendedProps中，需对应你实际的事件数据结构修改获取方式
• 若存在跨天事件，可扩展筛选条件，比如判断事件的start是否落在目标日期的0点至次日0点范围内

内容的提问来源于stack exchange，提问作者Darío Kozicki