FullCalendar 事件组件自定义需求及样式示例

开发者阿泽

2026-8-16

FullCalendar事件组件自定义样式实现方案

当前与目标样式说明

当前默认事件组件：仅展示事件标题，为纯色背景块
期望自定义效果：事件包含标题、底部状态标签，背景带渐变效果，整体样式更精致

实现步骤

1. 自定义事件HTML结构（使用`eventContent`钩子）

通过FullCalendar的eventContent钩子替换默认事件模板，添加自定义元素：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 基础日历配置（如视图、日期范围等）
    events: [
      {
        title: '项目评审会',
        start: '2024-05-20T10:00:00',
        end: '2024-05-20T12:00:00',
        status: '已完成' // 自定义状态字段
      }
    ],
    // 自定义事件内容渲染
    eventContent: function(info) {
      return {
        html: `
          <div class="custom-event">
            <div class="event-title">${info.event.title}</div>
            <div class="event-status">${info.event.extendedProps.status}</div>
          </div>
        `
      };
    }
  });
  calendar.render();
});

2. 添加CSS样式实现视觉效果

编写自定义CSS，实现渐变背景、布局和状态标签样式：

.custom-event {
  height: 100%;
  padding: 4px 6px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.event-title {
  font-size: 0.85rem;
  font-weight: 500;
}

.event-status {
  font-size: 0.7rem;
  opacity: 0.9;
  text-align: right;
}