Events in React Scheduler

The Scheduler offers event hooks for initialization, rendering, user interactions, data operations, and errors, letting you track the component’s lifecycle in real time. Use these events to validate input, show UI feedback, and persist changes as users click, drag/resize, or navigate between views.

Event NameDescription
onCellClickFired when a scheduler cell is clicked (or tapped on mobile devices). Useful for custom cell selection logic or triggering event creation dialogs.
onCellDoubleClickFired after a scheduler data modification successfully completes. Useful for refreshing dependent components or displaying success confirmations.
onDataChangeCompleteFired after a scheduler data modification successfully completes. Useful for refreshing dependent components or displaying success confirmations.
onDataChangeStartFired at the start of any scheduler data modification (add, edit, or delete). Can be used to validate changes or display loading indicators.
onDataRequestFired before event data is loaded from the data source or remote server. Useful for preprocessing or validating data before it renders in the scheduler.
onDragFired continuously while an event is being dragged across time slots. Useful for real-time validation or updating dependent UI elements.
onDragStartFired when the user begins dragging an event. Can be used to cancel the drag, apply restrictions, or trigger visual feedback.
onDragStopFired when the user releases an event after dragging it. Can be used to apply final validation or persist changes to the data source.
onErrorFired 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.
onEventClickFired when an event is clicked (or tapped on mobile devices). Use this to display event details or trigger custom event workflows.
onEventDoubleClickFired when an event is double-clicked (or double-tapped on mobile devices). Typically opens the event editor for viewing or modifying event details.
onMoreEventsClickFired 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.
onResizeStartFired when the user grabs an event resize handle to begin resizing. Can be used to validate or cancel the resize operation.
onResizeStopFired 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.
onResizingFired continuously while the user is dragging an event resize handle. Useful for real-time duration validation or preview updates.
onSelectedDateChangeFired when the user changes the active date in the scheduler. Use this to synchronize the scheduler with other components or perform related actions.
onViewChangeFired when the user switches between different view types (Day, Week, Month, etc.). Useful for updating UI state or loading view-specific data.
Loading...