Scheduler Component

The React Scheduler component that displays a list of events scheduled at specific dates and times, helping users plan and manage their schedule effectively.

Usage

To import and use the Scheduler component in your application, use the following code snippet:

import { Scheduler, DayView, WeekView, WorkWeekView, MonthView } from '@syncfusion/react-scheduler';

<Scheduler>
<DayView />
<WeekView />
<WorkWeekView />
<MonthView />
</Scheduler>

import { Scheduler, DayView, WeekView, WorkWeekView, MonthView } from '@syncfusion/react-scheduler';

<Scheduler>
<DayView />
<WeekView />
<WorkWeekView />
<MonthView />
</Scheduler>

Demos

Explore the demos of the React Scheduler component. Refer to this page.

Props

The following table outlines the props for the Scheduler component:

Name	Type	Default	Description
cell	(props: SchedulerCellProps) => node	null	Accepts a custom React component to render individual scheduler cells. Can be configured at both the root scheduler level and individual view level.
dateFormat	string	-	Applies a specific date format to all date displays in the scheduler. If not provided, the format defaults to the current culture's standard.
dateHeader	(props: SchedulerDateHeaderProps) => node	null	Accepts a custom React component to render the header cells displaying dates. Can be configured at both the root scheduler level and individual view level.
defaultSelectedDate	Date	new Date()	Sets the initial active date when the scheduler operates in uncontrolled mode. This value is read only on first render; subsequent updates are ignored unless using controlled mode.
defaultView	string	'Week'	Sets the initial view type when the scheduler operates in uncontrolled mode. This value is read only on first render; subsequent updates are ignored unless using controlled mode.
editor	(props: SchedulerEditorProps) => node	null	Provides a factory function for rendering a custom editor popup; defaults to the built-in editor if not specified. View-level editor props override root-level editor when both are provided.
enableRecurrenceValidation	boolean	true	Enables or disables automatic validation of recurring event rules. When disabled, recurrence validation is skipped, allowing more flexible but potentially invalid recurrence patterns.
endHour	string	'24:00'	Specifies the end hour displayed in the scheduler view. Times after this hour are hidden from the display. Accepts time in short skeleton format (e.g., '20:00').
eventDrag	boolean \| EventDragProps	true	Enables or disables drag-and-drop event repositioning with optional detailed behavior configuration. Set to `true` for default drag behavior, `false` to disable, or provide an object for advanced drag options.
eventOverlap	boolean	true	Controls whether multiple events can occupy the same time slot without visual overlap adjustments. When enabled, overlapping events display side-by-side; when disabled, the scheduler prevents scheduling conflicts.
eventResize	boolean \| EventResizeProps	true	Configures event resizing with optional detailed behavior settings for snapping and constraints. Set to `true` for default resize behavior, `false` to disable, or provide an object for advanced resize options.
eventSettings	EventSettings	{ dataSource: [], fields: { id: 'Id', subject: 'Subject', startTime: 'StartTime', endTime: 'EndTime', isAllDay: 'IsAllDay', location: 'Location', description: 'Description' } }	Configures event data binding and field mapping for the scheduler. Supports local arrays, remote data via DataManager, and custom field configurations.
eventTooltip	boolean \| SchedulerTooltipProps	false	Enables appointment tooltip. Set to true for default tooltip, false to disable, or provide props to customize
firstDayOfWeek	number	0	Sets which day appears first in scheduler(0 = Sunday, 1 = Monday, etc.). Respects the locale's default unless explicitly overridden.
header	boolean \| ((props: SchedulerHeaderProps) => node)	true	Configures or replaces the Scheduler header. true: renders the built-in header false: hides the header entirely (props) => ReactNode: renders a custom SchedulerHeader composition with provided props
headerIndent	(props: HeaderIndentProps) => node	null	Accepts a custom React component to render the header indent area (left section of date header). When provided, replaces the default week number and all-day toggle section. Can be configured at both the root scheduler level and individual view level.
height	string	auto	Sets the vertical dimension of the scheduler container. Use a specific pixel value (e.g., '600px') for fixed height or 'auto' for responsive sizing.
keyboardNavigation	boolean	true	Enables keyboard shortcuts for navigation and event manipulation within the scheduler. Users can navigate cells, open event editors, and perform other actions using keyboard inputs.
quickInfo	SchedulerQuickInfoProps	null	Accepts custom React components to render different sections of the Quick Info Popup. Supports separate customization for new event creation (add) and existing event view (edit).
readOnly	boolean	false	Renders the scheduler in a non-editable state, preventing all add, edit, and delete operations. Event viewing and navigation remain fully functional.
rowAutoHeight	boolean	false	Automatically adjusts cell heights based on the number of events in each time slot. Prevents event overflow and improves readability when multiple events occupy the same slot.
scrollToSettings	SchedulerScrollToProps	-	Specifies the initial scroll behavior of the main content area. When set, the scheduler automatically scrolls to the defined target after the view has finished rendering.
selectedDate	Date	-	Marks the currently active date and controls which date range is displayed by the scheduler. Defaults to the system's current date when not specified.
showQuickInfoPopup	boolean	true	Displays a compact popup with event or cell details when clicked. Provides a quick preview without opening the full event editor.
showTimeIndicator	boolean	true	Displays a moving indicator showing the current system time within the scheduler. Helps users quickly identify the present moment during event planning.
showWeekNumber	boolean	false	Displays the ISO week number in the scheduler's header or date labels. Useful for tracking weeks across multiple months or years.
showWeekend	boolean	true	When set to `false`, it hides the weekend days of a week from the Scheduler. The days which are not defined in the working days collection are usually treated as weekend days.
startHour	string	'00:00'	Specifies the start hour displayed in the scheduler view. Times before this hour are hidden from the display. Accepts time in short skeleton format (e.g., '08:00').
timeFormat	string	-	Applies a specific time format to all time displays in the scheduler. If not provided, the format defaults to the current culture's standard.
timeScale	TimeScaleProps	{ enable: true, interval: 60, slotCount: 2, majorSlot: null, minorSlot: null }	Configures the time slot layout, including interval duration, number of slots per hour, and custom slot templates. Allows fine-grained control over how time is segmented and displayed in the scheduler.
view	string	-	Controls the currently displayed view in controlled mode (Day, Week, WorkWeek, or Month). When provided, the scheduler becomes controlled and only updates the view when this prop changes.
weekRule	WeekRule	WeekRule.FirstDay	Specifies the available options for determining how the first week of the year is calculated. Supported week rule components: FirstDay,FirstFourDayWeek,FirstFullWeek.
width	string	auto	Sets the horizontal dimension of the scheduler container. Use 'auto' to fill the parent container or specify a custom pixel value for fixed width.
workDays	number[]	[1, 2, 3, 4, 5]	Specifies which days of the week are considered working days. Only these days appear in the work week view; other views highlight them with a distinct style.
workHours	WorkHoursProps	{ highlight: true, start: '09:00', end: '18:00' }	Highlights the standard business hours (default 9 AM to 6 PM) with a distinct color in the scheduler. Can be customized to match your organization's actual working hours.

Methods

The following table outlines the methods for the Scheduler component:

Name	Parameters	Returns	Description
addEvent	data : Record<string, any> \| Record<string, any[]>	void	Adds the newly created event into the Scheduler dataSource. Params: data: Single or collection of event objects to be added into Scheduler.
closeEditor	-	void	Closes the Editor popup
closeQuickInfoPopup	-	void	Closes the Quick Info popup if open
deleteEvent	id : string \| number \| Record<string, any> \| Record<string, any[]> action? : CrudAction	void	Deletes the events based on the provided ID or event collection in the argument list. Params: id: Accepts the ID as string or number type or single or collection of the event object which needs to be removed from the Scheduler. action: Optional action type for handling recurrence event deletion (DeleteOccurrence, DeleteSeries).
getCellDetails	-	SchedulerCellDetails \| null	Gets the details of the currently selected cell (time range, all-day state, etc.). Returns null if no cell is selected.
getEventDetails	-	EventModel \| null	Gets the details of the currently selected event. Returns null if no event is selected.
openEditor	-	void	Opens the event editor.
openQuickInfoPopup	-	void	Opens the Quick Info popup for a cell or event
saveEvent	data : Record<string, any> \| Record<string, any[]> action? : CrudAction	void	Updates the changes made in the event object by passing it as an parameter into the dataSource. Params: data: Single or collection of event objects to be saved into Scheduler. action: Optional action type for handling recurrence event edits (Edit, EditSeries, EditOccurrence).
scrollTo	hour : string date? : Date	void	Programmatically scrolls the current view to the specified date and hour. If the date is not in the currently rendered range, the scheduler navigates to it, then scrolls. Works in time-based views (Day/Week/WorkWeek). In Month view, it navigates to the date and waits for a time-based view to be active. Params: hour: The hour within the day to scrollTo (0-23). date: The target date to ensure is visible.

Events

The following table outlines the events for the Scheduler component: