Skip to content

🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.

Scheduler - Quickstart

Install the MUI X Scheduler package to start building React calendars and event timelines.

Installation

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

Plan

npm install @mui/x-scheduler

Peer dependencies

Material UI

The Scheduler packages have peer dependencies on @mui/material and @mui/icons-material. If you're not already using them, install them now:

npm install @mui/material @mui/icons-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:

Plan

import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import type { 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: '2024-01-15T10:00:00',
    end: '2024-01-15T11:00:00',
  },
  {
    id: 2,
    title: 'Project Review',
    start: '2024-01-16T14:00:00',
    end: '2024-01-16T15:30:00',
  },
  {
    id: 3,
    title: 'Client Call',
    start: '2024-01-17T09:00:00',
    end: '2024-01-17T10:00:00',
  },
];

Render the component

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

January 2024

Team Meeting

10:00 AM - 11:00 AM

Project Review

2:00 PM - 3:30 PM

Client Call

9:00 AM - 10:00 AM

Edit code

import * as React from 'react';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { SchedulerEvent } from '@mui/x-scheduler/models';

const initialEvents: SchedulerEvent[] = [
  {
    id: 1,
    title: 'Team Meeting',
    start: '2024-01-15T10:00:00',
    end: '2024-01-15T11:00:00',
  },
  {
    id: 2,
    title: 'Project Review',
    start: '2024-01-16T14:00:00',
    end: '2024-01-16T15:30:00',
  },
  {
    id: 3,
    title: 'Client Call',
    start: '2024-01-17T09:00:00',
    end: '2024-01-17T10:00:00',
  },
];

export default function RenderEventCalendar() {
  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);

  return (
    <div style={{ height: 600, width: '100%' }}>
      <EventCalendar
        events={events}
        onEventsChange={setEvents}
        defaultVisibleDate={new Date(2024, 0, 15)}
      />
    </div>
  );
}

import * as React from 'react';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { SchedulerEvent } from '@mui/x-scheduler/models';

const initialEvents: SchedulerEvent[] = [
  {
    id: 1,
    title: 'Team Meeting',
    start: '2024-01-15T10:00:00',
    end: '2024-01-15T11:00:00',
  },
  {
    id: 2,
    title: 'Project Review',
    start: '2024-01-16T14:00:00',
    end: '2024-01-16T15:30:00',
  },
  {
    id: 3,
    title: 'Client Call',
    start: '2024-01-17T09:00:00',
    end: '2024-01-17T10:00:00',
  },
];

export default function RenderEventCalendar() {
  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);

  return (
    <div style={{ height: 600, width: '100%' }}>
      <EventCalendar
        events={events}
        onEventsChange={setEvents}
        defaultVisibleDate={new Date(2024, 0, 15)}
      />
    </div>
  );
}

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 type {
  SchedulerEvent,
  SchedulerResource,
} from '@mui/x-scheduler-premium/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 two events with id, title, start, end, and resource properties:

const events: SchedulerEvent[] = [
  {
    id: 1,
    title: 'Project Kickoff',
    start: '2024-01-15T09:00:00',
    end: '2024-01-15T17:00:00',
    resource: 'team-a',
  },
  {
    id: 2,
    title: 'Development Phase',
    start: '2024-01-16T09:00:00',
    end: '2024-01-19T17:00:00',
    resource: 'team-b',
  },
];

Each event passed to the Event Timeline component needs a resource that represents the entities (people, rooms, equipment) it's 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 Event Timeline as shown below:

Resource title

Edit code

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

const initialEvents: SchedulerEvent[] = [
  {
    id: 1,
    title: 'Project Kickoff',
    start: '2024-01-15T09:00:00',
    end: '2024-01-15T17:00:00',
    resource: 'team-a',
  },
  {
    id: 2,
    title: 'Development Phase',
    start: '2024-01-16T09:00:00',
    end: '2024-01-19T17:00:00',
    resource: 'team-b',
  },
  {
    id: 3,
    title: 'Testing',
    start: '2024-01-17T09:00:00',
    end: '2024-01-18T17:00:00',
    resource: 'team-a',
  },
];

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

export default function RenderEventTimelinePremium() {
  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <EventTimelinePremium
        events={events}
        onEventsChange={setEvents}
        resources={resources}
        defaultVisibleDate={new Date(2024, 0, 15)}
      />
    </div>
  );
}

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

const initialEvents: SchedulerEvent[] = [
  {
    id: 1,
    title: 'Project Kickoff',
    start: '2024-01-15T09:00:00',
    end: '2024-01-15T17:00:00',
    resource: 'team-a',
  },
  {
    id: 2,
    title: 'Development Phase',
    start: '2024-01-16T09:00:00',
    end: '2024-01-19T17:00:00',
    resource: 'team-b',
  },
  {
    id: 3,
    title: 'Testing',
    start: '2024-01-17T09:00:00',
    end: '2024-01-18T17:00:00',
    resource: 'team-a',
  },
];

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

export default function RenderEventTimelinePremium() {
  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <EventTimelinePremium
        events={events}
        onEventsChange={setEvents}
        resources={resources}
        defaultVisibleDate={new Date(2024, 0, 15)}
      />
    </div>
  );
}

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.

Plan

import type {} from '@mui/x-scheduler/theme-augmentation';

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

API

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.