View Switcher Modes

The switcherMode option controls how the header view switcher is rendered. The library ships with two modes tailored for different layouts:

• buttons – the default desktop friendly layout with a centered button group.
• select – condenses the switcher into a dropdown for mobile or compact toolbars.

Use the interactive sample below to compare both modes with identical data and configuration.

Quick Start

import {
  useCalendarApp,
  DayFlowCalendar,
  createMonthView,
} from '@dayflow/core';
 
const calendar = useCalendarApp({
  views: [createMonthView()],
  switcherMode: 'select', // default switcherMode: 'buttons'
});
 
<DayFlowCalendar calendar={calendar} />;

Flip switcherMode between 'buttons' and 'select' to preview the alternate experiences instantly.