CalendarController

Some of the UI-framework integrations provide a “Calendar Controller” object that let you use calendar data outside the calendar itself. This is especially useful for rendering fully-custom toolbar UIs.

See this basic example in React:

import FullCalendar, { useCalendarController } from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/react/daygrid";

export default function Calendar() {
  const controller = useCalendarController();
  const buttons = controller.getButtonState();

  return (
    <div>
      <div class='toolbar'>
        <button
          onClick={() => controller.today()}
          disabled={buttons.today.isDisabled}
          aria-label={buttons.today.hint}
        >{buttons.today.text}</button>
        <div class='toolbar-title'>{controller.view.title}</div>
      </div>
      <FullCalendar
        controller={controller}
        plugins={[dayGridPlugin]}
      />
    </div>
  );
}

The CalendarController class has the following methods and properties:

• .today() — just like Calendar::today
• .prev() — just like Calendar::prev
• .next() — just like Calendar::next
• .prevYear() — just like Calendar::prevYear
• .nextYear() — just like Calendar::nextYear
• .gotoDate() — just like Calendar::gotoDate
• .incrementDate() — just like Calendar::incrementDate
• .changeView() — just like Calendar::changeView
• .view — just like Calendar::view
• .getDate() — just like Calendar::getDate
• .getButtonState() — SEE BELOW

The return-type for .getButtonState():

{
  [buttonName: string]: {
    text: string
    hint: string
    isDisabled?: boolean
  }
}