向 FullCalendar 添加自定义按钮，但仅适用于特定视图

Question

使用 FullCalendar v5，您可以添加自定义按钮，如此处所述.

是否可以仅在用户处于特定视图时显示自定义按钮，例如月视图?

例如我怎样才能从下面获得

myCustomButton

只出现在

dayGridMonth

视图中？

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'
  }
});

Answer 1

您可以检测视图何时更改，并相应地设置标题工具栏选项，以包含或排除您的按钮。

简单的例子：

    viewDidMount: function (arg) {
      if (arg.view.type == "dayGridMonth") {
        calendar.setOption("headerToolbar", {
          left: "prev,next today myCustomButton",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay"
        });
      }
      else {
        calendar.setOption("headerToolbar", {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay"
        });
      }
    }

工作演示：https://codepen.io/ADyson82/pen/yLRxger

相关文档：

• https://fullcalendar.io/docs/v5/view-render-hooks
• https://fullcalendar.io/docs/v5/view-object
• https://fullcalendar.io/docs/v5/dynamic-options
• https://fullcalendar.io/docs/v5/customButtons

Answer 2

我发现 viewDidMount 钩子很有用。让我们在视图更改时做一些事情，例如：

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(obj) {
    document.querySelector(".fc-myCustomButton-button").style.display =
        obj.view.type == "dayGridMonth" ? "inline-block" : "none";
},

});