MUI X Scheduler

https://mui.com/x/react-scheduler/
Admin
MUI X Scheduler is a collection of React UI components for scheduling events with flexible views,...
Tokens:37,051
Snippets:318
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Render the Event Calendar

Source: https://mui.com/x/react-scheduler/quickstart

Full example showing how to initialize state and render the EventCalendar component.

```tsx
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>
  );
}
```

--------------------------------

### Implement full EventTimelinePremium with preferences

Source: https://mui.com/x/react-scheduler/event-timeline/preferences

A complete example showing the integration of EventTimelinePremium with custom preferences and event state management.

```tsx
import * as React from 'react';
import { EventCalendarPreferences, SchedulerEvent } from '@mui/x-scheduler/models';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { initialEvents, resources } from '../../datasets/company-roadmap';

const defaultPreferences: Partial<EventCalendarPreferences> = {
  ampm: false,
  weekStartsOn: 1,
};

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

  return (
    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
      <EventTimelinePremium
        events={events}
        resources={resources}
        defaultPreferences={defaultPreferences}
        onEventsChange={setEvents}
        defaultPreset="dayAndWeek"
      />
    </div>
  );
}
```

--------------------------------

### Render EventTimelinePremium component

Source: https://mui.com/x/react-scheduler/quickstart

Full implementation example showing imports, data definition, and component usage with state management.

```tsx
import * as React from 'react';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { SchedulerEvent, SchedulerResource } from '@mui/x-scheduler/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>
  );
}
```

--------------------------------

### Install Material UI dependencies

Source: https://mui.com/x/react-scheduler/quickstart

Install the required Material UI packages using your preferred package manager.

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

```bash
pnpm add @mui/material @emotion/react @emotion/styled
```

```bash
yarn add @mui/material @emotion/react @emotion/styled
```

--------------------------------

### Full implementation of localized calendar

Source: https://mui.com/x/react-scheduler/event-calendar/localization

A complete example showing how to integrate theme-based localization with component state.

```tsx
import * as React from 'react';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { fr } from 'date-fns/locale/fr';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { frFR, createDateLocaleTheme } from '@mui/x-scheduler/locales';
import {
  initialEvents,
  defaultVisibleDate,
  resources,
} from '../../datasets/personal-agenda';

export default function DateLocaleCalendar() {
  const existingTheme = useTheme();
  const theme = React.useMemo(
    () => createTheme(existingTheme, frFR, createDateLocaleTheme(fr)),
    [existingTheme],
  );
  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <ThemeProvider theme={theme}>
        <EventCalendar
          events={events}
          resources={resources}
          defaultVisibleDate={defaultVisibleDate}
          onEventsChange={setEvents}
          defaultPreferences={{ isSidePanelOpen: false }}
        />
      </ThemeProvider>
    </div>
  );
}
```

--------------------------------

### Full implementation of localized timeline

Source: https://mui.com/x/react-scheduler/event-timeline/localization

A complete example showing the use of useMemo to create a localized theme and passing it to the EventTimelinePremium component.

```tsx
import * as React from 'react';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { frFR } from '@mui/x-scheduler/locales';
import {
  initialEvents,
  defaultVisibleDate,
  resources,
} from '../../datasets/company-roadmap';

export default function LocaleTextTimeline() {
  const existingTheme = useTheme();
  const theme = React.useMemo(
    () => createTheme(existingTheme, frFR),
    [existingTheme],
  );
  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);

  return (
    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
      <ThemeProvider theme={theme}>
        <EventTimelinePremium
          events={events}
          resources={resources}
          defaultVisibleDate={defaultVisibleDate}
          onEventsChange={setEvents}
          defaultPreset="monthAndYear"
        />
      </ThemeProvider>
    </div>
  );
}
```

--------------------------------

### Full implementation with theme localization

Source: https://mui.com/x/react-scheduler/event-calendar/localization

A complete example demonstrating how to integrate localization within a functional component using useMemo for theme creation.

```tsx
import * as React from 'react';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { frFR } from '@mui/x-scheduler/locales';
import {
  initialEvents,
  defaultVisibleDate,
  resources,
} from '../../datasets/personal-agenda';

export default function LocaleTextCalendar() {
  const existingTheme = useTheme();
  const theme = React.useMemo(
    () => createTheme(existingTheme, frFR),
    [existingTheme],
  );
  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <ThemeProvider theme={theme}>
        <EventCalendar
          events={events}
          resources={resources}
          defaultVisibleDate={defaultVisibleDate}
          onEventsChange={setEvents}
          defaultPreferences={{ isSidePanelOpen: false }}
        />
      </ThemeProvider>
    </div>
  );
}
```

--------------------------------

### Implement color palettes in EventTimelinePremium

Source: https://mui.com/x/react-scheduler/event-timeline/events

Example showing the integration of color palettes within the EventTimelinePremium component.

```tsx
import * as React from 'react';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import {
  initialEventsWithoutResources,
  defaultVisibleDate,
  resourcesWithoutColors,
} from '../../datasets/timeline-palette-demo';

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

  return (
    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
      <EventTimelinePremium
        events={events}
        resources={resourcesWithoutColors}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        defaultPreset="dayAndMonth"
      />
    </div>
  );
}
```

--------------------------------

### Implement external navigation controls

Source: https://mui.com/x/react-scheduler/event-timeline/navigation

A complete example showing how to integrate navigation buttons and a preset selector with the Event Timeline component.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import Button from '@mui/material/Button';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { useEventTimelinePremiumApiRef } from '@mui/x-scheduler-premium/use-event-timeline-premium-api-ref';
import { EventTimelinePremiumPreset } from '@mui/x-scheduler-internals-premium/models';
import {
  initialEvents,
  resources as allResources,
  defaultVisibleDate,
} from '../../datasets/company-roadmap';

const resources = allResources.slice(0, 5);

const presetOptions: { value: EventTimelinePremiumPreset; label: string }[] = [
  { value: 'dayAndHour', label: 'Time' },
  { value: 'dayAndMonth', label: 'Days' },
  { value: 'dayAndWeek', label: 'Weeks' },
  { value: 'monthAndYear', label: 'Months' },
  { value: 'year', label: 'Years' },
];

export default function ExternalNavigation() {
  const [events, setEvents] = React.useState(initialEvents);
  const [preset, setPreset] =
    React.useState<EventTimelinePremiumPreset>('monthAndYear');
  const [visibleDate, setVisibleDate] = React.useState<Date>(defaultVisibleDate);
  const apiRef = useEventTimelinePremiumApiRef();

  const handlePresetChange = (event: SelectChangeEvent) => {
    setPreset(event.target.value as EventTimelinePremiumPreset);
  };

  return (
    <Stack spacing={2} sx={{ width: '100%' }}>
      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
        <IconButton
          onClick={(event) => apiRef.current?.goToPreviousVisibleDate(event)}
        >
          <ChevronLeftIcon />
        </IconButton>
        <Button
          variant="outlined"
          onClick={(event) =>
            apiRef.current?.setVisibleDate({ visibleDate: new Date(), event })
          }
        >
          Today
        </Button>
        <IconButton onClick={(event) => apiRef.current?.goToNextVisibleDate(event)}>
          <ChevronRightIcon />
        </IconButton>
        <Select value={preset} onChange={handlePresetChange} size="small">
          {presetOptions.map(({ value, label }) => (
            <MenuItem key={value} value={value}>
              {label}
            </MenuItem>
          ))}
        </Select>
      </Stack>
      <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
        <EventTimelinePremium
          apiRef={apiRef}
          events={events}
          resources={resources}
          preset={preset}
          onPresetChange={setPreset}
          visibleDate={visibleDate}
          onVisibleDateChange={setVisibleDate}
          onEventsChange={setEvents}
        />
      </div>
    </Stack>
  );
}
```

--------------------------------

### Implement all-day events in EventTimelinePremium

Source: https://mui.com/x/react-scheduler/event-timeline/events

Full component example demonstrating the use of allDay events within the EventTimelinePremium component.

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

const defaultVisibleDate = new Date('2025-07-01T00:00:00');

const resources: SchedulerResource[] = [
  { id: 'company', title: 'Company informations' },
  { id: 'meetings', title: 'Meetings' },
];

const initialEvents: SchedulerEvent[] = [
  {
    id: '1',
    start: '2025-07-01T00:00:00',
    end: '2025-07-01T00:00:00',
    title: 'Release day',
    resource: 'company',
    allDay: true,
  },
  {
    id: '2',
    start: '2025-07-01T08:00:00',
    end: '2025-07-01T09:30:00',
    title: 'Tag up',
    resource: 'meetings',
  },
  {
    id: '32',
    start: '2025-07-01T15:00:00',
    end: '2025-07-01T16:30:00',
    title: 'Retrospective',
    resource: 'meetings',
  },
];

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

  return (
    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
      <EventTimelinePremium
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        defaultPreset="dayAndHour"
      />
    </div>
  );
}
```

--------------------------------

### Implement full lazy loading with API control

Source: https://mui.com/x/react-scheduler/event-timeline/lazy-loading

A complete example showing how to integrate the EventTimelinePremium with external state for presets, visible dates, and API navigation controls.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { useEventTimelinePremiumApiRef } from '@mui/x-scheduler-premium/use-event-timeline-premium-api-ref';
import { EventTimelinePremiumPreset } from '@mui/x-scheduler-internals-premium/models';
import {
  resources as allResources,
  defaultVisibleDate,
  getEvents,
  persistEvents,
} from './fakeServer';

const resources = allResources.slice(0, 5);

const presetOptions: { value: EventTimelinePremiumPreset; label: string }[] = [
  { value: 'dayAndMonth', label: 'Days' },
  { value: 'dayAndWeek', label: 'Weeks' },
];

const presets = presetOptions.map((option) => option.value);

export default function BasicDataSource() {
  const [preset, setPreset] =
    React.useState<EventTimelinePremiumPreset>('dayAndMonth');
  const [visibleDate, setVisibleDate] = React.useState<Date>(defaultVisibleDate);
  const apiRef = useEventTimelinePremiumApiRef();

  const handlePresetChange = (event: SelectChangeEvent) => {
    setPreset(event.target.value as EventTimelinePremiumPreset);
  };

  return (
    <Stack spacing={2} sx={{ width: '100%' }}>
      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
        <IconButton
          onClick={(event) => apiRef.current?.goToPreviousVisibleDate(event)}
        >
          <ChevronLeftIcon />
        </IconButton>
        <IconButton onClick={(event) => apiRef.current?.goToNextVisibleDate(event)}>
          <ChevronRightIcon />
        </IconButton>
        <Select value={preset} onChange={handlePresetChange} size="small">
          {presetOptions.map(({ value, label }) => (
            <MenuItem key={value} value={value}>
              {label}
            </MenuItem>
          ))}
        </Select>
      </Stack>
      <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
        <EventTimelinePremium
          apiRef={apiRef}
          dataSource={{ getEvents, persistEvents }}
          resources={resources}
          resourceColumnLabel="Theater"
          presets={presets}
          preset={preset}
          onPresetChange={setPreset}
          visibleDate={visibleDate}
          onVisibleDateChange={setVisibleDate}
        />
      </div>
    </Stack>
  );
}
```

--------------------------------

### Implement full custom resource model

Source: https://mui.com/x/react-scheduler/event-calendar/resources

Complete example showing the integration of a typed custom resource model with the EventCalendar component.

```tsx
import * as React from 'react';
import {
  SchedulerEventColor,
  SchedulerResourceModelStructure,
} from '@mui/x-scheduler/models';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { initialEvents, defaultVisibleDate } from '../../datasets/personal-agenda';

interface CustomResource {
  id: string;
  name: string;
  eventColor: SchedulerEventColor;
}

const resources: CustomResource[] = [
  { name: 'Work', id: 'work', eventColor: 'purple' },
  { name: 'Health', id: 'health', eventColor: 'teal' },
  { name: 'Social', id: 'social', eventColor: 'orange' },
  { name: 'Personal', id: 'personal', eventColor: 'lime' },
  { name: 'Travel', id: 'travel', eventColor: 'blue' },
  { name: 'Family', id: 'family', eventColor: 'pink' },
];

const resourceModelStructure: SchedulerResourceModelStructure<CustomResource> = {
  title: {
    getter: (event) => event.name,
  },
};

export default function TitleProperty() {
  const [events, setEvents] = React.useState(initialEvents);

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <EventCalendar
        events={events}
        onEventsChange={setEvents}
        defaultVisibleDate={defaultVisibleDate}
        resourceModelStructure={resourceModelStructure}
        resources={resources}
        defaultPreferences={{ isSidePanelOpen: false }}
      />
    </div>
  );
}
```

--------------------------------

### Implement full custom event model with state management

Source: https://mui.com/x/react-scheduler/event-timeline/events

Complete example demonstrating a typed custom event interface and integration with EventTimelinePremium using state.

```tsx
import * as React from 'react';
import {
  SchedulerEventModelStructure,
  SchedulerResource,
} from '@mui/x-scheduler/models';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { defaultVisibleDate } from '../../datasets/company-roadmap';

interface CustomEvent {
  id: string;
  start: string;
  end: string;
  name: string;
  resource: string;
  allDay?: boolean;
}

const initialEvents: CustomEvent[] = [
  {
    id: '1',
    start: '2025-07-01T00:00:00',
    end: '2025-07-01T00:00:00',
    allDay: true,
    name: 'Booking Bob',
    resource: 'appartment-a',
  },
  {
    id: '2',
    start: '2025-07-02T00:00:00',
    end: '2025-07-03T00:00:00',
    allDay: true,
    name: 'Booking Alice',
    resource: 'appartment-a',
  },
  {
    id: '3',
    start: '2025-07-02T00:00:00',
    end: '2025-07-05T00:00:00',
    allDay: true,
    name: 'Booking Carol',
    resource: 'appartment-b',
  },
];

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

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

export default function TitleProperty() {
  const [events, setEvents] = React.useState(initialEvents);

  return (
    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
      <EventTimelinePremium
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        eventModelStructure={eventModelStructure}
        defaultPreset="dayAndMonth"
      />
    </div>
  );
}
```

--------------------------------

### Define event color hierarchy

Source: https://mui.com/x/react-scheduler/event-calendar/resources

Examples showing how to set event colors at the event, resource, or component level.

```tsx
<EventCalendar events={[{ id: '1', title: 'Event 1', color: 'pink' }]} />
```

```tsx
<EventCalendar resources={[{ id: '1', title: 'Resource 1', eventColor: 'pink' }]} />
```

```tsx
<EventCalendar eventColor="pink" />
```

--------------------------------

### Implement EventCalendar with wall-time events

Source: https://mui.com/x/react-scheduler/timezone

Example of configuring the EventCalendar component to display events in a specific timezone.

```tsx
import * as React from 'react';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import {
  defaultVisibleDate,
  initialEvents,
  resources,
} from '../datasets/timezone-wall-time-events';

export default function TimezoneDatasetWallTime() {
  const [events, setEvents] = React.useState(initialEvents);

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <EventCalendar
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        defaultPreferences={{ isSidePanelOpen: false }}
        displayTimezone="Europe/Paris"
      />
    </div>
  );
}
```

--------------------------------

### Initialize default preferences

Source: https://mui.com/x/react-scheduler/event-timeline/preferences

Use the defaultPreferences prop to set initial configuration values like ampm format.

```tsx
const defaultPreferences = {
  ampm: false,
}

<EventTimelinePremium defaultPreferences={defaultPreferences} />;
```

--------------------------------

### Enable partial event resizing

Source: https://mui.com/x/react-scheduler/event-timeline/drag-interactions

Set areEventsResizable to 'start' or 'end' to restrict resizing to a specific edge.

```tsx
<EventTimelinePremium areEventsResizable="end" />
```

--------------------------------

### Implement Day and Week Preset

Source: https://mui.com/x/react-scheduler/event-timeline/presets

Configures the timeline with weekly granularity for project planning by setting the defaultPreset and presets props to 'dayAndWeek'.

```tsx
import * as React from 'react';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import {
  initialEvents,
  resources,
  defaultVisibleDate,
} from '../../datasets/company-roadmap';

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

  return (
    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
      <EventTimelinePremium
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        defaultPreset="dayAndWeek"
        presets={['dayAndWeek']}
      />
    </div>
  );
}
```

--------------------------------

### Implement a responsive typography demo

Source: https://mui.com/x/react-scheduler/event-calendar/responsiveness

Demonstrates the StandaloneWeekView component adapting to different container widths using a toggleable max-width wrapper.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { StandaloneWeekView } from '@mui/x-scheduler/week-view';
import {
  initialEvents,
  defaultVisibleDate,
  resources,
} from '../../datasets/personal-agenda';

type Size = 'sm' | 'md' | 'lg';

const MAX_WIDTHS: Record<Size, number> = {
  sm: 480,
  md: 720,
  lg: 1000,
};

export default function ResponsiveTypographyDemo() {
  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
  const [size, setSize] = React.useState<Size>('md');

  return (
    <Stack spacing={2} sx={{ alignItems: 'flex-start', width: '100%' }}>
      <ToggleButtonGroup
        value={size}
        exclusive
        size="small"
        onChange={(_, value: Size | null) => {
          if (value !== null) {
            setSize(value);
          }
        }}
      >
        <ToggleButton value="sm">sm (480px)</ToggleButton>
        <ToggleButton value="md">md (720px)</ToggleButton>
        <ToggleButton value="lg">lg (1000px)</ToggleButton>
      </ToggleButtonGroup>
      <div
        style={{
          height: '500px',
          width: '100%',
          maxWidth: MAX_WIDTHS[size],
        }}
      >
        <StandaloneWeekView
          events={events}
          resources={resources}
          defaultVisibleDate={defaultVisibleDate}
          onEventsChange={setEvents}
        />
      </div>
    </Stack>
  );
}
```

--------------------------------

### Import EventTimelinePremium components

Source: https://mui.com/x/react-scheduler/quickstart

Import the component and required models from the MUI X Scheduler packages.

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

--------------------------------

### Specify event timezone

Source: https://mui.com/x/react-scheduler/event-calendar/events

Use the timezone property to define the specific timezone for an event's start and end dates.

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

--------------------------------

### Define basic resources

Source: https://mui.com/x/react-scheduler/event-calendar/resources

Use the resources prop to define available resources and link events to them via the resource property.

```tsx
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} />;
```

--------------------------------

### Define Scheduler events

Source: https://mui.com/x/react-scheduler/quickstart

Create an array of event objects with required properties like id, title, start, end, and resource.

```ts
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',
  },
];
```

--------------------------------

### Configure Yearly Frequency

Source: https://mui.com/x/react-scheduler/recurring-events

Define yearly recurrence patterns using the FREQ=YEARLY rule, which defaults to the event's start date.

```ts
// Every year on the event's start date (same month and day)
rrule: 'FREQ=YEARLY';

// Every two years on the event's start date (same month and day)
rrule: 'FREQ=YEARLY;INTERVAL=2';
```

--------------------------------

### Implement Month and Year Preset

Source: https://mui.com/x/react-scheduler/event-timeline/presets

Configures the timeline with monthly granularity for long-term roadmaps by setting the defaultPreset and presets props to 'monthAndYear'.

```tsx
import * as React from 'react';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import {
  initialEvents,
  resources,
  defaultVisibleDate,
} from '../../datasets/broadway';

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

  return (
    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
      <EventTimelinePremium
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        defaultPreset="monthAndYear"
        presets={['monthAndYear']}
      />
    </div>
  );
}
```

--------------------------------

### Configure priority order for interactions

Source: https://mui.com/x/react-scheduler/event-timeline/drag-interactions

Demonstrates the hierarchy of settings from event-level, to resource-level, to component-level props.

```tsx
<EventTimelinePremium
  events={[{ id: '1', title: 'Event 1', draggable: false, resizable: false }]}
/>
```

```tsx
<EventTimelinePremium
  resources={[
    {
      id: '1',
      title: 'Resource 1',
      areEventsDraggable: false,
      areEventsResizable: false,
    },
  ]}
/>
```

```tsx
<EventTimelinePremium areEventsDraggable={false} areEventsResizable={false} />
```

```tsx
function App() {
  const resources = [
    { id: 'work', title: 'Work', areEventsDraggable: false },
    { id: 'personal', title: 'Personal' },
  ];

  const events = [
    { id: 'event-1', resource: 'work' },
    { id: 'event-2', resource: 'personal' },
    { id: 'event-3', resource: 'work', draggable: true },
  ];

  return <EventTimelinePremium resources={resources} events={events} />;
}
```

--------------------------------

### Initialize default preferences

Source: https://mui.com/x/react-scheduler/event-calendar/preferences

Use the defaultPreferences prop to set initial values for calendar settings like time format and panel state.

```tsx
const defaultPreferences = {
  ampm: false,
  showWeekends: false,
  isSidePanelOpen: false,
}

<EventCalendar defaultPreferences={defaultPreferences} />;
```

```tsx
import * as React from 'react';
import { EventCalendarPreferences, SchedulerEvent } from '@mui/x-scheduler/models';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { initialEvents, resources } from '../../datasets/personal-agenda';

const defaultPreferences: Partial<EventCalendarPreferences> = {
  ampm: false,
  showWeekends: false,
  isSidePanelOpen: false,
};

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

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <EventCalendar
        events={events}
        resources={resources}
        defaultPreferences={defaultPreferences}
        onEventsChange={setEvents}
      />
    </div>
  );
}
```

--------------------------------

### Initialize imperative API with apiRef

Source: https://mui.com/x/react-scheduler/event-calendar/navigation

Initialize the apiRef object using the appropriate hook for either the Community or Premium package.

```tsx
// Community package
const apiRef = useEventCalendarApiRef();

return <EventCalendar apiRef={apiRef} events={EVENTS} />;

// Premium package
const apiRef = useEventCalendarPremiumApiRef();

return <EventCalendarPremium apiRef={apiRef} events={EVENTS} />;
```

--------------------------------

### Implement Basic Day View

Source: https://mui.com/x/react-scheduler/event-calendar/views

Displays a daily calendar view for event management.

```tsx
import * as React from 'react';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { StandaloneDayView } from '@mui/x-scheduler/day-view';
import {
  initialEvents,
  defaultVisibleDate,
  resources,
} from '../../datasets/personal-agenda';

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

  return (
    <div style={{ height: '500px', width: '100%' }}>
      <StandaloneDayView
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
      />
    </div>
  );
}
```

--------------------------------

### Initialize visible resources

Source: https://mui.com/x/react-scheduler/event-calendar/resources

Use the defaultVisibleResources prop to set the initial visibility state of resources. Resources are visible by default unless explicitly set to false.

```tsx
import * as React from 'react';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import {
  initialEvents,
  resources,
  defaultVisibleDate,
} from '../../datasets/personal-agenda';

export default function DefaultVisibleResources() {
  const [events, setEvents] = React.useState(initialEvents);

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <EventCalendar
        events={events}
        onEventsChange={setEvents}
        defaultVisibleDate={defaultVisibleDate}
        resources={resources}
        defaultVisibleResources={{
          holidays: false,
          medical: false,
        }}
      />
    </div>
  );
}
```

--------------------------------

### Implementing the Event Calendar with Editing Dialog

Source: https://mui.com/x/react-scheduler/event-calendar/editing

Demonstrates the usage of EventCalendarPremium to enable event editing and recurrence features. Requires the @mui/x-scheduler-premium package.

```tsx
import * as React from 'react';
import { SchedulerEvent, SchedulerResource } from '@mui/x-scheduler/models';
import { EventCalendarPremium } from '@mui/x-scheduler-premium/event-calendar-premium';

const defaultVisibleDate = new Date('2025-07-01T00:00:00');

const initialEvents: SchedulerEvent[] = [
  {
    id: 'team-sync',
    title: 'Team Sync',
    start: '2025-07-01T09:00:00',
    end: '2025-07-01T10:00:00',
    resource: 'work',
    rrule: { freq: 'WEEKLY', interval: 1, byDay: ['TU', 'TH'] },
  },
  {
    id: 'lunch',
    title: 'Lunch with Sarah',
    start: '2025-07-02T12:00:00',
    end: '2025-07-02T13:00:00',
    resource: 'personal',
  },
  {
    id: 'birthday',
    title: "Alice's Birthday",
    start: '2025-07-03T00:00:00',
    end: '2025-07-04T00:00:00',
    resource: 'personal',
    allDay: true,
    readOnly: true,
  },
];

const resources: SchedulerResource[] = [
  { id: 'work', title: 'Work', eventColor: 'purple' },
  { id: 'personal', title: 'Personal', eventColor: 'teal' },
];

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

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <EventCalendarPremium
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        defaultPreferences={{ isSidePanelOpen: false }}
        defaultView="month"
      />
    </div>
  );
}
```

--------------------------------

### Implement dayAndHour preset in React

Source: https://mui.com/x/react-scheduler/event-timeline/presets

Configures the timeline to display hourly granularity over a few days. Requires the @mui/x-scheduler-premium package.

```tsx
import * as React from 'react';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import {
  initialEvents,
  resources,
  defaultVisibleDate,
} from '../../datasets/car-rental';

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

  return (
    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
      <EventTimelinePremium
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        defaultPreset="dayAndHour"
        presets={['dayAndHour']}
      />
    </div>
  );
}
```

--------------------------------

### Implement Basic Week View

Source: https://mui.com/x/react-scheduler/event-calendar/views

Displays a weekly calendar view for event management.

```tsx
import * as React from 'react';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { StandaloneWeekView } from '@mui/x-scheduler/week-view';
import {
  initialEvents,
  defaultVisibleDate,
  resources,
} from '../../datasets/personal-agenda';

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

  return (
    <div style={{ height: '500px', width: '100%' }}>
      <StandaloneWeekView
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
      />
    </div>
  );
}
```

--------------------------------

### Implement Basic Month View

Source: https://mui.com/x/react-scheduler/event-calendar/views

Displays a monthly calendar view for event management.

```tsx
import * as React from 'react';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { StandaloneMonthView } from '@mui/x-scheduler/month-view';
import {
  initialEvents,
  defaultVisibleDate,
  resources,
} from '../../datasets/personal-agenda';

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

  return (
    <div style={{ height: '500px', width: '100%' }}>
      <StandaloneMonthView
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
      />
    </div>
  );
}
```

--------------------------------

### Configure locale via ThemeProvider

Source: https://mui.com/x/react-scheduler/event-calendar/localization

Apply locale translations globally by passing the locale object as an argument to createTheme.

```jsx
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { frFR } from '@mui/x-scheduler/locales';
// Or import { frFR } from '@mui/x-scheduler-premium/locales';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  frFR,
);

<ThemeProvider theme={theme}>
  <EventCalendar />
</ThemeProvider>;
```

```jsx
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { frFR } from '@mui/x-scheduler/locales';
import { frFR as pickersFrFR } from '@mui/x-date-pickers/locales';
import { frFR as coreFrFR } from '@mui/material/locale';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  frFR, // x-scheduler translations
  pickersFrFR, // x-date-pickers translations
  coreFrFR, // core translations
);

<ThemeProvider theme={theme}>
  <EventCalendar />
</ThemeProvider>;
```

--------------------------------

### Configure drag and resize priority order

Source: https://mui.com/x/react-scheduler/event-calendar/drag-interactions

Demonstrates the hierarchy of configuration where event-level settings override resource-level settings, which override component-level props.

```tsx
<EventCalendar
  events={[{ id: '1', title: 'Event 1', draggable: false, resizable: false }]}
/>
```

```tsx
<EventCalendar
  resources={[
    {
      id: '1',
      title: 'Resource 1',
      areEventsDraggable: false,
      areEventsResizable: false,
    },
  ]}
/>
```

```tsx
<EventCalendar areEventsDraggable={false} areEventsResizable={false} />
```

```tsx
function App() {
  const resources = [
    { id: 'work', title: 'Work', areEventsDraggable: false },
    { id: 'personal', title: 'Personal' },
  ];

  const events = [
    { id: 'event-1', resource: 'work' },
    { id: 'event-2', resource: 'personal' },
    { id: 'event-3', resource: 'work', draggable: true },
  ];

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

--------------------------------

### Implement basic data source

Source: https://mui.com/x/react-scheduler/event-calendar/lazy-loading

A full component implementation showing the integration of a data source with the EventCalendarPremium component.

```tsx
import * as React from 'react';
import { EventCalendarPremium } from '@mui/x-scheduler-premium/event-calendar-premium';
import {
  resources,
  defaultVisibleDate,
  getEvents,
  persistEvents,
} from './fakeServer';

export default function BasicDataSource() {
  return (
    <div style={{ height: '700px', width: '100%' }}>
      <EventCalendarPremium
        dataSource={{ getEvents, persistEvents }}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        defaultPreferences={{ isSidePanelOpen: false }}
      />
    </div>
  );
}
```

--------------------------------

### Implement dayAndMonth preset in React

Source: https://mui.com/x/react-scheduler/event-timeline/presets

Configures the timeline to display daily granularity grouped by month. Suitable for short-term planning and booking views.

```tsx
import * as React from 'react';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import {
  initialEvents,
  resources,
  defaultVisibleDate,
} from '../../datasets/apartment-bookings';

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

  return (
    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
      <EventTimelinePremium
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        defaultPreset="dayAndMonth"
        presets={['dayAndMonth']}
      />
    </div>
  );
}
```

--------------------------------

### Import Scheduler components

Source: https://mui.com/x/react-scheduler/quickstart

Import the necessary components and types from the Scheduler package.

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

--------------------------------

### Configure preferences menu visibility

Source: https://mui.com/x/react-scheduler/event-calendar/preferences

Use the preferencesMenuConfig prop to show or hide specific items in the user-facing preferences menu.

```ts
// hides the menu
preferencesMenuConfig={false}

// hides the menu item responsible for toggling the weekend visibility
// the other preferences remain visible
preferencesMenuConfig={{ toggleWeekendVisibility: false }}

// hides the menu items for toggling weekend and week number visibility
preferencesMenuConfig={{ toggleWeekendVisibility: false, toggleWeekNumberVisibility: false }}
```

--------------------------------

### Display localization table

Source: https://mui.com/x/react-scheduler/event-calendar/localization

Render a table of available localization keys using the internal documentation component.

```jsx
import LocalisationTable from 'docs/src/modules/components/LocalizationTable';
import data from '../../localization/data.json';

export default function SchedulerLocalisationTableNoSnap() {
  return <LocalisationTable data={data} />;
}
```

--------------------------------

### Configure locale text via theme

Source: https://mui.com/x/react-scheduler/event-timeline/localization

Integrate locale translations into the MUI theme using the createTheme function and ThemeProvider.

```jsx
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { frFR } from '@mui/x-scheduler/locales';
// Or import { frFR } from '@mui/x-scheduler-premium/locales';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  frFR,
);

<ThemeProvider theme={theme}>
  <EventTimelinePremium />
</ThemeProvider>;
```

--------------------------------

### Configure default collapsed resources

Source: https://mui.com/x/react-scheduler/event-calendar/resources

Initialize the scheduler with specific parent resources collapsed using the defaultCollapsedResources prop.

```tsx
import * as React from 'react';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import {
  initialEvents,
  resources,
  defaultVisibleDate,
} from '../../datasets/school-calendar';

export default function DefaultCollapsedResources() {
  const [events, setEvents] = React.useState(initialEvents);

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <EventCalendar
        events={events}
        onEventsChange={setEvents}
        defaultVisibleDate={defaultVisibleDate}
        resources={resources}
        defaultCollapsedResources={{ academics: true }}
      />
    </div>
  );
}
```

--------------------------------

### Implement Basic Agenda View

Source: https://mui.com/x/react-scheduler/event-calendar/views

Displays events in a list layout using the StandaloneAgendaView component. Requires events, resources, and a default visible date to initialize.

```tsx
import * as React from 'react';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { StandaloneAgendaView } from '@mui/x-scheduler/agenda-view';
import {
  initialEvents,
  defaultVisibleDate,
  resources,
} from '../../datasets/personal-agenda';

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

  return (
    <div style={{ height: '500px', width: '100%' }}>
      <StandaloneAgendaView
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
      />
    </div>
  );
}
```
Tokens:
Raw