Scheduler - Event Calendar

const event = {
  // ...other even properties
  allDay: true,
};

<EventCalendar views={['week', 'month']} />

<EventCalendar defaultView="month" />

import { addDays } from 'date-fns';
import { useEventCalendarView } from '@mui/x-scheduler-headless/use-event-calendar-view';

function CustomView() {
  const adapter = useAdapter();

  useEventCalendarView(() => ({
    siblingVisibleDateGetter: (date, delta) => addDays(date, delta),
  }));
}

const defaultVisibleDate = DateTime.fromISO('2025-11-01');

<EventCalendar defaultVisibleDate={defaultVisibleDate} />;

const defaultPreferences = {
  ampm: false,
  showWeekends: false,
  isSidePanelOpen: false,
}

<EventCalendar defaultPreferences={defaultPreferences} />;

// will hide the menu
preferencesMenuConfig={false}

// will hide the menu item responsible for toggling the weekend visibility
// the other preferences remain visible
preferencesMenuConfig={{ toggleWeekendVisibility: false }}

// will hide the menu items for toggling weekend and week number visibility
preferencesMenuConfig={{ toggleWeekendVisibility: false, toggleWeekNumberVisibility: false }}

<EventCalendar events={[{ id: '1', title: 'Event 1', color: 'pink' }]} />

<EventCalendar resources={[{ id: '1', title: 'Resource 1', eventColor: 'pink' }]} />

<EventCalendar eventColor="pink" />

import { frFR } from '@mui/x-scheduler/translations';

<EventCalendar translations={frFR} />;