在React FullCalendar中使用slate主题需要导入哪些内容？

架构老林

2026-10-5

React FullCalendar slate主题生效方案

主题归属说明

slate是FullCalendar官方适配Bootswatch（Bootstrap衍生主题库）的内置支持主题，不属于原生Bootstrap自带主题，也不是无第三方依赖的FullCalendar原生默认主题，需要配合官方Bootstrap适配器使用才能生效。

具体配置步骤

第一步：安装必需依赖
执行以下命令安装对应的适配包和主题包：

npm install @fullcalendar/bootstrap bootswatch

如果使用yarn则执行：

yarn add @fullcalendar/bootstrap bootswatch

第二步：导入依赖与样式
在使用FullCalendar的组件文件头部导入对应内容：

// 导入Bootstrap适配插件
import bootstrapPlugin from '@fullcalendar/bootstrap'
// 导入FullCalendar Bootstrap适配样式
import '@fullcalendar/bootstrap/main.css'
// 导入slate主题基础样式
import 'bootswatch/dist/slate/bootstrap.min.css'

第三步：修正组件配置
在你原有组件配置的基础上，将bootstrapPlugin添加到plugins数组即可，你已配置的themeSystem='slate'无需修改，修正后的完整组件代码如下：

<FullCalendar
  plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, momentTimezonePlugin, bootstrapPlugin]}
  headerToolbar={{
    left: 'prev,next,today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  }}
  initialView='timeGridWeek'
  selectable={true}
  selectMirror={true}
  themeSystem='slate'
  dayMaxEvents={false}
  weekends={true}
  timeZone={time_zone} 
  events={scheduledEvents}
  eventClick={handleShowUpdateEvent}
  select={handleShowCreateEvent}
  eventContent={renderEventContent}
  eventChange={UpdateEvent}
  displayEventTime={true}
/>