React Scheduler API
See Also
- Set Up DevExtreme: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Configuration
| Name | Description |
|---|---|
| accessKey |
Specifies the shortcut key that sets focus on the widget. |
| adaptivityEnabled |
Specifies whether the widget adapts to small screens. |
| allDayExpr |
Specifies the name of the data source item field whose value defines whether or not the corresponding appointment is an all-day appointment. |
| appointmentCollectorComponent |
An alias for the appointmentCollectorTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| appointmentCollectorRender |
An alias for the appointmentCollectorTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| appointmentCollectorTemplate |
Specifies an appointment collector's custom template. |
| appointmentComponent |
An alias for the appointmentTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| appointmentRender |
An alias for the appointmentTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| appointmentTemplate |
Specifies a custom template for appointments. |
| appointmentTooltipComponent |
An alias for the appointmentTooltipTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| appointmentTooltipRender |
An alias for the appointmentTooltipTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| appointmentTooltipTemplate |
Specifies a custom template for appointment tooltips and appointments in the appointment collector's drop-down list. |
| cellDuration |
Specifies cell duration in minutes. |
| crossScrollingEnabled |
Specifies whether or not an end-user can scroll the view in both directions at the same time. |
| currentDate |
Specifies a date displayed on the current scheduler view by default. |
| currentView |
Specifies the currently displayed view. Accepts the view's name or type. |
| customizeDateNavigatorText |
Customizes the date navigator's text. |
| dataCellComponent |
An alias for the dataCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| dataCellRender |
An alias for the dataCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| dataCellTemplate |
Specifies a custom template for table cells. |
| dataSource |
Binds the widget to data. |
| dateCellComponent |
An alias for the dateCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| dateCellRender |
An alias for the dateCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| dateCellTemplate |
Specifies a custom template for day scale items. |
| dateSerializationFormat |
Specifies the date-time values' serialization format. Use it only if you do not specify the dataSource at design time. |
| descriptionExpr |
Specifies the name of the data source item field whose value holds the description of the corresponding appointment. |
| disabled |
Specifies whether the widget responds to user interaction. |
| dropDownAppointmentComponent |
An alias for the dropDownAppointmentTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| dropDownAppointmentRender |
An alias for the dropDownAppointmentTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| dropDownAppointmentTemplate |
Specifies a custom template for appointments in the appointment collector's drop-down list. |
| editing |
Specifies which editing operations an end-user can perform on appointments. |
| elementAttr |
Specifies the attributes to be attached to the widget's root element. |
| endDateExpr |
Specifies the name of the data source item field that defines the ending of an appointment. |
| endDateTimeZoneExpr |
Specifies the name of the data source item field that defines the timezone of the appointment end date. |
| endDayHour |
Specifies the last hour on the time scale. Accepts integer values from 0 to 24. |
| firstDayOfWeek |
Specifies the first day of a week. Does not apply to the agenda view. |
| focusStateEnabled |
Specifies whether the widget can be focused using keyboard navigation. |
| groupByDate |
If true, appointments are grouped by date first and then by resource; opposite if false. Applies only if appointments are grouped and groupOrientation is "horizontal". |
| groups |
Specifies the resource kinds by which the scheduler's appointments are grouped in a timetable. |
| height |
Specifies the widget's height. |
| hint |
Specifies text for a hint that appears when a user pauses on the widget. |
| indicatorUpdateInterval |
Specifies the time interval between when the date-time indicator changes its position, in milliseconds. |
| max |
The latest date the widget allows you to select. |
| maxAppointmentsPerCell |
Specifies the limit of full-sized appointments displayed per cell. Applies to all views except "agenda". |
| min |
The earliest date the widget allows you to select. |
| noDataText |
The text or HTML markup displayed by the widget if the item collection is empty. Available for the Agenda view only. |
| onAppointmentAdded |
A function that is executed after an appointment is added to the data source. |
| onAppointmentAdding |
A function that is executed before an appointment is added to the data source. |
| onAppointmentClick |
A function that is executed when an appointment is clicked or tapped. |
| onAppointmentContextMenu |
A function that is executed when a user attempts to open the browser's context menu for an appointment. Allows you to replace this context menu with a custom context menu. |
| onAppointmentDblClick |
A function that is executed when an appointment is double-clicked or double-tapped. |
| onAppointmentDeleted |
A function that is executed after an appointment is deleted from the data source. |
| onAppointmentDeleting |
A function that is executed before an appointment is deleted from the data source. |
| onAppointmentFormOpening |
A function that is executed before an appointment details form is opened. |
| onAppointmentRendered |
A function that is executed when an appointment is rendered. |
| onAppointmentUpdated |
A function that is executed after an appointment is updated in the data source. |
| onAppointmentUpdating |
A function that is executed before an appointment is updated in the data source. |
| onCellClick |
A function that is executed when a view cell is clicked. |
| onCellContextMenu |
A function that is executed when a user attempts to open the browser's context menu for a cell. Allows you to replace this context menu with a custom context menu. |
| onContentReady |
A function that is executed when the widget's content is ready and each time the content is changed. |
| onDisposing |
A function that is executed before the widget is disposed of. |
| onInitialized |
A function used in JavaScript frameworks to save the widget instance. |
| onOptionChanged |
A function that is executed after a widget option is changed. |
| recurrenceEditMode |
Specifies the edit mode for recurring appointments. |
| recurrenceExceptionExpr |
Specifies the name of the data source item field that defines exceptions for the current recurring appointment. |
| recurrenceRuleExpr |
Specifies the name of the data source item field that defines a recurrence rule for generating recurring appointments. |
| remoteFiltering |
Specifies whether filtering is performed on the server or client side. |
| resourceCellComponent |
An alias for the resourceCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| resourceCellRender |
An alias for the resourceCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| resourceCellTemplate |
Specifies a custom template for resource headers. |
| resources |
Specifies an array of resources available in the scheduler. |
| rtlEnabled |
Switches the widget to a right-to-left representation. |
| selectedCellData |
Currently selected cells' data. |
| shadeUntilCurrentTime |
Specifies whether to apply shading to cover the timetable up to the current time. |
| showAllDayPanel |
Specifies the "All-day" panel's visibility. Setting this option to false hides the panel along with the all-day appointments. |
| showCurrentTimeIndicator |
Specifies the current date-time indicator's visibility. |
| startDateExpr |
Specifies the name of the data source item field that defines the start of an appointment. |
| startDateTimeZoneExpr |
Specifies the name of the data source item field that defines the timezone of the appointment start date. |
| startDayHour |
Specifies the first hour on the time scale. Accepts integer values from 0 to 24. |
| tabIndex |
Specifies the number of the element when the Tab key is used for navigating. |
| textExpr |
Specifies the name of the data source item field that holds the subject of an appointment. |
| timeCellComponent |
An alias for the timeCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| timeCellRender |
An alias for the timeCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| timeCellTemplate |
Specifies a custom template for time scale items. |
| timeZone |
Specifies the timezone of the widget. |
| useDropDownViewSwitcher |
Specifies whether a user can switch views using tabs or a drop-down menu. |
| views |
Specifies and configures the views to be available in the view switcher. |
| visible |
Specifies whether the widget is visible. |
| width |
Specifies the widget's width. |
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Methods
| Name | Description |
|---|---|
| addAppointment(appointment) |
Adds an appointment. |
| beginUpdate() |
Prevents the widget from refreshing until the endUpdate() method is called. |
| defaultOptions(rule) |
Specifies the device-dependent default configuration options for this component. |
| deleteAppointment(appointment) |
Deletes an appointment from the timetable and its object from the data source. |
| dispose() |
Disposes of all the resources allocated to the Scheduler instance. |
| element() |
Gets the root widget element. |
| endUpdate() |
Refreshes the widget after a call of the beginUpdate() method. |
| focus() |
Sets focus on the widget. |
| getDataSource() |
Gets the DataSource instance. |
| getEndViewDate() |
Gets the current view's end date. |
| getInstance(element) |
Gets the instance of a widget found using its DOM node. |
| getStartViewDate() |
Gets the current view's start date. |
| hideAppointmentPopup(saveChanges) |
Hides an appointment details form. |
| hideAppointmentTooltip() |
Hides an appointment tooltip. |
| instance() |
Gets the widget's instance. Use it to access other methods of the widget. |
| off(eventName) |
Detaches all event handlers from a single event. |
| off(eventName, eventHandler) |
Detaches a particular event handler from a single event. |
| on(eventName, eventHandler) |
Subscribes to an event. |
| on(events) |
Subscribes to events. |
| option() |
Gets all widget options. |
| option(optionName) |
Gets the value of a single option. |
| option(optionName, optionValue) |
Updates the value of a single option. |
| option(options) |
Updates the values of several options. |
| repaint() |
Repaints the widget without reloading data. Call it to update the widget's markup. |
| scrollToTime(hours, minutes, date) |
Scrolls the current view to a specific day and time. |
| showAppointmentPopup(appointmentData, createNewAppointment, currentAppointmentData) |
Shows the appointment details form. |
| showAppointmentTooltip(appointmentData, target, currentAppointmentData) |
Shows a tooltip for a target element. |
| updateAppointment(target, appointment) |
Updates an appointment. |
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Events
| Name | Description |
|---|---|
| appointmentAdded |
Raised after an appointment is added to the data source. |
| appointmentAdding |
Raised before an appointment is added to the data source. |
| appointmentClick |
Raised when an appointment is clicked or tapped. |
| appointmentContextMenu |
Raised when a user attempts to open the browser's context menu for an appointment. |
| appointmentDblClick |
Raised when an appointment is double-clicked or double-tapped. |
| appointmentDeleted |
Raised after an appointment is deleted from the data source. |
| appointmentDeleting |
Raised before an appointment is deleted from the data source. |
| appointmentFormOpening |
Raised before an appointment details form is opened. |
| appointmentRendered |
Raised when an appointment is rendered. |
| appointmentUpdated |
Raised after an appointment is updated in the data source. |
| appointmentUpdating |
Raised before an appointment is updated in the data source. |
| cellClick |
Raised when a view cell is clicked. |
| cellContextMenu |
Raised when a user attempts to open the browser's context menu for a cell. |
| contentReady |
Raised when the widget's content is ready. |
| disposing |
Raised before the widget is disposed of. |
| initialized |
Raised only once, after the widget is initialized. |
| optionChanged |
Raised after a widget option is changed. |
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Default Appointment Template
By default, a predefined appointment template is applied to display scheduler appointments. This template is based on certain fields of the data source provided for the widget. Below is the list of these fields. If the default appointment template is not appropriate for your task, implement a custom appointment template based on these or other fields of your data source.
See Also
Default Tooltip Template
This section lists the fields that are used in a default template for scheduler appointment tooltips.
By default, a predefined appointment tooltip template is applied to display appointment toolips. This template is based on certain fields of the data source provided for the widget. Below is the list of these fields. If the default tooltip template is not appropriate for your task, implement a custom template based on these or other fields of your data source.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.