Event Calendar - Editing

Configure how events are created and edited.

Event creation

Use the eventCreation prop to customize how newly created events are defined:

Disable event creation

Pass eventCreation={false} to disable the event creation:

<EventCalendar eventCreation={false} />

Custom default duration

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

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

Create event on click

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

<EventCalendar eventCreation={{ interaction: '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 on any event in the demo below to open the dialog. From there you can edit the event details or delete it.

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 determining if an event is read-only 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} />;
}