React版Full Calendar CSS自定义：日期标签与周数列配置

架构老林

2026-6-24

FullCalendar React 自定义样式与周数列实现

1. 调整日期标签到左上角（无需`!important`）

FullCalendar默认给.fc-daygrid-day-top设置了flex-direction: column，要覆盖这个样式且不用!important，只需提高CSS选择器的优先级，借助父级容器类增强权重即可：

/* index.css */
.fc .fc-daygrid-day-top {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 4px; /* 可选：调整内边距优化布局 */
}

/* 可选：让日期完全靠左对齐 */
.fc .fc-daygrid-day-top .fc-daygrid-day-number {
  margin-right: auto;
}

.fc .fc-daygrid-day-top的选择器权重高于默认的.fc-daygrid-day-top，无需!important就能覆盖原有样式。

2. 实现单独周数列

要做出类似截图的独立周数列，需要结合FullCalendar内置配置和自定义CSS：

步骤1：开启周数显示

在FullCalendar组件配置中添加周数相关参数：

// React组件文件
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

function Calendar() {
  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      weekNumbers={true}
      weekNumberCalculation="ISO" // 可选：采用ISO周数计算规则，也可自定义函数
      // 其他配置项...
    />
  );
}

步骤2：自定义周数列样式

通过CSS调整布局，让周数成为独立左侧列：

/* index.css */
/* 设置周数列样式 */
.fc .fc-week-number {
  width: 40px; /* 固定周数列宽度 */
  background-color: #f5f5f5; /* 可选：添加背景色区分列 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ddd;
}

/* 调整日历主体和表头，避免与周数列重叠 */
.fc .fc-daygrid-body,
.fc .fc-col-header {
  margin-left: 40px; /* 与周数列宽度保持一致 */
}