React Scheduler Props
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
accessKey
The value of this option will be passed to the accesskey
attribute of the HTML element that underlies the widget.
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
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.
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.
For appointments in the appointment collector, this option can be ignored in favor of the dropDownAppointmentTemplate.
See Also
currentView
In all situations when more than one view meets the currentView condition, the first matching view from the views array takes precedence.
Use the SchedulerViewType
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Day
, Week
, WorkWeek
, Month
, TimelineDay
, TimelineWeek
, TimelineWorkWeek
, TimelineMonth
, and Agenda
.
See Also
customizeDateNavigatorText
In the following code, the customizeDateNavigatorText function is used to show dates in the mm/dd/yyyy
format (mm/yyyy
for the "month" view):
jQuery
$(function() { var scheduler; $("#schedulerContainer").dxScheduler({ // ... onInitialized: function(e) { scheduler = e.component; }, customizeDateNavigatorText: function(e) { var formatOptions = { year: 'numeric', month: 'numeric', day: 'numeric' }; var formattedStartDate = e.startDate.toLocaleString("en", formatOptions); var formattedEndDate = e.endDate.toLocaleString("en", formatOptions); var view = scheduler.option("currentView"); if(view === "day" | "timelineDay") return formattedStartDate; if(view === "month" ) return e.startDate.toLocaleString("en", { year: 'numeric', month: 'numeric' }); return formattedStartDate + " - " + formattedEndDate; } }); })
Angular
import { DxSchedulerModule } from "devextreme-angular"; // ... export class AppComponent { currentView: string = "day"; customizeDateNavigatorText = (e) => { let formatOptions = { year: 'numeric', month: 'numeric', day: 'numeric' }; var formattedStartDate = e.startDate.toLocaleString("en", formatOptions); var formattedEndDate = e.endDate.toLocaleString("en", formatOptions); if(this.currentView === "day" | "timelineDay") return formattedStartDate; if(this.currentView === "month" ) return e.startDate.toLocaleString("en", { year: 'numeric', month: 'numeric' }); return formattedStartDate + " - " + formattedEndDate; } } @NgModule({ imports: [ // ... DxSchedulerModule ], // ... })
<dx-scheduler ... [(currentView)]="currentView" [customizeDateNavigatorText]="customizeDateNavigatorText"> </dx-scheduler>
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.
dataSource
If you use DevExtreme ASP.NET MVC Controls, refer to the Bind Controls to Data article.
The Scheduler works with collections of objects.
Depending on your data source, bind the Scheduler to data as follows. In each case, also specify the widget's startDateExpr and endDateExpr options. Optionally, set other options with the Expr postfix.
Data Array
Assign the array to the dataSource option. View DemoRead-Only Data in JSON Format
Set the dataSource option to the URL of a JSON file or service that returns JSON data.OData
Implement an ODataStore.Web API, PHP, MongoDB
Use one of the following extensions to enable the server to process data according to the protocol DevExtreme widgets use:Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.
jQuery
JavaScript$(function() { let serviceUrl = "https://url/to/my/service"; $("#schedulerContainer").dxScheduler({ // ... dataSource: DevExpress.data.AspNet.createStore({ key: "ID", loadUrl: serviceUrl + "/GetAction", insertUrl: serviceUrl + "/InsertAction", updateUrl: serviceUrl + "/UpdateAction", deleteUrl: serviceUrl + "/DeleteAction" }) }) });
Angular
app.component.tsapp.component.htmlapp.module.tsimport { Component } from '@angular/core'; import CustomStore from 'devextreme/data/custom_store'; import { createStore } from 'devextreme-aspnet-data-nojquery'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { store: CustomStore; constructor() { let serviceUrl = "https://url/to/my/service"; this.store = createStore({ key: "ID", loadUrl: serviceUrl + "/GetAction", insertUrl: serviceUrl + "/InsertAction", updateUrl: serviceUrl + "/UpdateAction", deleteUrl: serviceUrl + "/DeleteAction" }) } }
<dx-scheduler ... [dataSource]="store"> </dx-scheduler>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxSchedulerModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxSchedulerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue<template> <DxScheduler ... :data-source="store" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import CustomStore from 'devextreme/data/custom_store'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import { DxScheduler } from 'devextreme-vue/scheduler'; export default { components: { DxScheduler }, data() { const serviceUrl = "https://url/to/my/service"; const store = createStore({ key: "ID", loadUrl: serviceUrl + "/GetAction", insertUrl: serviceUrl + "/InsertAction", updateUrl: serviceUrl + "/UpdateAction", deleteUrl: serviceUrl + "/DeleteAction" }); return { store } } } </script>
React
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import CustomStore from 'devextreme/data/custom_store'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import Scheduler from 'devextreme-react/scheduler'; const serviceUrl = "https://url/to/my/service"; const store = createStore({ key: "ID", loadUrl: serviceUrl + "/GetAction", insertUrl: serviceUrl + "/InsertAction", updateUrl: serviceUrl + "/UpdateAction", deleteUrl: serviceUrl + "/DeleteAction" }); class App extends React.Component { render() { return ( <Scheduler ... dataSource={store} /> ); } } export default App;
Any other data source
Implement a CustomStore. View Demo
Regardless of the data source on the input, the Scheduler always wraps it in the DataSource object. This object allows you to sort, filter, group, and otherwise shape data. To get its instance, call the getDataSource() method.
Please review the following notes about data binding:
If you wrap the store into the DataSource object explicitly, set the paginate option to false to prevent data from partitioning.
Data field names should not contain the following characters:
.
,,
,:
,[
, and]
.DataSource and stores provide methods to process and update data. However, the methods do not allow you to perform particular tasks (for example, replace the entire dataset, reconfigure data access at runtime). For such tasks, create a new array, store, or DataSource and assign it to the dataSource option as shown in the articles about changing options in jQuery, Angular, React, and Vue.
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
See Also
dateSerializationFormat
Specifies the date-time values' serialization format. Use it only if you do not specify the dataSource at design time.
Without a data source, the widget cannot detect the date-time values' format. In this case, specify the dateSerializationFormat option that supports the following formats:
"yyyy-MM-dd"
- a local date"yyyy-MM-ddTHH:mm:ss"
- local date and time"yyyy-MM-ddTHH:mm:ssZ"
- the UTC date and time"yyyy-MM-ddTHH:mm:ssx"
- date and time with a timezone
This option applies only if the forceIsoDateParsing field is set to true in the global configuration object.
descriptionExpr
Specifies the name of the data source item field whose value holds the description of the corresponding appointment.
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.
elementAttr
Specifies the attributes to be attached to the widget's root element.
jQuery
$(function(){ $("#schedulerContainer").dxScheduler({ // ... elementAttr: { id: "elementId", class: "class-name" } }); });
Angular
<dx-scheduler ... [elementAttr]="{ id: 'elementId', class: 'class-name' }"> </dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxSchedulerModule ], // ... })
ASP.NET MVC Controls
@(Html.DevExtreme().Scheduler() .ElementAttr("class", "class-name") // ===== or ===== .ElementAttr(new { @id = "elementId", @class = "class-name" }) // ===== or ===== .ElementAttr(new Dictionary<string, object>() { { "id", "elementId" }, { "class", "class-name" } }) )
@(Html.DevExtreme().Scheduler() _ .ElementAttr("class", "class-name") ' ===== or ===== .ElementAttr(New With { .id = "elementId", .class = "class-name" }) ' ===== or ===== .ElementAttr(New Dictionary(Of String, Object) From { { "id", "elementId" }, { "class", "class-name" } }) )
endDateTimeZoneExpr
Specifies the name of the data source item field that defines the timezone of the appointment end date.
endDayHour
This option applies to all views at once. To override it for a specific view, set the same option in the view's configuration object.
firstDayOfWeek
Specifies the first day of a week. Does not apply to the agenda view.
This option can accept a value from 0 to 6:
- 0 - Sunday
- 1 - Monday
- 2 - Tuesday
- 3 - Wednesday
- 4 - Thursday
- 5 - Friday
- 6 - Saturday
The value provided by the culture settings is used by default.
Use the FirstDayOfWeek
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Sunday
, Monday
, Tuesday
, Wednesday
, Thursday
, Friday
, and Saturday
.
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.
This array should contain one or more values that correspond to the fieldExpr values of resource kinds:
jQuery
var resources = [ { fieldExpr: "room", dataSource: roomsDataSource }, { fieldExpr: "teacher", dataSource: teachersDataSource } ]; var schedulerOptions = { dataSource: appointments, resources: resources, groups: ["room", "teacher"] // ... }
Angular
<dx-scheduler [dataSource]="appointments" [resources]="resources" [groups]="['room', 'teacher']"> </dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular"; // ... export class AppComponent { // ... resources = [ { fieldExpr: "room", dataSource: this.roomsDataSource }, { fieldExpr: "teacher", dataSource: this.teachersDataSource } ]; } @NgModule({ imports: [ // ... DxSchedulerModule ], // ... })
To group appointments by resources of one kind, for instance to group appointments that use particular rooms in an office, assign an array with a single element to the groups option. To group appointments by several resource kinds, assign an array of elements. Each element will represent a resource by which appointments will be grouped. Each resource will be nested to the resource represented by the previous element in the groups array.
height
This option accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"80%"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptheight: function() { return window.innerHeight / 1.5; }
indicatorUpdateInterval
Specifies the time interval between when the date-time indicator changes its position, in milliseconds.
maxAppointmentsPerCell
Specifies the limit of full-sized appointments displayed per cell. Applies to all views except "agenda".
This option accepts the following values:
"unlimited"
The widget resizes the appointments without a limit to fit them into a cell."auto"
The widget narrows the appointments down to a predefined size value that depends on the view. If the appointments still do not fit into the cell, the widget aggregates them in an appointment collector.Number
The number of appointments allowed in a single cell. Appointments are aggregated in an appointment collector when this number is exceeded.
noDataText
The text or HTML markup displayed by the widget if the item collection is empty. Available for the Agenda view only.
onAppointmentAdded
Name | Type | Description |
---|---|---|
appointmentData |
The added appointment's data. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
error |
The standard Error object that defines the occurred error. |
|
model |
The model data. Available only if Knockout is used. |
onAppointmentAdding
Name | Type | Description |
---|---|---|
appointmentData |
The data of the appointment to be added. |
|
cancel | | |
Allows you to cancel appointment adding. |
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
onAppointmentClick
Name | Type | Description |
---|---|---|
appointmentData |
The initial appointment. |
|
appointmentElement |
The clicked's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
cancel |
Allows you to cancel execution of the default appointment click handler. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
model |
The model data. Available only if Knockout is used. |
|
targetedAppointmentData |
The clicked appointment. |
In case of recurring appointments or appointments with multiple resources, you may want to obtain information about the currently selected appointment, not the initial appointment. For this purpose, use the targetedAppointmentData field of the function parameter. Otherwise, use the appointmentData field.
For example, there is a recurring appointment that starts on July 18 at 8:00 AM, repeats every day and belongs to two owners:
var appointments = [ ... { startDate: new Date(2016, 6, 18, 8), endDate: new Date(2016, 6, 18, 9), ownerId: [1, 2], recurrenceRule: "FREQ=DAILY" } ];
If you click an appointment from the recurring series, for example the second appointment belonging to the second owner, the following information is presented in the appointmentData and targetedAppointmentData fields.
onAppointmentClick: function(e) { /* The initial appointment data { startDate: new Date(2016, 6, 18, 8), endDate: new Date(2016, 6, 18, 9), ownerId: [1, 2], recurrenceRule: "FREQ=DAILY" } */ var appointmentData = e.appointmentData; /* The clicked appointment data { startDate: new Date(2016, 6, 19, 8), endDate: new Date(2016, 6, 19, 9), ownerId: 2, recurrenceRule: "FREQ=DAILY" } */ var targetedAppointmentData = e.targetedAppointmentData; }
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.
Name | Type | Description |
---|---|---|
appointmentData |
The initial appointment. |
|
appointmentElement |
The appointment's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler's execution. Deprecated in favor of the event field. |
|
model |
The model data. Available only if you use Knockout. |
|
targetedAppointmentData |
The appointment on which the context menu is invoked. |
onAppointmentDblClick
Name | Type | Description |
---|---|---|
appointmentData |
The initial appointment. |
|
appointmentElement |
The clicked's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
cancel |
Allows you to cancel execution of the default appointment click handler. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
model |
The model data. Available only if Knockout is used. |
|
targetedAppointmentData |
The clicked appointment. |
In case of recurring appointments or appointments with multiple resources, you may want to obtain information about the currently selected appointment, not the initial appointment. For this purpose, use the targetedAppointmentData field of the function parameter. Otherwise, use the appointmentData field.
For example, there is a recurring appointment that starts on July 18 at 8:00 AM, repeats every day and belongs to two owners:
var appointments = [ ... { startDate: new Date(2016, 6, 18, 8), endDate: new Date(2016, 6, 18, 9), ownerId: [1, 2], recurrenceRule: "FREQ=DAILY" } ];
If you double-click an appointment from the recurring series, for example the second appointment belonging to the second owner, the following information is presented in the appointmentData and targetedAppointmentData fields.
onAppointmentDblClick: function(e) { /* The initial appointment data { startDate: new Date(2016, 6, 18, 8), endDate: new Date(2016, 6, 18, 9), ownerId: [1, 2], recurrenceRule: "FREQ=DAILY" } */ var appointmentData = e.appointmentData; /* The clicked appointment data { startDate: new Date(2016, 6, 19, 8), endDate: new Date(2016, 6, 19, 9), ownerId: 2, recurrenceRule: "FREQ=DAILY" } */ var targetedAppointmentData = e.targetedAppointmentData; }
onAppointmentDeleted
Name | Type | Description |
---|---|---|
appointmentData |
The deleted appointment's data. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
error |
The standard Error object that defines the occurred error. |
|
model |
The model data. Available only if Knockout is used. |
onAppointmentDeleting
Name | Type | Description |
---|---|---|
appointmentData |
The data of the appointment to be deleted. |
|
cancel | | |
Allows you to prevent the appointment from being deleted. |
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
onAppointmentFormCreated
Use the onAppointmentFormOpening property instead.
Name | Type | Description |
---|---|---|
appointmentData |
The data of the appointment for which a form is opened. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
form |
The form's instance; created only once - when the function is executed for the first time. |
|
model |
The model data. Available only if you use Knockout. |
onAppointmentFormOpening
Name | Type | Description |
---|---|---|
appointmentData |
The data of the appointment for which a form is opened. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
form |
The form's instance; created only once - when the function is executed for the first time. |
|
model |
The model data. Available only if you use Knockout. |
The appointment details form contains the Form widget whose instance is passed to this function in the form field. Use the widget's API to customize the appointment details form.
The following code shows how to use the onAppointmentFormOpening function to customize a form item (startDate
), make hidden items visible (startDateTimeZone
and endDateTimeZone
), and add a new form item (location
). Note that in the last case, the array of form items should be checked to ensure that it does not already contain an item with the same data field.
jQuery
$(function(){ $("#schedulerContainer").dxScheduler({ dataSource: [{ text: "His Girl Friday", startDate: new Date(2016, 4, 24, 9, 10), endDate: new Date(2016, 4, 24, 11, 20), location: "Minnesota" }, // ... ], currentDate: new Date(2016, 4, 24), onAppointmentFormOpening: function (e) { var form = e.form, formItems = form.option("items"); form.itemOption("startDate", { helpText: "Select a date between May 11 and 27", editorOptions: { min: new Date(2016, 4, 11), max: new Date(2016, 4, 27), type: 'datetime' } }); form.itemOption("startDateTimeZone", { visible: true }); form.itemOption("endDateTimeZone", { visible: true }); if (!formItems.find(function(i) { return i.dataField === "location" })) { formItems.push({ label: { text: "Location" }, editorType: "dxTextBox", dataField: "location" }); form.option("items", formItems); } } }); });
Angular
import { DxSchedulerModule } from "devextreme-angular"; // ... export class AppComponent { schedulerData = [{ text: "His Girl Friday", startDate: new Date(2016, 4, 24, 9, 10), endDate: new Date(2016, 4, 24, 11, 20), location: "Minnesota" }, // ... ]; currentDate = new Date(2016, 4, 24); onAppointmentFormOpening (e) { let form = e.form formItems = form.option("items"); form.itemOption("startDate", { helpText: "Select a date between May 11 and 27", editorOptions: { min: new Date(2016, 4, 11), max: new Date(2016, 4, 27), type: 'datetime' } }); form.itemOption("startDateTimeZone", { visible: true }); form.itemOption("endDateTimeZone", { visible: true }); if (!formItems.find(i => i.dataField === "location")) { formItems.push({ label: { text: "Location" }, editorType: "dxTextBox", dataField: "location" }); form.option("items", formItems); } } } @NgModule({ imports: [ // ... DxSchedulerModule ], // ... })
<dx-scheduler [dataSource]="schedulerData" [currentDate]="currentDate" (onAppointmentFormOpening)="onAppointmentFormOpening($event)"> </dx-scheduler>
See Also
onAppointmentRendered
Name | Type | Description |
---|---|---|
appointmentData |
The initial appointment's data. |
|
appointmentElement |
The appointment's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
targetedAppointmentData |
The current appointment's data. |
In case of recurring appointments or appointments with multiple resources, you may want to obtain information about the appointment to be rendered, not the initial appointment. For this purpose, use the targetedAppointmentData field of the function parameter. Otherwise, use the appointmentData field.
For example, there is a recurring appointment that starts on July 18 at 8:00 AM, repeats every day and belongs to two owners:
var appointments = [ ... { startDate: new Date(2016, 6, 18, 8), endDate: new Date(2016, 6, 18, 9), ownerId: [1, 2], recurrenceRule: "FREQ=DAILY" } ];
After the appointments from recurring series is rendered, for example the second appointment belonging to the second owner, the following information is presented in the appointmentData and targetedAppointmentData fields.
onAppointmentRendered: function(e) { /* The initial appointment data { startDate: new Date(2016, 6, 18, 8), endDate: new Date(2016, 6, 18, 9), ownerId: [1, 2], recurrenceRule: "FREQ=DAILY" } */ var appointmentData = e.appointmentData; /* The clicked appointment data { startDate: new Date(2016, 6, 19, 8), endDate: new Date(2016, 6, 19, 9), ownerId: 2, recurrenceRule: "FREQ=DAILY" } */ var targetedAppointmentData = e.targetedAppointmentData; }
onAppointmentUpdated
Name | Type | Description |
---|---|---|
appointmentData |
The updated appointment's data. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
error |
The standard Error object that defines the occurred error. |
|
model |
The model data. Available only if Knockout is used. |
onAppointmentUpdating
Name | Type | Description |
---|---|---|
cancel | | |
Allows you to prevent an appointment update. |
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
newData |
The appointment with new data. |
|
oldData |
The data of the appointment to be updated. |
onCellClick
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel execution of the default cell click handler. |
|
cellData |
The clicked cell's data. |
|
cellElement |
The clicked cell's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
model |
The model data. Available only if Knockout is used. |
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.
Name | Type | Description |
---|---|---|
cellData |
The data of the cell on which the context menu is invoked. |
|
cellElement |
The cell's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler's execution. Deprecated in favor of the event field. |
|
model |
The model data. Available only if you use Knockout. |
onContentReady
A function that is executed when the widget's content is ready and each time the content is changed.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only when using Knockout. |
If data displayed by the widget is specified using a DataSource instance, the contentReady event fires each time the load() method of the DataSource instance is called, as well as when the widget content is ready or an appointment is modified.
onDisposing
A function that is executed before the widget is disposed of.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
onInitialized
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onOptionChanged
Name | Type | Description |
---|---|---|
model |
The model data. Available only if you use Knockout. |
|
fullName |
The path to the modified option that includes all parent options. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
name |
The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into. |
|
value | any |
The modified option's new value. |
recurrenceEditMode
This option accepts the following values.
"dialog"
Displays a dialog that suggests to a user to choose between editing the entire series or only the current appointment."series"
Enables an end-user to edit only the entire appointment series."occurrence"
Enables an end-user to edit only the current appointment.
Use the SchedulerRecurrenceEditMode
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Dialog
, Series
, and Occurrence
.
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.
If the option value is null, the widget does not support recurring appointments. It displays only initial appointments without generating appointment series.
See Also
remoteFiltering
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.
resources[]
Each element of this array is an object that defines a resource kind - a room, a car or any other resource kind. A resource kind object must have at least the following fields.
dataSource
Specify the available resources of this kind (room1, room2, etc.).fieldExpr
The name of the appointment object field that specifies a resource of this kind (e.g., "room").
There are more fields that can be specified within a resource kind object. They are listed below. For details on how to define a resource and assign it to scheduler appointments, refer to the Resources article.
See Also
- Demos: Resources | Grouping by Resources
- Resources
rtlEnabled
When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.
DevExpress.config({ rtlEnabled: true });
See Also
- Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors
selectedCellData
This array contains objects with the following structure:
{ startDate: Date, endDate: Date, allDay: Boolean, groups: { // present if grouping is enabled resourceKind: "resourceValue" // for example, room: "101" } }
See Also
showAllDayPanel
Specifies the "All-day" panel's visibility. Setting this option to false hides the panel along with the all-day appointments.
startDateTimeZoneExpr
Specifies the name of the data source item field that defines the timezone of the appointment start date.
startDayHour
This option applies to all views at once. To override it for a specific view, set the same option in the view's configuration object.
tabIndex
The value of this option will be passed to the tabindex
attribute of the HTML element that underlies the widget.
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
See Also
timeZone
By default, the scheduler displays appointments in the current timezone. To define the timezone, specify the timeZone option.
The list of supported timezones is available in the list of IANA time zones.
See Also
views[]
Specifies and configures the views to be available in the view switcher.
This option accepts an array of strings and objects:
String
A view name. Use a string if the view does not need customization, but should be available in the view switcher.Object
An individual view's configuration. Set the type option to specify the view to which the configuration should apply. This documentation section describes available options. The options set for an individual view have a higher priority than the same options set on the root level for all views.
To specify the default view, use the currentView option.
Use the SchedulerViewType
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Day
, Week
, WorkWeek
, Month
, TimelineDay
, TimelineWeek
, TimelineWorkWeek
, TimelineMonth
, and Agenda
.
width
This option accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptwidth: function() { return window.innerWidth / 1.5; }
If you have technical questions, please create a support ticket in the DevExpress Support Center.