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:

Demos

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

Props

The following table outlines the props for the Scheduler component:

NameTypeDefaultDescription
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.

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
true

Enables dragging events to different time slots, automatically updating their start and end times. When enabled, events can be moved freely across the scheduler while maintaining their duration.

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
true

Enables resize handles on events to drag and adjust their start or end time without moving the entire event. Useful for quickly extending or shortening event durations.

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.

firstDayOfWeek
number
0

Sets which day appears first in scheduler(0 = Sunday, 1 = Monday, etc.). Respects the locale's default unless explicitly overridden.

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.

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.

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.

showHeaderBar
boolean
true

Controls the visibility of the header bar containing date navigation and view switcher buttons. Useful for embedded or custom scheduler implementations.

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.

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:

NameParametersReturnsDescription
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.
    • deleteEvent

  • id

    : string | number | Record<string, any> | Record<string, any[]>
    • 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.
    • saveEvent

  • data

    : Record<string, any> | Record<string, any[]>
    • 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.

    • Events

    The following table outlines the events for the Scheduler component:

    NameTypeDescription
    onCellClick
    (event: SchedulerCellClickEvent) => void

    Fired when a scheduler cell is clicked (or tapped on mobile devices). Useful for custom cell selection logic or triggering event creation dialogs.

    onCellDoubleClick
    (event: SchedulerCellClickEvent) => void

    Fired when a scheduler cell is double-clicked. Commonly used to open an event creation form for the selected time slot.

    onDataChangeComplete
    (event: SchedulerDataChangeEvent) => void

    Fired after a scheduler data modification successfully completes. Useful for refreshing dependent components or displaying success confirmations.

    onDataChangeStart
    (event: SchedulerDataChangeEvent) => void

    Fired at the start of any scheduler data modification (add, edit, or delete). Can be used to validate changes or display loading indicators.

    onDataRequest
    (event: SchedulerDataRequestEvent) => void

    Fired before event data is loaded from the data source or remote server. Useful for preprocessing or validating data before it renders in the scheduler.

    onDrag
    (event: SchedulerDragEvent) => void

    Fired continuously while an event is being dragged across time slots. Useful for real-time validation or updating dependent UI elements.

    onDragStart
    (event: SchedulerDragEvent) => void

    Fired when the user begins dragging an event. Can be used to cancel the drag, apply restrictions, or trigger visual feedback.

    onDragStop
    (event: SchedulerDragEvent) => void

    Fired when the user releases an event after dragging it. Can be used to apply final validation or persist changes to the data source.

    onError
    (event: Error) => void

    Fired when an error occurs during a scheduler operation (e.g., data loading, event validation). Useful for logging errors or displaying error messages to the user.

    onEventClick
    (event: SchedulerEventClickEvent) => void

    Fired when an event is clicked (or tapped on mobile devices). Use this to display event details or trigger custom event workflows.

    onEventDoubleClick
    (event: SchedulerEventClickEvent) => void

    Fired when an event is double-clicked (or double-tapped on mobile devices). Typically opens the event editor for viewing or modifying event details.

    onMoreEventsClick
    (event: SchedulerMoreEventsClickEvent) => void

    Fired when the user clicks the "+n more events" indicator in Month view. Useful for opening the agenda view to show all events for a specific date.

    onResizeStart
    (event: SchedulerResizeEvent) => void

    Fired when the user grabs an event resize handle to begin resizing. Can be used to validate or cancel the resize operation.

    onResizeStop
    (event: SchedulerResizeEvent) => void

    Fired when the user releases the resize handle after adjusting an event's duration. Can be used for final validation or to persist the new event duration.

    onResizing
    (event: SchedulerResizeEvent) => void

    Fired continuously while the user is dragging an event resize handle. Useful for real-time duration validation or preview updates.

    onSelectedDateChange
    (event: SchedulerDateChangeEvent) => void

    Fired when the user changes the active date in the scheduler. Use this to synchronize the scheduler with other components or perform related actions.

    onViewChange
    (event: SchedulerViewChangeEvent) => void

    Fired when the user switches between different view types (Day, Week, Month, etc.). Useful for updating UI state or loading view-specific data.