javascriptfullcalendarfullcalendar-5

Add a custom button to FullCalendar but only for a specific view

Using FullCalendar v5 you can add custom buttons as documented here.

Is it possible to only show the custom button if the user is on a specific view e.g. month view?

e.g. How can I get myCustomButton from below only appear on dayGridMonth view?

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

  • You can detect when the view has changed, and set the header toolbar option accordingly, to include or exclude your button.

    Simple example:

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

    Working demo: https://codepen.io/ADyson82/pen/yLRxger

    Relevant documentation: