Scheduler

The Scheduler is a UI component that represents scheduled data and allows a user to manage and edit it.

Included in: dx.web.js, dx.all.js
import Scheduler from "devextreme/ui/scheduler"
Scheduler interactive configuration
Copy Code
Copy to Codepen
import Scheduler from "devextreme/ui/scheduler";

new Scheduler(container, {
});

                    
Type:

Object

Configuration

An object defining configuration properties for the UI component.

Name Description
accessKey

Specifies the shortcut key that sets focus on the UI component.

adaptivityEnabled

Specifies whether the UI component 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. This property's value should divide the interval between startDayHour and endDayHour into even parts.

crossScrollingEnabled

Specifies whether or not an end-user can scroll the view in both directions at the same time.

currentDate

Specifies the current date.

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 UI component 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 UI component responds to user interaction.

editing

Specifies which editing operations a user can perform on appointments.

elementAttr

Specifies the global attributes to be attached to the UI component's container 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 UI component 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 UI component's height.

hint

Specifies text for a hint that appears when a user pauses on the UI component.

indicatorUpdateInterval

Specifies the time interval between when the date-time indicator changes its position, in milliseconds.

max

The latest date the UI component 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 UI component allows you to select.

noDataText

The text or HTML markup displayed by the UI component 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. Use this function to customize the form.

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 UI component's content is ready and each time the content is changed.

onDisposing

A function that is executed before the UI component is disposed of.

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

onOptionChanged

A function that is executed after a UI component property 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 UI component to a right-to-left representation.

scrolling

Configures scrolling.

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 property 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 time zone for the Scheduler's grid. Accepts values from the IANA time zone database.

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 UI component is visible.

width

Specifies the UI component's width.

See Also

Methods

This section describes methods used to manipulate the UI component.

Name Description
addAppointment(appointment)

Adds an appointment.

beginUpdate()

Prevents the UI component from refreshing until the endUpdate() method is called.

defaultOptions(rule)

Specifies the device-dependent default configuration properties 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 UI component element.

endUpdate()

Refreshes the UI component after a call of the beginUpdate() method.

focus()

Sets focus on the UI component.

getDataSource()

Gets the DataSource instance.

getEndViewDate()

Gets the current view's end date.

getInstance(element)

Gets the instance of a UI component 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 UI component's instance. Use it to access other methods of the UI component.

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 UI component properties.

option(optionName)

Gets the value of a single property.

option(optionName, optionValue)

Updates the value of a single property.

option(options)

Updates the values of several properties.

repaint()

Repaints the UI component without reloading data. Call it to update the UI component's markup.

resetOption(optionName)

Resets an property to its default value.

scrollTo(date, group, allDay)

Scrolls the current view to a specified position. Available for all views except "agenda". You should specify the height property to use this method.

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

Events

This section describes events fired by this UI component.

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 UI component's content is ready.

disposing

Raised before the UI component is disposed of.

initialized

Raised only once, after the UI component is initialized.

optionChanged

Raised after a UI component property is changed.

See Also