[scheduler] Store events with processed dates in the state

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%' }}>

docs/data/scheduler/event-calendar/DefaultView.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/personal-agenda';
 
 export default function DefaultView() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>(initialEvents);
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
 
   return (
     <div style={{ height: '650px', width: '100%' }}>

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { DateTime } from 'luxon';
-import { CalendarEvent } from '@mui/x-scheduler/models';
+import { SchedulerEvent } from '@mui/x-scheduler/models';
 import { EventCalendar } from '@mui/x-scheduler/event-calendar';
 import { initialEvents, resources } from '../datasets/personal-agenda';
 
 const defaultVisibleDate = DateTime.fromISO('2025-11-01');
 
 export default function DefaultVisibleDate() {
-  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/DragAndDrop.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/personal-agenda';
 
 export default function DragAndDrop() {
-  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/ExternalDragAndDrop.js

@@ -76,7 +76,7 @@ export default function ExternalDragAndDrop() {
 
         setPlaceholder({
           ...eventData,
-          duration: end.diff(start).as('minutes'),
+          duration: end.value.diff(start.value).as('minutes'),
         });
       },
       onDragLeave: () => {

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

@@ -79,7 +79,7 @@ export default function ExternalDragAndDrop() {
 
         setPlaceholder({
           ...eventData,
-          duration: end.diff(start).as('minutes'),
+          duration: end.value.diff(start.value).as('minutes'),
         });
       },
       onDragLeave: () => {

docs/data/scheduler/event-calendar/FullEventCalendar.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/personal-agenda';
 
 export default function FullEventCalendar() {
-  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/PreferencesMenu.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/personal-agenda';
 
 export default function PreferencesMenu() {
-  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/RemoveViews.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/personal-agenda';
 
 export default function RemoveViews() {
-  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/Translations.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 { frFR } from '@mui/x-scheduler/translations';
 import {
@@ -9,7 +9,7 @@ import {
 } from '../datasets/palette-demo';
 
 export default function Translations() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>(initialEvents);
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
 
   return (
     <div style={{ height: '600px', width: '100%' }}>

docs/data/scheduler/month-view/BasicMonthView.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 { StandaloneMonthView } from '@mui/x-scheduler/month-view';
 import {
   initialEvents,
@@ -8,7 +8,7 @@ import {
 } from '../datasets/personal-agenda';
 
 export default function BasicMonthView() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>(initialEvents);
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
 
   return (
     <div style={{ height: '650px', width: '100%' }}>

docs/data/scheduler/recurring-events/RecurringEventsDataset.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/recurring-events';
 
 export default function RecurringEventsDataset() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>(initialEvents);
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
 
   return (
     <div style={{ height: '600px', width: '100%' }}>

docs/data/scheduler/timeline/BasicTimeline.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 { Timeline } from '@mui/x-scheduler/timeline';
 import {
   defaultVisibleDate,
@@ -8,7 +8,7 @@ import {
 } from '../datasets/timeline-events';
 
 export default function BasicTimeline() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>(initialEvents);
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
 
   return (
     <div style={{ height: '500px', width: '100%' }}>

docs/data/scheduler/week-view/BasicWeekView.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 { StandaloneWeekView } from '@mui/x-scheduler/week-view';
 import {
   initialEvents,
@@ -8,7 +8,7 @@ import {
 } from '../datasets/personal-agenda';
 
 export default function BasicWeekView() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>(initialEvents);
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
 
   return (
     <div style={{ height: '500px', width: '100%' }}>

packages/x-scheduler-headless/package.json

@@ -21,6 +21,7 @@
     "./event-calendar-selectors": "./src/event-calendar-selectors/index.ts",
     "./models": "./src/models/index.ts",
     "./process-date": "./src/process-date/index.ts",
+    "./process-event": "./src/process-event/index.ts",
     "./scheduler-selectors": "./src/scheduler-selectors/index.ts",
     "./standalone-event": "./src/standalone-event/index.ts",
     "./timeline": "./src/timeline/index.ts",

packages/x-scheduler-headless/src/calendar-grid/current-time-indicator/CalendarGridCurrentTimeIndicator.tsx

@@ -10,6 +10,7 @@ import { CalendarGridCurrentTimeIndicatorCssVars } from './CalendarGridCurrentTi
 import { mergeDateAndTime } from '../../utils/date-utils';
 import { useEventCalendarStoreContext } from '../../use-event-calendar-store-context';
 import { schedulerNowSelectors } from '../../scheduler-selectors';
+import { processDate } from '../../process-date';
 
 export const CalendarGridCurrentTimeIndicator = React.forwardRef(
   function CalendarGridCurrentTimeIndicator(
@@ -31,12 +32,12 @@ export const CalendarGridCurrentTimeIndicator = React.forwardRef(
     const now = useStore(store, schedulerNowSelectors.nowUpdatedEveryMinute);
 
     const nowForColumn = React.useMemo(
-      () => mergeDateAndTime(adapter, columnStart, now),
+      () => processDate(mergeDateAndTime(adapter, columnStart, now), adapter),
       [adapter, columnStart, now],
     );
 
     const endForCalc = React.useMemo(
-      () => adapter.addMinutes(nowForColumn, 1),
+      () => processDate(adapter.addMinutes(nowForColumn.value, 1), adapter),
       [adapter, nowForColumn],
     );
 
@@ -58,7 +59,8 @@ export const CalendarGridCurrentTimeIndicator = React.forwardRef(
     const props = { style };
 
     const isOutOfRange =
-      adapter.isBefore(nowForColumn, columnStart) || adapter.isAfter(nowForColumn, columnEnd);
+      adapter.isBefore(nowForColumn.value, columnStart) ||
+      adapter.isAfter(nowForColumn.value, columnEnd);
 
     return useRenderElement('div', componentProps, {
       ref: [forwardedRef],