buttons

Defines buttons that can be used in headerToolbar/footerToolbar — both custom buttons and overrides for standard buttons.

Specify a hash of button configurations. Reference custom button names from the headerToolbar setting:

var calendar = new Calendar(calendarEl, {
  buttons: {
    myCustomButton: {
      text: 'custom!',
      click: function() {
        alert('clicked the custom button!');
      }
    }
  },
  headerToolbar: {
    start: 'prev,next today myCustomButton',
    center: 'title',
    end: 'dayGridMonth,timeGridWeek,timeGridDay'
  }
});

You can also override the text or icon of standard buttons like today, prev, next:

var calendar = new Calendar(calendarEl, {
  buttons: {
    today: { text: 'Go to Today' },
    next: { iconContent: <svg>...</svg> }
  }
});

Each buttons entry accepts the following properties:

• text - the text to display on the button. For built-in buttons that often have icons, ensure you set display: 'text' | 'text-icon' | 'icon-text' if you want this text displayed.
• hint - the accessibility hint. defaults to text
• click - a callback for custom buttons, called when clicked. Accepts two arguments: (mouseEvent, htmlElement)
• iconClass - a CSS class name for a glyphicon-style icon.
• iconContent - SVG markup (preferred over iconClass). Injectable content.
• class/className - a ClassName Input for the button element
• isPrimary - when true, marks the button as a primary action (receives additional styling)
• display - controls whether the button shows an icon, text, or both. Overrides the global buttonDisplay setting. Accepted values: 'auto' (default) | 'icon' | 'text' | 'icon-text' | 'text-icon'. The 'auto' value means that if the theme supplies an icon, then ONLY the icon will be displayed, no text. Otherwise, just text will be displayed.
• didMount - called right after the button has been added to the DOM
• willUnmount - called right before the button will be removed from the DOM

See a demo of buttons.