[scheduler] Store events with processed dates in the state (#20145)

Author: flaviendelangle

docs/data/scheduler/agenda-view/BasicAgendaView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CalendarEvent } from '@mui/x-scheduler/models';
+import { SchedulerEvent } from '@mui/x-scheduler/models';
 import { StandaloneAgendaView } from '@mui/x-scheduler/agenda-view';
 import {
   initialEvents,
@@ -8,7 +8,7 @@ import {
 } from '../datasets/personal-agenda';
 
 export default function BasicAgendaView() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>(initialEvents);
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
 
   return (
     <div style={{ height: '500px', width: '100%' }}>

docs/data/scheduler/datasets/all-day-events.ts

@@ -2,13 +2,13 @@
 // Non-realistic set focused on edge cases of all-day events positioning.
 
 import { DateTime } from 'luxon';
-import { CalendarEvent, CalendarResource } from '@mui/x-scheduler/models';
+import { SchedulerEvent, CalendarResource } from '@mui/x-scheduler/models';
 
 export const defaultVisibleDate = DateTime.fromISO('2025-07-01T00:00:00');
 
 const START_OF_FIRST_WEEK = defaultVisibleDate.startOf('week');
 
-export const initialEvents: CalendarEvent[] = [
+export const initialEvents: SchedulerEvent[] = [
   {
     id: '1',
     start: START_OF_FIRST_WEEK.set({ weekday: 1, hour: 9 }),

docs/data/scheduler/datasets/car-rental.ts

@@ -1,12 +1,12 @@
 // Fake data of a car rental company
 import { DateTime } from 'luxon';
-import { CalendarEvent, CalendarResource } from '@mui/x-scheduler/models';
+import { SchedulerEvent, CalendarResource } from '@mui/x-scheduler/models';
 
 export const defaultVisibleDate = DateTime.fromISO('2025-07-01T00:00:00');
 
 const START_OF_FIRST_WEEK = defaultVisibleDate.startOf('week');
 
-export const initialEvents: CalendarEvent[] = [
+export const initialEvents: SchedulerEvent[] = [
   {
     id: 'rental-1',
     start: START_OF_FIRST_WEEK.set({ hour: 9 }),

docs/data/scheduler/datasets/palette-demo.ts

@@ -1,12 +1,12 @@
 // Fake data of an agenda with lots of different resources
 import { DateTime } from 'luxon';
-import { CalendarEvent, CalendarResource } from '@mui/x-scheduler/models';
+import { SchedulerEvent, CalendarResource } from '@mui/x-scheduler/models';
 
 export const defaultVisibleDate = DateTime.fromISO('2025-07-01T00:00:00');
 
 const START_OF_FIRST_WEEK = defaultVisibleDate.startOf('week');
 
-export const initialEvents: CalendarEvent[] = [
+export const initialEvents: SchedulerEvent[] = [
   {
     id: 'violet',
     start: START_OF_FIRST_WEEK.set({ weekday: 1, hour: 2 }),

docs/data/scheduler/datasets/personal-agenda.ts

@@ -1,13 +1,13 @@
 // Personal Agenda Events Dataset
 
 import { DateTime } from 'luxon';
-import { CalendarEvent, CalendarResource } from '@mui/x-scheduler/models';
+import { SchedulerEvent, CalendarResource } from '@mui/x-scheduler/models';
 
 export const defaultVisibleDate = DateTime.fromISO('2025-07-01T00:00:00');
 
 const START_OF_FIRST_WEEK = defaultVisibleDate.startOf('week');
 
-export const initialEvents: CalendarEvent[] = [
+export const initialEvents: SchedulerEvent[] = [
   // Work events
   {
     id: 'work-daily-standup',

docs/data/scheduler/datasets/recurring-events.ts

@@ -2,12 +2,12 @@
 // Non-realistic set focused on edge cases of RRULE handling.
 
 import { DateTime } from 'luxon';
-import { CalendarEvent, CalendarResource } from '@mui/x-scheduler/models';
+import { SchedulerEvent, CalendarResource } from '@mui/x-scheduler/models';
 
 export const defaultVisibleDate = DateTime.fromISO('2025-07-01T00:00:00');
 const START = defaultVisibleDate.startOf('week');
 
-export const initialEvents: CalendarEvent[] = [
+export const initialEvents: SchedulerEvent[] = [
   // WEEKLY PATTERNS
   {
     id: 'weekly-weekdays-only',

docs/data/scheduler/datasets/timeline-events.ts

@@ -1,11 +1,11 @@
 import { DateTime } from 'luxon';
-import { CalendarEvent, CalendarResource } from '@mui/x-scheduler/models';
+import { SchedulerEvent, CalendarResource } from '@mui/x-scheduler/models';
 
 // Timeline starts July 1, 2025
 export const defaultVisibleDate = DateTime.fromISO('2025-07-01T00:00:00');
 const START = defaultVisibleDate.startOf('week');
 
-export const initialEvents: CalendarEvent[] = [
+export const initialEvents: SchedulerEvent[] = [
   // Project
   {
     id: 'meeting-1',

docs/data/scheduler/day-view/BasicDayView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CalendarEvent } from '@mui/x-scheduler/models';
+import { SchedulerEvent } from '@mui/x-scheduler/models';
 import { StandaloneDayView } from '@mui/x-scheduler/day-view';
 import {
   initialEvents,
@@ -8,7 +8,7 @@ import {
 } from '../datasets/personal-agenda';
 
 export default function BasicDayView() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>(initialEvents);
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
 
   return (
     <div style={{ height: '500px', width: '100%' }}>

docs/data/scheduler/event-calendar/AllDay.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CalendarEvent } from '@mui/x-scheduler/models';
+import { SchedulerEvent } from '@mui/x-scheduler/models';
 import { EventCalendar } from '@mui/x-scheduler/event-calendar';
 import {
   initialEvents,
@@ -8,7 +8,7 @@ import {
 } from '../datasets/all-day-events';
 
 export default function AllDay() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>(initialEvents);
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
 
   return (
     <div style={{ height: '600px', width: '100%' }}>

docs/data/scheduler/event-calendar/ColorPalettes.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { CalendarEvent } from '@mui/x-scheduler/models';
+import { SchedulerEvent } from '@mui/x-scheduler/models';
 import { EventCalendar } from '@mui/x-scheduler/event-calendar';
 import {
   initialEvents,
@@ -9,7 +9,7 @@ import {
 } from '../datasets/palette-demo';
 
 export default function ColorPalettes() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>(initialEvents);
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
 
   return (
     <div style={{ height: '600px', width: '100%' }}>