Skip to content

Commit c32058a

Browse files
flaviendelangleclaude
flaviendelangle
and
claude
authored
[scheduler] Add viewConfig prop to limit displayed hours in the day and week views (#22929)
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 0cb49d9 commit c32058a

83 files changed

Lines changed: 932 additions & 132 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/data/scheduler/event-calendar/views/DayViewStartEndTime.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react';
2+
3+
import { StandaloneDayView } from '@mui/x-scheduler/day-view';
4+
import {
5+
initialEvents,
6+
defaultVisibleDate,
7+
resources,
8+
} from '../../datasets/personal-agenda';
9+
10+
export default function DayViewStartEndTime() {
11+
const [events, setEvents] = React.useState(initialEvents);
12+
13+
return (
14+
<div style={{ height: '500px', width: '100%' }}>
15+
<StandaloneDayView
16+
events={events}
17+
resources={resources}
18+
defaultVisibleDate={defaultVisibleDate}
19+
onEventsChange={setEvents}
20+
viewConfig={{ day: { startTime: 8, endTime: 20 } }}
21+
/>
22+
</div>
23+
);
24+
}

‎docs/data/scheduler/event-calendar/views/DayViewStartEndTime.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react';
2+
import { SchedulerEvent } from '@mui/x-scheduler/models';
3+
import { StandaloneDayView } from '@mui/x-scheduler/day-view';
4+
import {
5+
initialEvents,
6+
defaultVisibleDate,
7+
resources,
8+
} from '../../datasets/personal-agenda';
9+
10+
export default function DayViewStartEndTime() {
11+
const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
12+
13+
return (
14+
<div style={{ height: '500px', width: '100%' }}>
15+
<StandaloneDayView
16+
events={events}
17+
resources={resources}
18+
defaultVisibleDate={defaultVisibleDate}
19+
onEventsChange={setEvents}
20+
viewConfig={{ day: { startTime: 8, endTime: 20 } }}
21+
/>
22+
</div>
23+
);
24+
}

‎docs/data/scheduler/event-calendar/views/DayViewStartEndTime.tsx.preview‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<StandaloneDayView
2+
events={events}
3+
resources={resources}
4+
defaultVisibleDate={defaultVisibleDate}
5+
onEventsChange={setEvents}
6+
viewConfig={{ day: { startTime: 8, endTime: 20 } }}
7+
/>

‎docs/data/scheduler/event-calendar/views/WeekViewStartEndTime.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react';
2+
3+
import { StandaloneWeekView } from '@mui/x-scheduler/week-view';
4+
import {
5+
initialEvents,
6+
defaultVisibleDate,
7+
resources,
8+
} from '../../datasets/personal-agenda';
9+
10+
export default function WeekViewStartEndTime() {
11+
const [events, setEvents] = React.useState(initialEvents);
12+
13+
return (
14+
<div style={{ height: '500px', width: '100%' }}>
15+
<StandaloneWeekView
16+
events={events}
17+
resources={resources}
18+
defaultVisibleDate={defaultVisibleDate}
19+
onEventsChange={setEvents}
20+
viewConfig={{ week: { startTime: 8, endTime: 20 } }}
21+
/>
22+
</div>
23+
);
24+
}

‎docs/data/scheduler/event-calendar/views/WeekViewStartEndTime.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react';
2+
import { SchedulerEvent } from '@mui/x-scheduler/models';
3+
import { StandaloneWeekView } from '@mui/x-scheduler/week-view';
4+
import {
5+
initialEvents,
6+
defaultVisibleDate,
7+
resources,
8+
} from '../../datasets/personal-agenda';
9+
10+
export default function WeekViewStartEndTime() {
11+
const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
12+
13+
return (
14+
<div style={{ height: '500px', width: '100%' }}>
15+
<StandaloneWeekView
16+
events={events}
17+
resources={resources}
18+
defaultVisibleDate={defaultVisibleDate}
19+
onEventsChange={setEvents}
20+
viewConfig={{ week: { startTime: 8, endTime: 20 } }}
21+
/>
22+
</div>
23+
);
24+
}

‎docs/data/scheduler/event-calendar/views/WeekViewStartEndTime.tsx.preview‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<StandaloneWeekView
2+
events={events}
3+
resources={resources}
4+
defaultVisibleDate={defaultVisibleDate}
5+
onEventsChange={setEvents}
6+
viewConfig={{ week: { startTime: 8, endTime: 20 } }}
7+
/>

‎docs/data/scheduler/event-calendar/views/views.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,28 @@ The `week` view lets users manage events for an entire week.
2020

2121
{{"demo": "BasicWeekView.js", "bg": "inline", "defaultCodeOpen": false}}
2222

23+
Use the `viewConfig` prop to limit the hours displayed in the time grid with `startTime` and `endTime`:
24+
25+
{{"demo": "WeekViewStartEndTime.js", "bg": "inline", "defaultCodeOpen": false}}
26+
27+
:::warning
28+
`startTime` and `endTime` must be whole hours (integers between `0` and `24`). Minute-level precision isn't supported yet.
29+
:::
30+
2331
### Day view
2432

2533
The `day` view lets users manage events for a single day.
2634

2735
{{"demo": "BasicDayView.js", "bg": "inline", "defaultCodeOpen": false}}
2836

37+
The `viewConfig` prop also limits the hours displayed in the day view with `startTime` and `endTime`:
38+
39+
{{"demo": "DayViewStartEndTime.js", "bg": "inline", "defaultCodeOpen": false}}
40+
41+
:::warning
42+
`startTime` and `endTime` must be whole hours (integers between `0` and `24`). Minute-level precision isn't supported yet.
43+
:::
44+
2945
### Month view
3046

3147
The `month` view lets users manage events for an entire month.

‎docs/pages/x/api/scheduler/event-calendar-premium.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,12 @@
102102
"description": "'agenda'<br>&#124;&nbsp;'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'week'"
103103
}
104104
},
105+
"viewConfig": {
106+
"type": {
107+
"name": "shape",
108+
"description": "{ day?: { endTime?: number, startTime?: number }, week?: { endTime?: number, startTime?: number } }"
109+
}
110+
},
105111
"views": {
106112
"type": {
107113
"name": "arrayOf",

‎docs/pages/x/api/scheduler/event-calendar.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,12 @@
102102
"description": "'agenda'<br>&#124;&nbsp;'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'week'"
103103
}
104104
},
105+
"viewConfig": {
106+
"type": {
107+
"name": "shape",
108+
"description": "{ day?: { endTime?: number, startTime?: number }, week?: { endTime?: number, startTime?: number } }"
109+
}
110+
},
105111
"views": {
106112
"type": {
107113
"name": "arrayOf",

‎docs/pages/x/api/scheduler/standalone-agenda-view-premium.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"description": "'agenda'<br>&#124;&nbsp;'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'week'"
9292
}
9393
},
94+
"viewConfig": { "type": { "name": "object" } },
9495
"views": {
9596
"type": {
9697
"name": "arrayOf",

0 commit comments

Comments
 (0)