如何为FullCalendar特定视图添加自定义按钮

当然可以实现，最直接的方式是给不同视图单独配置headerToolbar，或者通过视图事件动态控制按钮的显示隐藏，下面给你两种可行方案：

方案一：针对视图单独配置工具栏（推荐） #

FullCalendar v5支持为每个视图单独设置headerToolbar，你可以在全局配置里设置默认工具栏，然后给dayGridMonth视图单独添加自定义按钮：

var calendar = new Calendar(calendarEl, {
  customButtons: {
    myCustomButton: {
      text: 'custom!',
      click: function() {
        alert('clicked the custom button!');
      }
    }
  },
  // 其他视图使用的默认工具栏（不含自定义按钮）
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  // 给月视图单独配置工具栏（包含自定义按钮）
  views: {
    dayGridMonth: {
      headerToolbar: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      }
    }
  }
});

这样设置后，只有切换到月视图时，左侧工具栏才会显示myCustomButton，周视图和日视图里不会出现这个按钮。

方案二：通过视图事件动态控制显示 #

如果需要更灵活的逻辑（比如根据其他条件决定是否显示），可以监听视图的挂载/切换事件，手动控制按钮的显示状态：

var calendar = new Calendar(calendarEl, {
  customButtons: {
    myCustomButton: {
      text: 'custom!',
      click: function() {
        alert('clicked the custom button!');
      }
    }
  },
  headerToolbar: {
    left: 'prev,next today myCustomButton',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  // 视图加载完成后触发
  viewDidMount: function(info) {
    // 获取自定义按钮的DOM元素，类名格式是fc-自定义按钮名-button
    const customBtn = document.querySelector('.fc-myCustomButton-button');
    if (info.view.type === 'dayGridMonth') {
      customBtn.style.display = 'inline-block';
    } else {
      customBtn.style.display = 'none';
    }
  },
  // 视图切换前触发，隐藏按钮
  viewWillUnmount: function(info) {
    const customBtn = document.querySelector('.fc-myCustomButton-button');
    if (customBtn) {
      customBtn.style.display = 'none';
    }
  }
});

这种方法通过判断当前视图的类型，动态修改按钮的display样式来控制显示隐藏。

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