---
title: 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:

```jsx
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](Calendar-today)
- `.prev()` -- just like [Calendar::prev](Calendar-prev)
- `.next()` -- just like [Calendar::next](Calendar-next)
- `.prevYear()` -- just like [Calendar::prevYear](Calendar-prevYear)
- `.nextYear()` -- just like [Calendar::nextYear](Calendar-nextYear)
- `.gotoDate()` -- just like [Calendar::gotoDate](Calendar-gotoDate)
- `.incrementDate()` -- just like [Calendar::incrementDate](Calendar-incrementDate)
- `.changeView()` -- just like [Calendar::changeView](Calendar-changeView)
- `.view` -- just like [Calendar::view](Calendar-view)
- `.getDate()` -- just like [Calendar::getDate](Calendar-getDate)
- `.getButtonState()` -- SEE BELOW

The return-type for `.getButtonState()`:

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