All docs
V24.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery Scheduler - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The Scheduler component emulates the user interface of Calendar applications on Windows or Mac OS.

This tutorial shows you the basics of Scheduler configuration. The preview below shows the expected result:

This article breaks the setup procedure into a series of configuration steps. We recommend that you follow the sequence, although you can skip some steps and revisit them later. You can also download the complete code from the following GitHub repository: getting-started-with-scheduler.

Create a Scheduler

Add DevExtreme to your jQuery application and use the following code to create a Scheduler:

index.js
index.html
index.css
  • $(function() {
  • $("#scheduler").dxScheduler({
  • // Configuration goes here
  • });
  • });
  • <html>
  • <head>
  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  • <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" />
  • <link rel="stylesheet" href="index.css">
  •  
  • <script src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script>
  • <script src="index.js"></script>
  • </head>
  • <body class="dx-viewport">
  • <div id="scheduler"></div>
  • </body>
  • </html>
  • #scheduler {
  • height: 600px;
  • }

Bind the Scheduler to Data

The Scheduler can load and update data from these data source types:

Use the dataSource property to specify a data source. In this tutorial, we use a local array.

Once you assign the data source, you need to map field values to appointment attributes. If data objects include fields that match the predefined structure, the Scheduler recognizes them automatically and displays appointments without further configuration. To map other fields, use ...Expr properties. In this tutorial, the startDate and endDate fields are recognized automatically, whereas other field names are specified in the textExpr, allDayExpr, and recurrenceRuleExpr properties.

index.js
data.js
index.html
  • $(function() {
  • $("#scheduler").dxScheduler({
  • dataSource: appointments,
  • textExpr: "title",
  • allDayExpr: "dayLong",
  • recurrenceRuleExpr: "recurrence"
  • });
  • });
  • const appointments = [
  • {
  • title: "Install New Database",
  • startDate: new Date("2021-05-23T08:45:00.000Z"),
  • endDate: new Date("2021-05-23T09:45:00.000Z")
  • }, {
  • title: "Create New Online Marketing Strategy",
  • startDate: new Date("2021-05-24T09:00:00.000Z"),
  • endDate: new Date("2021-05-24T11:00:00.000Z")
  • }, {
  • title: "Upgrade Personal Computers",
  • startDate: new Date("2021-05-25T10:15:00.000Z"),
  • endDate: new Date("2021-05-25T13:30:00.000Z")
  • }, {
  • title: "Customer Workshop",
  • startDate: new Date("2021-05-26T08:00:00.000Z"),
  • endDate: new Date("2021-05-26T10:00:00.000Z"),
  • dayLong: true,
  • recurrence: "FREQ=WEEKLY;BYDAY=TU,FR;COUNT=10"
  • }, {
  • title: "Prepare Development Plan",
  • startDate: new Date("2021-05-27T08:00:00.000Z"),
  • endDate: new Date("2021-05-27T10:30:00.000Z")
  • }, {
  • title: "Testing",
  • startDate: new Date("2021-05-23T09:00:00.000Z"),
  • endDate: new Date("2021-05-23T10:00:00.000Z"),
  • recurrence: "FREQ=WEEKLY;INTERVAL=2;COUNT=2"
  • }, {
  • title: "Meeting of Instructors",
  • startDate: new Date("2021-05-24T10:00:00.000Z"),
  • endDate: new Date("2021-05-24T11:15:00.000Z"),
  • recurrence: "FREQ=DAILY;BYDAY=WE;UNTIL=20211001"
  • }, {
  • title: "Recruiting students",
  • startDate: new Date("2021-05-25T08:00:00.000Z"),
  • endDate: new Date("2021-05-25T09:00:00.000Z"),
  • recurrence: "FREQ=YEARLY",
  • }, {
  • title: "Monthly Planning",
  • startDate: new Date("2021-05-26T09:30:00.000Z"),
  • endDate: new Date("2021-05-26T10:45:00.000Z"),
  • recurrence: "FREQ=MONTHLY;BYMONTHDAY=28;COUNT=1"
  • }, {
  • title: "Open Day",
  • startDate: new Date("2021-05-27T09:30:00.000Z"),
  • endDate: new Date("2021-05-27T19:00:00.000Z"),
  • }
  • ];
  • <html>
  • <head>
  • <!-- ... -->
  • <script src="data.js"></script>
  • </head>
  • <!-- ... -->
  • </html>

Run the code and ensure that the Scheduler properly displays all appointments.

Set the Current Date

To specify the current date, use the currentDate property:

index.js
  • $(function() {
  • $("#scheduler").dxScheduler({
  • //...
  • currentDate: new Date(2021, 4, 25),
  • });
  • });

Configure Views

The Scheduler supports the following view types:

Use the views[] array to configure views. This array can contain strings (view types) and objects (view configurations). Use a string if the default view configuration suits you. Otherwise, declare an object that configures the view and specify the type and other properties within it. In the code below, the views[] array contains the Day, Week, and Month views. We specify the startDayHour and endDayHour properties for Day and Week; Month uses its default configuration.

To specify the view displayed initially, set the currentView property. In the following code, the initial view is Week.

index.js
  • $(function() {
  • $("#scheduler").dxScheduler({
  • // ...
  • views: [{
  • type: "day",
  • startDayHour: 10,
  • endDayHour: 22
  • }, {
  • type: "week",
  • startDayHour: 10,
  • endDayHour: 22
  • },
  • "month"
  • ],
  • currentView: "week"
  • });
  • });

Edit Appointments

Users can manage appointments in the following ways:

  • Add new appointments

  • Update appointments in an edit form

  • Resize an appointment to change its duration

  • Drag and drop an appointment to reschedule it

  • Remove appointments

Edit operations are enabled (the default setting). To disable an individual operation, set the corresponding property in the editing object to false. In this tutorial, we use the allowDragging property to disable appointment drag-and-drop.

index.js
  • $(function() {
  • $("#scheduler").dxScheduler({
  • // ...
  • editing: {
  • allowDragging: false
  • },
  • });
  • });

Time Zone Support

The Scheduler displays all appointments in the client time zone. To change this default behavior, specify a different time zone in the timeZone property. It accepts values from the IANA database. This tutorial sets the time zone to "Europe/Berlin".

Users can edit the time zones of individual appointments. To enable this functionality, set the editing.allowTimeZoneEditing property to true.

index.js
  • $(function() {
  • $("#scheduler").dxScheduler({
  • // ...
  • editing: {
  • // ...
  • allowTimeZoneEditing: true
  • },
  • timeZone: "Europe/Berlin"
  • });
  • });

Enable Adaptive Mode

The Scheduler can adapt its interface to small screens. To enable this behavior, set the adaptivityEnabled property to true. See the following demo description for a full list of adaptability features: Adaptability.

index.js
  • $(function() {
  • $("#scheduler").dxScheduler({
  • // ...
  • adaptivityEnabled: true
  • });
  • });

For further information on the Scheduler component, refer to the following resources: