如何在FullCalendar日视图的事件中添加自定义文本

要在FullCalendar日视图的事件块内添加自定义标签（类似参考图中事件里的额外标注文本），可以通过以下方式实现：

核心实现思路：利用eventContent回调自定义事件内容 #

FullCalendar提供的eventContent配置项，允许完全自定义事件的HTML结构，这是实现自定义标签最直接的方案。

1. 基础JS版本实现 #

步骤1：初始化日历时配置自定义字段与eventContent

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridDay', // 指定日视图
    events: [
      {
        title: '团队例会',
        start: '2024-05-20T09:00:00',
        end: '2024-05-20T10:30:00',
        extendedProps: {
          customTag: '部门同步' // 存储自定义标签内容
        }
      },
      {
        title: '客户拜访',
        start: '2024-05-20T14:00:00',
        end: '2024-05-20T16:00:00',
        extendedProps: {
          customTag: '高优先级'
        }
      }
    ],
    // 自定义事件内容渲染
    eventContent: function(info) {
      return {
        html: `
          <div class="fc-event-inner">
            <div class="fc-event-title">${info.event.title}</div>
            ${info.event.extendedProps.customTag ? `<div class="fc-custom-tag">${info.event.extendedProps.customTag}</div>` : ''}
          </div>
        `
      };
    }
  });
  calendar.render();
});

步骤2：添加CSS样式美化标签

/* 自定义标签样式 */
.fc-custom-tag {
  font-size: 0.75em;
  color: #ffffff;
  background-color: #e74c3c;
  padding: 2px 5px;
  border-radius: 3px;
  margin-top: 4px;
  display: inline-block;
}

/* 调整事件内边距，避免标签挤在一起 */
.fc-event-inner {
  padding: 4px 6px;
}

2. React版本实现 #

如果使用React版本的FullCalendar，用组件形式渲染内容即可：

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

const CalendarComponent = () => {
  // 自定义事件内容渲染函数
  const renderEventContent = ({ event }) => {
    return (
      <div className="fc-event-inner">
        <div className="fc-event-title">{event.title}</div>
        {event.extendedProps.customTag && (
          <div className="fc-custom-tag">{event.extendedProps.customTag}</div>
        )}
      </div>
    );
  };

  const events = [
    {
      title: '项目启动会',
      start: '2024-05-21T10:00:00',
      end: '2024-05-21T11:30:00',
      extendedProps: { customTag: '重要' }
    }
  ];

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

export default CalendarComponent;

关键注意事项 #

• 自定义字段必须放在extendedProps对象内，避免与FullCalendar内置的事件字段（如title、start等）冲突
• 如果需要动态修改标签内容，只需更新对应事件的extendedProps.customTag，再调用calendar.refetchEvents()刷新视图
• 日视图下若事件高度不足，可通过配置eventMinHeight调整事件最小高度，确保标签完全显示：

  eventMinHeight: 60 // 设置事件最小高度为60px
  

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