buttons

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

Object

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: {
    left: 'prev,next today myCustomButton',
    center: 'title',
    right: '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
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' | 'icon' | 'text' | 'icon-text' | 'text-icon'
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.