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

Event Calendar - Resources

Define the properties of your events.

Define resources

Use the resources prop to define the list of resources the events can be associated to and the resource property on the event model to link an event to its resource:

const event = [
  { resource: 'work' /** other properties */ },
  { resource: 'holidays' /** other properties */ },
];

const resources = [
  { name: 'Work', id: 'work' },
  { name: 'Holidays', id: 'holidays' },
];

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

Nested resources

Use the children property to create hierarchical resource structures:

const resources = [
  {
    id: 'academics',
    title: 'Academics',
    children: [
      {
        id: 'stem',
        title: 'STEM',
        children: [
          { id: 'computer-science', title: 'Computer Science' },
          { id: 'mathematics', title: 'Mathematics' },
        ],
      },
    ],
  },
];
All day

Independence Day — Campus Closed

Intro to Algorithms Lecture

Calculus III Lecture

Soccer Practice

Creative Writing Workshop

Data Structures Lab

American History Seminar

Faculty Senate

Statistics Workshop

Volleyball Tournament

Visible resources

Use the defaultVisibleResources prop to initialize the visible resources. A resource is visible if not in the object or if set to true.

All day

Alice's Birthday

Morning Run

Team Meeting

Gym Class

Yoga

1-on-1 with Sarah

Code Review

4th of July BBQ

Resource properties

Color

Use the eventColor property to define a resource's color. Here is the list of all the available color palettes:

All day

purple

teal

lime

orange

green

pink

indigo

amber

blue

Drag interactions

Use the areEventsDraggable property to prevent dragging a resource's events to another point in time:

const resource = {
  // ...other properties
  areEventsDraggable: false,
};

Use the areEventsResizable property to prevent resizing a resource's events by dragging their start or end edge:

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

Read-only

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

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

Store data in custom properties

Use the resourceModelStructure prop to define how to read properties of the resource model when they don't match the model expected by the components:

const resourceModelStructure = {
  title: {
    getter: (resource) => resource.name,
  },
};

function Calendar() {
  return (
    <EventCalendar
      resources={[{ name: 'Resource 1' /** ... */ }]}
      resourceModelStructure={resourceModelStructure}
    />
  );
}
All day

Alice's Birthday

Morning Run

Team Meeting

Gym Class

Yoga

1-on-1 with Sarah

Code Review

4th of July BBQ