Calendar Header

The calendar header provides navigation controls, the view switcher, and search functionality. You can customize its behavior or replace it entirely.

Hiding the Header

If you want to build your own navigation or just don’t need the default header, you can disable it.

const calendar = useCalendarApp({
  views: [createMonthView()],
  useCalendarHeader: false, // Hides the default header
});

Custom Header Component

You can provide a custom component function to render your own header while still having access to the calendar’s state and methods.

const calendar = useCalendarApp({
  views: [createMonthView()],
  useCalendarHeader: props => {
    const { calendar, switcherMode } = props;
    return (
      <div className='custom-header'>
        <button onClick={() => calendar.goToToday()}>Today</button>
        {/* Your custom UI here */}
      </div>
    );
  },
});

Header Props

The custom renderer receives the following props: