Event Calendar - Editing

Configure event creation, editing interactions, and read-only behavior.

Event creation

Use the eventCreation prop to customize event creation behavior:

Disable event creation

Pass eventCreation={false} to disable event creation:

<EventCalendar eventCreation={false} />

Custom default duration

Pass a custom value to eventCreation.duration to change the default duration of newly created events:

<EventCalendar eventCreation={{ duration: 60 }} />

Create event on double-click

Set eventCreation.interaction to "double-click" to open the creation form when double-clicking a cell instead of clicking:

<EventCalendar eventCreation={{ interaction: 'double-click' }} />

Event dialog

Clicking an event or creating a new one opens the event dialog.

The dialog has two tabs:

• General: title, start/end date and time, all-day toggle, resource and color selectors, and description.
• Recurrence: frequency, interval, days of the week, and end condition. Only available with the Premium package (@mui/x-scheduler-premium).

Click any event in the demo below to open the dialog. From there you can edit the event details or delete it.

Replace the dialog with your own UI

Use the onEventEditingStart callback to intercept editing right before the built-in dialog opens. It fires for every entry point (pointer, keyboard, touch, and event creation). eventDetails.reason is "creation" when the user is creating a new event, "view" when the occurrence is read-only (through the event, its resource, or the readOnly prop) and the dialog opens in view-only mode, and "edit" otherwise. eventDetails.occurrence is typed by that reason, so narrowing on it gives you the persisted occurrence fields on "edit" and "view" and the draft on "creation". eventDetails.anchor is an element that stays in the DOM after a cancellation, ready to anchor your own popover to; eventDetails.trigger identifies the exact activated element, but some flows unmount it right after a canceled activation (the armed toolbar's Edit button, an item inside the "+N more" popover, a creation placeholder), so don't position against it. Call eventDetails.cancel() to keep the built-in dialog closed and open your own editing UI instead:

<EventCalendar
  onEventEditingStart={(occurrence, eventDetails) => {
    if (eventDetails.reason === 'view') {
      // Read-only activation: keep the built-in view-only dialog.
      // Cancel here only if you render your own read-only UI instead.
      return;
    }
    eventDetails.cancel();
    if (eventDetails.reason === 'creation') {
      // Creation drafts have a synthetic `id` — use the proposed dates instead.
      openYourCreationUI(eventDetails.occurrence.displayTimezone);
    } else {
      openYourEditingUI(eventDetails.occurrence.id);
    }
  }}
/>

In the demo below, both clicking an event and clicking an empty cell open a custom dialog instead of the built-in one:

Read-only

Use the readOnly prop to disable all editing interactions (event creation, drag-and-drop, resizing, and popover editing):

<EventCalendar readOnly />

Only set on some events

Per event

Use the readOnly property on the event model to mark an event as read-only:

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

Per resource

Use the areEventsReadOnly property on the resource model to mark all events of a resource as read-only:

const resource = {
  // ...other properties
  areEventsReadOnly: true,
};

Priority order

The priority order for read-only behavior is:

1. The readOnly property assigned to the event

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

2. The areEventsReadOnly property assigned to the event's resource

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

3. The readOnly prop assigned to the Event Calendar

<EventCalendar readOnly />

For example, with the following code, all work events are read-only except "event-3":

function App() {
  const resources = [
    { id: 'work', title: 'Work', areEventsReadOnly: true },
    { id: 'personal', title: 'Personal' },
  ];

  const events = [
    { id: 'event-1', resource: 'work' },
    { id: 'event-2', resource: 'personal' },
    { id: 'event-3', resource: 'work', readOnly: false },
  ];

  return <EventCalendar resources={resources} events={events} />;
}

Copy and paste events 🚧

With this feature, users would be able to copy and paste events within the calendar.

Undo and redo 🚧

With this feature, users would be able to undo and redo changes made to events.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <EventCalendar />
• <EventCalendarPremium />