### Full Example: Custom Event Model with TypeScript

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

This example demonstrates a complete setup for the Event Timeline component with custom event data, including TypeScript interfaces and a detailed `eventModelStructure` for mapping custom event properties. It shows how to manage events using `useState` and the `onEventsChange` prop.

```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="day"
      />
    </div>
  );
}
```

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

### Full Example with Themed Date Locale

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

A comprehensive example demonstrating how to use `createDateLocaleTheme` within a `ThemeProvider` to localize the `EventCalendar` component, including events and default visibility.

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

```

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

### Install Material UI Peer Dependencies

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

Install the Material UI core packages, which are peer dependencies for the Scheduler. Use npm, pnpm, or yarn.

```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 Example: Read-Only Event Calendar

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

This example demonstrates how to configure the `EventCalendar` to be entirely read-only by passing the `readOnly` prop. It includes setting up events, resources, and the date, while ensuring no modifications can be made.

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

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

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

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

### Enable Drag and Drop Interactions

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

This example demonstrates the basic setup for the EventTimelinePremium component, where drag and drop interactions are enabled by default.

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

export default function BasicDragAndDrop() {
  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"
      />
    </div>
  );
}

```

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

### Configure an all-day event in the timeline

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

This example demonstrates how to render events in the Event Timeline, including an all-day event. Ensure the `allDay` property is set correctly for such events.

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

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

### Basic Lazy Loading Setup for Event Calendar

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

Set up the Event Calendar with a dataSource object containing getEvents and updateEvents functions for basic lazy loading.

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

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

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

### Example: Mixed Read-Only Restrictions

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

This example illustrates the priority order of read-only settings. 'Work' events are generally read-only due to the resource setting, except for 'event-3' which explicitly has `readOnly: false`.

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

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

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

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

### Dynamic Resource Grouping in Event Timeline

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

Configure the `eventModelStructure` to dynamically get and set the resource property based on user selection. This example allows switching between grouping by 'room' and 'teacher'.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import capitalize from '@mui/utils/capitalize';
import {
  SchedulerResource,
  SchedulerEventModelStructure,
} 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;
  room: string;
  teacher: string;
}

const initialEvents: CustomEvent[] = [
  // July 1, 2025 (defaultVisibleDate) - Tuesday schedule

  // 8:00-9:30 AM slots
  {
    id: 'math-1-room-a',
    start: '2025-07-01T08:00:00',
    end: '2025-07-01T09:30:00',
    room: 'Room A',
    teacher: 'french',
  },
  {
    id: 'science-1-room-b',
    start: '2025-07-01T08:00:00',
    end: '2025-07-01T09:30:00',
    room: 'Room B',
    teacher: 'science',
  },
  {
    id: 'english-1-room-c',
    start: '2025-07-01T08:00:00',
    end: '2025-07-01T09:30:00',
    room: 'Room C',
    teacher: 'english',
  },

  // 10:00-11:30 AM slots
  {
    id: 'history-1-room-a',
    start: '2025-07-01T10:00:00',
    end: '2025-07-01T11:30:00',
    room: 'Room A',
    teacher: 'history',
  },
  {
    id: 'math-2-room-b',
    start: '2025-07-01T10:00:00',
    end: '2025-07-01T11:30:00',
    room: 'Room B',
    teacher: 'french',
  },
  {
    id: 'science-2-room-c',
    start: '2025-07-01T10:00:00',
    end: '2025-07-01T11:30:00',
    room: 'Room C',
    teacher: 'science',
  },

  // 12:00-1:30 PM slots
  {
    id: 'english-2-room-a',
    start: '2025-07-01T12:00:00',
    end: '2025-07-01T13:30:00',
    room: 'Room A',
    teacher: 'english',
  },
  {
    id: 'history-2-room-b',
    start: '2025-07-01T12:00:00',
    end: '2025-07-01T13:30:00',
    room: 'Room B',
    teacher: 'history',
  },
  {
    id: 'math-3-room-c',
    start: '2025-07-01T12:00:00',
    end: '2025-07-01T13:30:00',
    room: 'Room C',
    teacher: 'french',
  },

  // 2:00-3:30 PM slots
  {
    id: 'science-3-room-a',
    start: '2025-07-01T14:00:00',
    end: '2025-07-01T15:30:00',
    room: 'Room A',
    teacher: 'science',
  },
  {
    id: 'english-3-room-b',
    start: '2025-07-01T14:00:00',
    end: '2025-07-01T15:30:00',
    room: 'Room B',
    teacher: 'english',
  },
  {
    id: 'history-3-room-c',
    start: '2025-07-01T14:00:00',
    end: '2025-07-01T15:30:00',
    room: 'Room C',
    teacher: 'history',
  },
];

const rooms: SchedulerResource[] = [
  { id: 'Room A', title: 'Room A', eventColor: 'purple' },
  { id: 'Room B', title: 'Room B', eventColor: 'teal' },
  { id: 'Room C', title: 'Room C', eventColor: 'lime' },
];

const classes: SchedulerResource[] = [
  { id: 'french', title: 'French', eventColor: 'orange' },
  { id: 'science', title: 'Science', eventColor: 'teal' },
  { id: 'english', title: 'English', eventColor: 'pink' },
  { id: 'history', title: 'History', eventColor: 'indigo' },
];

export default function DynamicResourceProperty() {
  const [resourceProperty, setResourceProperty] = React.useState<'room' | 'teacher' >(
    'room',
  );
  const [events, setEvents] = React.useState<CustomEvent[]>(initialEvents);

  const eventModelStructure: SchedulerEventModelStructure<CustomEvent> =
    React.useMemo(
      () => ({
        title: {
          getter: (event) => `${capitalize(event.teacher)} (${event.room})`,
        },
        resource: {
          getter: (event) => event[resourceProperty],
          setter: (event, newValue) => {
            if (newValue == null) {
              delete event[resourceProperty];
            } else {
              event[resourceProperty] = newValue;
            }
            return event;
          },
        },
      }),
      [resourceProperty],
    );

  return (
    <Stack spacing={2} style={{ width: '100%' }}>
      <ToggleButtonGroup
        exclusive
        onChange={(event, newResourceProperty) => {
          if (newResourceProperty !== null) {
            setResourceProperty(newResourceProperty);
          }
        }}
        value={resourceProperty}
      >
        <ToggleButton value="room">Group by Room</ToggleButton>
        <ToggleButton value="teacher">Group by Teacher</ToggleButton>
      </ToggleButtonGroup>
      <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
        <EventTimelinePremium
          events={events}
          eventModelStructure={eventModelStructure}
          resources={resourceProperty === 'room' ? rooms : classes}
          defaultVisibleDate={defaultVisibleDate}
          onEventsChange={setEvents}
        />
      </div>
    </Stack>
  );
}

```

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

### Example: Mixed Drag/Resize Behavior

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

Demonstrates how event-specific and resource-level configurations interact. 'Work' events are generally not draggable, but 'event-3' overrides this with `draggable: true`.

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

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

### Full Example: Custom Event Model with Recurring Events

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

Demonstrates integrating a custom event model structure with recurring events in the `EventCalendar` component, including state management for events.

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

interface CustomEvent {
  id: string;
  start: string;
  end: string;
  name: string;
  rrule: string;
}

const initialEvents: CustomEvent[] = [
  {
    id: 'work-daily-standup',
    start: '2025-07-02T09:00:00',
    end: '2025-07-02T09:30:00',
    name: 'Daily Standup',
    rrule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR',
  },
  {
    id: 'work-retro',
    start: '2025-07-01T16:00:00',
    end: '2025-07-01T17:00:00',
    name: 'Team Retrospective',
    rrule: 'FREQ=WEEKLY;INTERVAL=2;BYDAY=TU',
  },
];

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: '600px', width: '100%' }}>
      <EventCalendar
        events={events}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        eventModelStructure={eventModelStructure}
        defaultPreferences={{ isSidePanelOpen: false }}
      />
    </div>
  );
}
```

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

### Dynamic Resource Grouping in Event Calendar

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

Configure the `eventModelStructure` to dynamically get and set the resource property based on user selection. This example uses a `ToggleButtonGroup` to switch between grouping by 'room' and 'teacher'.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import capitalize from '@mui/utils/capitalize';
import {
  SchedulerResource,
  SchedulerEventModelStructure,
} from '@mui/x-scheduler/models';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { defaultVisibleDate } from '../../datasets/personal-agenda';

interface CustomEvent {
  id: string;
  start: string;
  end: string;
  room: string;
  teacher: string;
}

const initialEvents: CustomEvent[] = [
  // 8:00-9:30 AM slots
  {
    id: 'math-1-room-a',
    start: '2025-07-01T08:00:00',
    end: '2025-07-01T09:30:00',
    room: 'Room A',
    teacher: 'french',
  },
  {
    id: 'science-1-room-b',
    start: '2025-07-01T08:00:00',
    end: '2025-07-01T09:30:00',
    room: 'Room B',
    teacher: 'science',
  },
  {
    id: 'english-1-room-c',
    start: '2025-07-01T08:00:00',
    end: '2025-07-01T09:30:00',
    room: 'Room C',
    teacher: 'english',
  },

  // 10:00-11:30 AM slots
  {
    id: 'history-1-room-a',
    start: '2025-07-01T10:00:00',
    end: '2025-07-01T11:30:00',
    room: 'Room A',
    teacher: 'history',
  },
  {
    id: 'math-2-room-b',
    start: '2025-07-01T10:00:00',
    end: '2025-07-01T11:30:00',
    room: 'Room B',
    teacher: 'french',
  },
  {
    id: 'science-2-room-c',
    start: '2025-07-01T10:00:00',
    end: '2025-07-01T11:30:00',
    room: 'Room C',
    teacher: 'science',
  },

  // 12:00-1:30 PM slots
  {
    id: 'english-2-room-a',
    start: '2025-07-01T12:00:00',
    end: '2025-07-01T13:30:00',
    room: 'Room A',
    teacher: 'english',
  },
  {
    id: 'history-2-room-b',
    start: '2025-07-01T12:00:00',
    end: '2025-07-01T13:30:00',
    room: 'Room B',
    teacher: 'history',
  },
  {
    id: 'math-3-room-c',
    start: '2025-07-01T12:00:00',
    end: '2025-07-01T13:30:00',
    room: 'Room C',
    teacher: 'french',
  },

  // 2:00-3:30 PM slots
  {
    id: 'science-3-room-a',
    start: '2025-07-01T14:00:00',
    end: '2025-07-01T15:30:00',
    room: 'Room A',
    teacher: 'science',
  },
  {
    id: 'english-3-room-b',
    start: '2025-07-01T14:00:00',
    end: '2025-07-01T15:30:00',
    room: 'Room B',
    teacher: 'english',
  },
  {
    id: 'history-3-room-c',
    start: '2025-07-01T14:00:00',
    end: '2025-07-01T15:30:00',
    room: 'Room C',
    teacher: 'history',
  },
];

const rooms: SchedulerResource[] = [
  { id: 'Room A', title: 'Room A', eventColor: 'purple' },
  { id: 'Room B', title: 'Room B', eventColor: 'teal' },
  { id: 'Room C', title: 'Room C', eventColor: 'lime' },
];

const classes: SchedulerResource[] = [
  { id: 'french', title: 'French', eventColor: 'orange' },
  { id: 'science', title: 'Science', eventColor: 'teal' },
  { id: 'english', title: 'English', eventColor: 'pink' },
  { id: 'history', title: 'History', eventColor: 'indigo' },
];

export default function DynamicResourceProperty() {
  const [resourceProperty, setResourceProperty] = React.useState<'room' | 'teacher' >(
    'room',
  );
  const [events, setEvents] = React.useState<CustomEvent[]>(initialEvents);

  const eventModelStructure: SchedulerEventModelStructure<CustomEvent> =
    React.useMemo(
      () => ({
        title: {
          getter: (event) => `${capitalize(event.teacher)} (${event.room})`,
        },
        resource: {
          getter: (event) => event[resourceProperty],
          setter: (event, newValue) => {
            if (newValue == null) {
              delete event[resourceProperty];
            } else {
              event[resourceProperty] = newValue;
            }
            return event;
          },
        },
      }),
      [resourceProperty],
    );

  return (
    <Stack spacing={2} style={{ width: '100%' }}>
      <ToggleButtonGroup
        exclusive
        onChange={(event, newResourceProperty) => {
          if (newResourceProperty !== null) {
            setResourceProperty(newResourceProperty);
          }
        }}
        value={resourceProperty}
      >
        <ToggleButton value="room">Group by Room</ToggleButton>
        <ToggleButton value="teacher">Group by Teacher</ToggleButton>
      </ToggleButtonGroup>
      <div style={{ height: '600px', width: '100%' }}>
        <EventCalendar
          events={events}
          eventModelStructure={eventModelStructure}
          resources={resourceProperty === 'room' ? rooms : classes}
          defaultVisibleDate={defaultVisibleDate}
          onEventsChange={setEvents}
          view="day"
          views={['day']}
          defaultPreferences={{ isSidePanelOpen: false }}
        />
      </div>
    </Stack>
  );
}

```

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

### Example: Mixed Read-Only Event Configuration

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

Demonstrates how to configure read-only events using a combination of resource-level `areEventsReadOnly` and event-level `readOnly` properties. Events with `readOnly: false` will override the resource setting.

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

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

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

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

### Example: Navigate to Today using API Method

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

A React component demonstrating how to use the `apiRef` to call `setVisibleDate` and navigate the Event Calendar to the current date. It includes a button to trigger the navigation.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { SchedulerEvent } from '@mui/x-scheduler/models';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { useEventCalendarApiRef } from '@mui/x-scheduler/use-event-calendar-api-ref';
import {
  initialEvents,
  resources,
  defaultVisibleDate,
} from '../../datasets/personal-agenda';

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

  return (
    <Stack spacing={2} sx={{ width: '100%', alignItems: 'flex-start' }}>
      <Button
        variant="contained"
        onClick={(event) =>
          apiRef.current?.setVisibleDate({ visibleDate: new Date(), event })
        }
      >
        Navigate to today
      </Button>
      <div style={{ height: '600px', width: '100%' }}>
        <EventCalendar
          apiRef={apiRef}
          events={events}
          resources={resources}
          defaultVisibleDate={defaultVisibleDate}
          onEventsChange={setEvents}
          defaultPreferences={{ isSidePanelOpen: false }}
        />
      </div>
    </Stack>
  );
}
```

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

### Define Custom Resource Model with Event Colors

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

This example demonstrates defining a custom resource interface and using `resourceModelStructure` to map its properties, including `name` to `title` and `eventColor` for event styling.

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

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

const resources: CustomResource[] = [
  { name: 'Product', id: 'product', eventColor: 'purple' },
  { name: 'Design', id: 'design', eventColor: 'pink' },
  { name: 'Engineering', id: 'engineering', eventColor: 'blue' },
  { name: 'QA', id: 'qa', eventColor: 'teal' },
  { name: 'DevOps', id: 'devops', eventColor: 'green' },
  { name: 'Marketing', id: 'marketing', eventColor: 'orange' },
  { name: 'Sales', id: 'sales', eventColor: 'lime' },
  { name: 'Customer Success', id: 'customer-success', eventColor: 'indigo' },
  { name: 'HR', id: 'hr', eventColor: 'red' },
  { name: 'Finance', id: 'finance', eventColor: 'grey' },
];

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

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

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

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

### Initialize Event Calendar Preferences

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

Use the `defaultPreferences` prop to set initial preference values for the Event Calendar. This example shows how to set AM/PM format, weekend visibility, and side 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>
  );
}
```

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

### Configure Event Styling with CSS Classes

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

This example demonstrates how to apply custom CSS classes to events for visual styling, such as highlighting or striping. It includes the necessary CSS definitions for `.highlighted-event` and `.striped-event`.

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

const initialEvents: SchedulerEvent[] = [
  {
    id: 'event-1',
    start: '2025-07-02T00:00:00',
    end: '2025-07-02T00:00:00',
    allDay: true,
    title: 'Regular Meeting',
    resource: 'room-1',
  },
  {
    id: 'event-2',
    start: '2025-07-02T00:00:00',
    end: '2025-07-02T00:00:00',
    allDay: true,
    title: 'Important Meeting',
    className: 'highlighted-event',
    resource: 'room-2',
  },
  {
    id: 'event-3',
    start: '2025-07-03T00:00:00',
    end: '2025-07-03T00:00:00',
    allDay: true,
    title: 'Project Review',
    className: 'striped-event',
    resource: 'room-1',
  },
  {
    id: 'event-4',
    start: '2025-07-03T00:00:00',
    end: '2025-07-03T00:00:00',
    allDay: true,
    title: 'Team Standup',
    resource: 'room-2',
  },
  {
    id: 'event-5',
    start: '2025-07-04T00:00:00',
    end: '2025-07-04T00:00:00',
    allDay: true,
    title: 'Urgent Task',
    className: 'highlighted-event',
    resource: 'room-1',
  },
];

const resources: SchedulerResource[] = [
  { id: 'room-1', title: 'Room 1' },
  { id: 'room-2', title: 'Room 2' },
];

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

  return (
    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
      <style>
        {`
          .highlighted-event {
            outline: 2px dashed #1976d2 !important;
            outline-offset: -2px;
          }
          .striped-event {
            background-image: repeating-linear-gradient(
              45deg,
              transparent,
              transparent 5px,
              rgba(0, 0, 0, 0.05) 5px,
              rgba(0, 0, 0, 0.05) 10px
            ) !important;
          }
        `}
      </style>
      <EventTimelinePremium
        events={events}
        resources={resources}
        defaultVisibleDate={defaultVisibleDate}
        onEventsChange={setEvents}
        defaultPreset="day"
      />
    </div>
  );
}
```

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

### Daily Frequency RRULE Examples

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

Define daily recurrence patterns. `INTERVAL` specifies the number of days between recurrences.

```typescript
// Every day
rrule: 'FREQ=DAILY';
```

```typescript
// Every two days
rrule: 'FREQ=DAILY;INTERVAL=2';
```

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

### Initialize Event Timeline Preferences

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

Use the `defaultPreferences` prop to set initial preferences for the Event Timeline. This example shows how to set the `ampm` property to `false` for 24-hour format.

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

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

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

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="monthAndYear"
      />
    </div>
  );
}
```

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

### Instant Event String Example

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

Define an event using an instant string ending with 'Z' to represent a fixed moment in UTC. This format is independent of DST changes.

```typescript
const event = {
  id: '1',
  title: 'Team sync',
  start: '2024-01-10T13:00:00Z', // 13:00 UTC
  end: '2024-01-10T14:00:00Z',
};
```

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

### Enable Drag and Drop Interactions in Event Calendar

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

This example demonstrates the default behavior where both event dragging and resizing are enabled. It sets up the EventCalendar component with initial events and a handler for changes.

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

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

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

```

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

### Enable Resizing on One Side

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

Configure `areEventsResizable` to either 'start' or 'end' to allow resizing only from a specific edge of the event.

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

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

### Limit Available Views in Event Calendar

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

Use the `views` prop to specify which views are accessible. This example limits the calendar to 'week' and 'month' views.

```tsx
<EventCalendar views={['week', 'month']} />
```

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

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

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

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

### Render events with custom colors in the timeline

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

This example shows how to render events in the Event Timeline, demonstrating the use of custom colors. The `color` property on the event object is used for this purpose.

```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="day"
      />
    </div>
  );
}
```

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

### Full Example: Event Calendar with Default Visible Date

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

A complete React component demonstrating the usage of `defaultVisibleDate` with `EventCalendar`. It includes event handling and resource management.

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

const defaultVisibleDate = new Date('2025-11-01');

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

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

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

### Combine Multiple Locales with ThemeProvider

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

When using multiple MUI libraries, you can combine their locale objects within a single `createTheme` call. This example shows how to merge translations for `@mui/x-scheduler`, `@mui/x-date-pickers`, and core Material UI components.

```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>;

```

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

### Date Locale Timeline with Custom Theme

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

This example demonstrates how to create a localized Event Timeline within a React component using `useTheme` and `useMemo` to combine existing theme with scheduler-specific locales. It allows for dynamic theme creation based on the parent theme.

```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 { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { frFR, createDateLocaleTheme } from '@mui/x-scheduler/locales';
import {
  initialEvents,
  defaultVisibleDate,
  resources,
} from '../../datasets/company-roadmap';

export default function DateLocaleTimeline() {
  const existingTheme = useTheme();
  const theme = React.useMemo(
    () => createTheme(existingTheme, frFR, createDateLocaleTheme(fr)),
    [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>
  );
}

```

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

### Conditional Dragging Based on Resource and Event Properties

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

This example demonstrates how resource-level properties and individual event properties interact to determine drag behavior. Events in the 'work' resource are not draggable by default, but 'event-3' is explicitly set to be draggable.

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