Scheduler - Event Calendar

A collection of React UI components to schedule your events.

Full example

All day events

You can use the allDay property on your event model to define it as all-day:

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

Drag interactions

Drag and resize events

You can enable the dragging and resizing of events within the Event Calendar using the areEventsDraggable and areEventsResizable props. When areEventsDraggable is true, the events can be dragged to another point in time. When areEventsResizable is true, the event extremities can be dragged to change its duration.

External drag and drop

You can enable the dragging from and to the outside of the Event Calendar using the canDragEventsFromTheOutside and canDropEventsToTheOutside props. When canDragEventsFromTheOutside is true, the events created with <StandaloneEvent /> can be dropped inside the Event Calendar. When canDropEventsToTheOutside is true, the events from within the Event Calendar can be dropped outside of it.

Customization

Available views

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

Default view

<EventCalendar defaultView="month" />

Add custom view

In your custom view, you have to use the useEventCalendarView() hook to register your view in the parent component.

import { DateTime } from 'luxon';
import { useEventCalendarView } from '@mui/x-scheduler-headless/use-event-calendar-view';

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

  useEventCalendarView(() => ({
    siblingVisibleDateGetter: (date, delta) => date.plus({ days: delta }),
  }));
}

Default visible date

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

<EventCalendar defaultVisibleDate={defaultVisibleDate} />;

Color palettes

The Event Calendar supports several color palettes.

Event colors can be set at two levels. The effective color resolves in the following order:

1. The eventColor assigned to the event's resource

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

2. The eventColor assigned to the Event Calendar

<EventCalendar eventColor="pink" />

3. The default color palette, "jade"

The following demo shows one event for each palette:

Translations

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

<EventCalendar translations={frFR} />;

Preferences menu

You can customize the preferences menu using the preferencesMenuConfig prop:

Available properties:

• toggleWeekendVisibility: show/hide the menu item that toggles weekend visibility.
• toggleWeekNumberVisibility: show/hide the menu item that toggles week number visibility.
• toggleAmpm: show/hide the menu item that toggles 12/24‑hour time format.
• toggleEmptyDaysInAgenda: show/hide the menu item that toggles the visibility of days with no events in the Agenda view.

// 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 }}