Skip to content
🚀 Influence MUI's 2026 roadmap! Take our latest Developer Survey
+

Event Calendar - Events

Define events for your Event Calendar.

Event properties

Resource

Use the resource property to link an event to its resource:

const event = {
  // ...other properties
  resource: 'work',
};

Dynamic resource

Use the eventModelStructure property to switch the resource between several fields:

All day

French (Room A)

Science (Room B)

English (Room C)

History (Room A)

French (Room B)

Science (Room C)

English (Room A)

History (Room B)

French (Room C)

Science (Room A)

English (Room B)

History (Room C)

All day

Use the allDay property to define an event as all-day:

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

Event 4

Event 6

Event 3

Event 1

Event 2

Event 5

Event 7

Event 8

Timezone

Use the timezone property to define in which timezone an event's dates are defined:

const event = {
  // ...other properties
  timezone: 'America/New_York',
};

Color

Use the color property to define an event's color:

const event = {
  // ...other properties
  color: 'lime',
};

Here is the list of all the available color palettes:

All day

purple

teal

lime

orange

green

pink

indigo

amber

blue

Class name

Use the className property to apply custom CSS styles to an event:

const event = {
  // ...other properties
  className: 'highlighted-event',
};
All day

Regular Meeting

Important Meeting

Project Review

Team Standup

Urgent Task

Drag interactions

Use the draggable property on the event model to prevent an event from being dragged to another point in time:

const event = {
  // ...other properties
  draggable: false,
};

Use the resizable property on the event model to prevent an event from being resized by dragging its start or end edge:

const event = {
  // ...other properties
  resizable: false,
  resizable: "start" // only the start edge is draggable.
  resizable: "end" // only the end edge is draggable.
};

Read-only

Use the readOnly property to prevent an event from being modified:

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

Recurring events

Use the rrule property to define an event's recurring rule:

const event = {
  // ...other properties
  rrule: 'FREQ=WEEKLY;INTERVAL=2;BYDAY=TH',
};

Store data in custom properties

Use the eventModelStructure prop to define how to read and write properties of the event model when they don't match the model expected by the components:

const eventModelStructure = {
  title: {
    getter: (event) => event.name,
    setter: (event, newValue) => {
      event.name = newValue;
    },
  },
};

function Calendar() {
  return (
    <EventCalendar
      events={[{ name: 'Event 1' /** ... */ }]}
      eventModelStructure={eventModelStructure}
    />
  );
}
All day

Team Retrospective

Daily Standup