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

Scheduler - Quickstart

Install the MUI X Scheduler package and start building your React scheduling components.

Installation

Install the Scheduler package that best suits your needs — Community, or Premium:

npm install @mui/x-scheduler

Peer dependencies

Material UI

The Scheduler packages have a peer dependency on @mui/material. If you're not already using it, install it now:

npm install @mui/material @emotion/react @emotion/styled

React

react and react-dom are also peer dependencies:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

Rendering an Event Calendar

Import the component

Import the Event Calendar component that corresponds to the version you're using, along with the SchedulerEvent type:

import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { EventCalendarPremium } from '@mui/x-scheduler/event-calendar-premium';
import { SchedulerEvent } from '@mui/x-scheduler/models';

Define events

Each event in the Event Calendar is an object with properties that define when it occurs and what it displays.

The code snippet below defines three events with id, title, start, and end properties:

const events: SchedulerEvent[] = [
  {
    id: 1,
    title: 'Team Meeting',
    start: new Date(2024, 0, 15, 10, 0),
    end: new Date(2024, 0, 15, 11, 0),
  },
  {
    id: 2,
    title: 'Project Review',
    start: new Date(2024, 0, 16, 14, 0),
    end: new Date(2024, 0, 16, 15, 30),
  },
  {
    id: 3,
    title: 'Client Call',
    start: new Date(2024, 0, 17, 9, 0),
    end: new Date(2024, 0, 17, 10, 0),
  },
];

Render the component

With the component imported, and events defined, you're now ready to render the render the Event Timeline as shown below:

January 2024

All day

Team Meeting

Project Review

Client Call

Press Enter to start editing

Rendering an Event Timeline

Import the component

Import the <EventTimelinePremium /> component along with the SchedulerEvent and SchedulerResource types:

import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { SchedulerEvent, SchedulerResource } from '@mui/x-scheduler/models';

Define events and resources

Each event in the Event Timeline is an object with properties that define when it occurs and what it displays.

The code snippet below defines three events with id, title, start, and end properties:

const events: SchedulerEvent[] = [
  {
    id: 1,
    title: 'Project Kickoff',
    start: new Date(2024, 0, 15, 9, 0),
    end: new Date(2024, 0, 15, 17, 0),
    resource: 'team-a',
  },
  {
    id: 2,
    title: 'Development Phase',
    start: new Date(2024, 0, 16, 9, 0),
    end: new Date(2024, 0, 19, 17, 0),
    resource: 'team-b',
  },
];

The event passed to the Event Timeline component need to have a resource that represents the entities (people, rooms, equipment) that it is are assigned to:

const resources: SchedulerResource[] = [
  { id: 'team-a', title: 'Team A' },
  { id: 'team-b', title: 'Team B' },
];

Render the component

With the component imported, and events and resources defined, you're now ready to render the render the Event Timeline as shown below:

Resource title
Press Enter to start editing

TypeScript

Theme augmentation

To benefit from CSS overrides and default prop customization with the theme, TypeScript users must import the following types. These types use module augmentation to extend the default theme structure.

// Premium users: add `-premium` suffix to package name
import type {} from '@mui/x-scheduler/themeAugmentation';

const theme = createTheme({
  components: {
    MuiEventCalendar: {
      styleOverrides: {
        root: {
          backgroundColor: 'lightblue',
        },
      },
    },
  },
});

API

TODO: Uncomment once available

Using this documentation

Feature availability

Throughout the documentation, Premium-only features are denoted with the icon.

All documentation for Community components and features also applies to their Premium counterparts.