FullCalendar自定义按钮首次加载时如何设置激活高亮状态

数据老陈

2026-9-26

解决方法

FullCalendar未提供自定义按钮和视图状态绑定的内置能力，可通过监听组件生命周期钩子手动操作DOM实现需求，具体实现如下：

前置配置

先给你的自定义按钮新增唯一类名，用于后续DOM选择：

customButtons: {
  todayBtn: {
    text: "todayButton",
    className: "custom-today-btn", // 新增唯一标识类名
    click: () => {
      this.changeView("resourceTimeGridDay")
    }
  }
}

完整逻辑实现

通过初始化钩子处理首次加载高亮，再通过视图切换钩子保证后续交互时样式同步：

// 以下为FullCalendar v6 配置示例
const calendarConfig = {
  // 其余基础配置省略
  initialView: "resourceTimeGridDay", // 初始视图设为自定义按钮对应的目标视图
  // 上述自定义按钮配置
  customButtons: { /* 如上 */ },
  headerToolbar: { /* 你的工具栏配置 */ },
  // 初始化完成钩子，处理首次加载激活
  initialized: () => {
    // 框架封装版本可通过组件ref的getApi()方法获取calendar实例，替换下方this.calendar
    const currentView = this.calendar.view.type
    const customBtn = document.querySelector('.custom-today-btn')
    if (customBtn && currentView === 'resourceTimeGridDay') {
      // fc-button-active为FullCalendar内置的按钮激活样式类，和自带按钮高亮规则一致
      customBtn.classList.add('fc-button-active')
    }
  },
  // 视图切换钩子，动态更新按钮激活状态
  viewDidChange: (info) => {
    const customBtn = document.querySelector('.custom-today-btn')
    if (!customBtn) return
    if (info.view.type === 'resourceTimeGridDay') {
      customBtn.classList.add('fc-button-active')
    } else {
      customBtn.classList.remove('fc-button-active')
    }
  }
}