JavaScript/jQuery Scheduler API
The Scheduler is a widget that represents scheduled data and allows a user to manage and edit it.
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
Options
An object defining configuration options for the widget.
| 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 property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| appointmentCollectorRender | An alias for the appointmentCollectorTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| appointmentCollectorTemplate | Specifies a custom template for cell overflow indicators. |
| appointmentComponent | An alias for the appointmentTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| appointmentDragging | Configures appointment reordering using drag and drop gestures. |
| appointmentRender | An alias for the appointmentTemplate property 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 property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| appointmentTooltipRender | An alias for the appointmentTooltipTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| appointmentTooltipTemplate | Specifies a custom template for tooltips displayed when users click an appointment or cell overflow indicator. |
| 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 property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| dataCellRender | An alias for the dataCellTemplate property 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 property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| dateCellRender | An alias for the dateCellTemplate property 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. |
| 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 property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| resourceCellRender | An alias for the resourceCellTemplate property 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 property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| timeCellRender | An alias for the timeCellTemplate property 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 widget's time zone. |
| 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
This section describes methods used to manipulate the widget.
| 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's or cell overflow indicator's 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. |
| resetOption(optionName) | Resets an option to its default value. |
| 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
This section describes events fired by this widget.
| 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.