Hints

Interactive HTML elements are annotated with aria-label and title attributes to make them more descriptive. It is possible to control the text of these attributes.

buttonHints : A map of { [buttonName]: string }. By default, the button’s text will be used. The first placeholder/function argument (info below) will be the localized button text, the second is the button name from the headerToolbar/footerToolbar options. A value like { next: "Next $0 } might result in "Next month".

viewHint : For buttons that represent calendar views, if an entry in the buttonHints map is not found, this viewHint value will be used. The first placeholder/function argument (info below) will be the localized buttonText, the second is the button name from the headerToolbar/footerToolbar options. A value like "$0 view" might result in "day view".

navLinkHint : Describes what happens after a navLink is clicked. The first placeholder/function argument (info below) will be the localized date text, the second will be the Date object. A value like "Go to $0" might result in "Go to January 1, 2022".

moreLinkHint : Describes what happens after a “+more” link opens an event popover. The first and only placeholder/function argument is the number of events being hidden. A value like "Click to see $0 more events" might result in "Click to see 3 more events".

closeHint : Describes the “X” icon on the event popover. Default: "Close"

Arguments

Certain hint options accept arguments. If the option is specified as a string, these arguments will be injected in place of $0, $1, etc. If the option is specified as a function, these will be the function arguments. Example:

new Calendar(calendarEl, {
  viewHint: function(buttonText, buttonName) {
    if (buttonName.match(/^dayGrid/)) { // matches "dayGridWeek"
      return buttonText + " list view" // results in "week list view"
    } else {
      return buttonText + " view" // results in "week view"
    }
  }
})