如何在React项目的FullCalendar中添加自定义头部工具栏按钮？

要给FullCalendar的headerToolbar添加自定义按钮，只需两步：在头部配置里声明按钮名称，再定义按钮的行为与样式。

步骤1：修改headerToolbar，加入自定义按钮名称 #

在现有headerToolbar的对应区域（left/center/right）添加自定义按钮的标识名（比如myCustomButton），示例如下：

headerToolbar={{
  left: "prev, next, today, myCustomButton", // 新增自定义按钮标识
  center: "title",
  right: "dayGridMonth, timeGridWeek, timeGridDay",
}}

步骤2：用customButtons属性配置按钮细节 #

给FullCalendar组件新增customButtons属性，定义按钮的显示文本和点击事件：

customButtons={{
  myCustomButton: {
    text: "新增事件", // 按钮显示的文字
    click: () => {
      // 这里编写点击后的业务逻辑，比如打开弹窗、触发状态更新等
      console.log("自定义按钮被点击");
      // 示例：打开新增事件模态框
      // setShowAddModal(true);
    }
  }
}}

完整代码示例 #

将上述配置整合到你的FullCalendar组件中，最终代码如下：

<FullCalendar
  plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
  headerToolbar={{
    left: "prev, next, today, myCustomButton",
    center: "title",
    right: "dayGridMonth, timeGridWeek, timeGridDay",
  }}
  // 自定义按钮配置
  customButtons={{
    myCustomButton: {
      text: "新增事件",
      click: () => {
        alert("点击了自定义按钮！");
      }
    }
  }}
  allDaySlot={false}
  initialView="dayGridMonth"
  slotDuration="01:00:00"
  editable={true}
  selectable={true}
  selectMirror={true}
  weekends={true}
  nowIndicator={true}
  events={allEvents}
/>

额外说明 #

• 如果需要给按钮添加图标（比如用Font Awesome），可以把text替换为图标标签（前提是项目已引入对应图标库）：

  text: '<i class="fa fa-plus-circle"></i> 新增'
  

• click函数内可以实现任意业务逻辑，比如调用API、切换组件状态等。

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