Schedule component with day, week, month and year views
Schedule is a unified component that combines all schedule views (Day, Week, Month, Year) with automatic view switching. Use the view selector in the header to switch between different views.
Control the current view and date externally using the view , onViewChange , date , and onDateChange props. This allows you to build custom navigation or integrate with other components.
Customize each view by passing view-specific props via dayViewProps , weekViewProps , monthViewProps , and yearViewProps . These props are forwarded to the corresponding view component.
For example, you can set different time ranges for Day and Week views, or customize the first day of week for Month and Year views.
Set defaultView to control which view is shown initially when using uncontrolled mode.
You can build a custom header using ScheduleHeader compound components combined with your own controls. Disable the default header on all views by passing withHeader={false} through view-specific props.
The following props are shared across all views:
These props are automatically passed to all views. For view-specific customization, use the dayViewProps , weekViewProps , monthViewProps , and yearViewProps props.
Set withAgenda prop to display an "Agenda" button in the header of DayView, WeekView and MonthView. When clicked, it opens an AgendaView showing events for the currently visible date range.
Enable event drag and drop by setting withEventsDragAndDrop prop. Events can be dragged to different time slots and days across all views.
Set withDragSlotSelect prop to allow users to drag across time slots or day cells to select a range. When the drag ends, the onSlotDragEnd callback is called with the range start and end dates. Combined with onTimeSlotClick , onAllDaySlotClick , onDayClick , and onEventClick callbacks, this enables a complete event creation and editing experience across all views.
Saturday, September 26
Use onExternalEventDrop to allow dragging items from outside the component into the schedule. External items must set data in dataTransfer during their onDragStart . The callback receives the DataTransfer object and the drop target datetime.
Combine onExternalEventDrop with withEventsDragAndDrop to enable bidirectional drag and drop. Items dragged from the sidebar are removed from the list and added to the schedule. Events dragged from the schedule back to the sidebar are removed from the schedule. The schedule sets application/json with { eventId } in dataTransfer when an event is dragged, which the sidebar drop zone reads to identify the event.
Enable event resizing by setting withEventResize prop. Users can drag the top or bottom edge of an event to adjust its start or end time. Use onEventResize callback to handle the resize. Event resize works in both Day and Week views and can be combined with drag and drop.
Schedule automatically expands recurring events for the visible date range in each view. See Recurring events guide for full documentation.
Set display="background" on an event to render it as a full-width, non-interactive block behind regular events. Background events work in Day, Week, and Month views.
Schedule supports layout="responsive" prop that automatically switches between views based on the container width. Resize the container below to see the view change.
For more control over individual views, use the view components directly: