Vue Scheduler - Getting Started

jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
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 adds DevExtreme Scheduler to a page, binds the component to data, and configures core Scheduler features.

Each section covers a single configuration step. The complete code is available in the following GitHub repository:

View on GitHub

Create a Scheduler

jQuery

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/26.1.3/css/dx.light.css" />
        <link rel="stylesheet" href="index.css">

        <script src="https://cdn3.devexpress.com/jslib/26.1.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;
}
ASP.NET Core Controls

Add DevExtreme to your ASP.NET Core application and use the following code snippet to create a Scheduler:

Index.cshtml
@(Html.DevExtreme().Scheduler()
    .ID("scheduler")
)
Angular

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

app.component.html
app.component.ts
app.component.css
<dx-scheduler id="scheduler">
    <!-- Configuration goes here -->
</dx-scheduler>
import { Component } from '@angular/core';
import { DxSchedulerModule } from 'devextreme-angular/ui/scheduler';

@Component({ 
    imports: [DxSchedulerModule],
    // ...
}) 
export class AppComponent { 

}
#scheduler {
    height: 600px;
}
Vue

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

App.vue
<template> 
    <DxScheduler id="scheduler>
        <!-- Configuration goes here -->
    </DxScheduler>
</template> 

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxScheduler } from 'devextreme-vue/scheduler';

</script>

<style>
#scheduler {
    height: 600px;
}
</style>
React

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

App.tsx
App.css
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import './App.css';

import { Scheduler } from 'devextreme-react/scheduler';

export default function App() {
    return (
        <Scheduler id="scheduler">
            {/* Configuration goes here */}
        </Scheduler>
    );
}
#scheduler {
    height: 600px;
}

Bind the Scheduler to Data

The DevExtreme Scheduler supports the following data source types:

To bind Scheduler to data, configure the dataSource property. Specify data field names following the structure of the SchedulerAppointment interface. To use custom field names, specify the following properties:

jQuery
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>
ASP.NET Core Controls
Index.cshtml
SchedulerDataController.cs
Appointment.cs
SchedulerData.cs
@(Html.DevExtreme().Scheduler()
    .DataSource(d => d
        .Mvc().Controller("SchedulerData")
        .LoadAction("Get")
        .InsertAction("Insert")
        .UpdateAction("Update")
        .DeleteAction("Delete")
        .Key("ID")
    )
    .TextExpr("Title")
    .StartDateExpr("StartDate")
    .EndDateExpr("EndDate")
    .AllDayExpr("DayLong")
    .RecurrenceRuleExpr("Recurrence")
    .RecurrenceExceptionExpr("RecurrenceException")
)
public class SchedulerDataController : Controller {
    [HttpGet]
    public object Get(DataSourceLoadOptions loadOptions) {
        return DataSourceLoader.Load(SchedulerData.Appointments, loadOptions);
    }

    [HttpPost]
    public IActionResult Insert(string values) {
        var appointment = new Appointment();
        PopulateAppointment(appointment, values);
        // ...
        SchedulerData.Appointments.Add(appointment);
        return Ok(appointment);
    }

    [HttpPut]
    public IActionResult Update(int key, string values) {
        var appointment = SchedulerData.Appointments.FirstOrDefault(e => e.ID == key);
        // ...
        PopulateAppointment(appointment, values);
        return Ok(appointment);
    }

    [HttpDelete]
    public IActionResult Delete(int key) {
        var appointment = SchedulerData.Appointments.FirstOrDefault(e => e.ID == key);
        // ...
        SchedulerData.Appointments.Remove(appointment);
        return NoContent();
    }

    private static void PopulateAppointment(Appointment appointment, string values) {
        using var document = JsonDocument.Parse(values);
        foreach (var property in document.RootElement.EnumerateObject()) {
            switch (property.Name) {
                case nameof(Appointment.Title):
                    appointment.Title = property.Value.GetString();
                    break;
                // ...
            }
        }
    }
}
namespace ASP_NET_Core.Models;
public class Appointment {
    public int ID { get; set; }
    public string Title { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public bool? DayLong { get; set; }
    public string? Recurrence { get; set; }
    public string? RecurrenceException { get; set; }
}
namespace ASP_NET_Core.Models;
static class SchedulerData {
    public static List<Appointment> Appointments = [
        new Appointment {
            ID = 1,
            Title = "Install New Database",
            StartDate = new DateTime(2021, 5, 23, 8, 45, 0, DateTimeKind.Utc),
            EndDate = new DateTime(2021, 5, 23, 9, 45, 0, DateTimeKind.Utc),
        },
        new Appointment {
            ID = 2,
            Title = "Create New Online Marketing Strategy",
            StartDate = new DateTime(2021, 5, 24, 9, 0, 0, DateTimeKind.Utc),
            EndDate = new DateTime(2021, 5, 24, 11, 0, 0, DateTimeKind.Utc),
        },
        new Appointment {
            ID = 3,
            Title = "Upgrade Personal Computers",
            StartDate = new DateTime(2021, 5, 25, 10, 15, 0, DateTimeKind.Utc),
            EndDate = new DateTime(2021, 5, 25, 13, 30, 0, DateTimeKind.Utc),
        },
        new Appointment {
            ID = 4,
            Title = "Customer Workshop",
            StartDate = new DateTime(2021, 5, 26, 8, 0, 0, DateTimeKind.Utc),
            EndDate = new DateTime(2021, 5, 26, 10, 0, 0, DateTimeKind.Utc),
            DayLong = true,
            Recurrence = "FREQ=WEEKLY;BYDAY=TU,FR;COUNT=10",
        },
        new Appointment {
            ID = 5,
            Title = "Prepare Development Plan",
            StartDate = new DateTime(2021, 5, 27, 8, 0, 0, DateTimeKind.Utc),
            EndDate = new DateTime(2021, 5, 27, 10, 30, 0, DateTimeKind.Utc),
        },
        new Appointment {
            ID = 6,
            Title = "Testing",
            StartDate = new DateTime(2021, 5, 23, 9, 0, 0, DateTimeKind.Utc),
            EndDate = new DateTime(2021, 5, 23, 10, 0, 0, DateTimeKind.Utc),
            Recurrence = "FREQ=WEEKLY;INTERVAL=2;COUNT=2",
        },
        new Appointment {
            ID = 7,
            Title = "Meeting of Instructors",
            StartDate = new DateTime(2021, 5, 24, 10, 0, 0, DateTimeKind.Utc),
            EndDate = new DateTime(2021, 5, 24, 11, 15, 0, DateTimeKind.Utc),
            Recurrence = "FREQ=DAILY;BYDAY=WE;UNTIL=20211001",
        },
        new Appointment {
            ID = 8,
            Title = "Recruiting students",
            StartDate = new DateTime(2021, 5, 25, 8, 0, 0, DateTimeKind.Utc),
            EndDate = new DateTime(2021, 5, 25, 9, 0, 0, DateTimeKind.Utc),
            Recurrence = "FREQ=YEARLY",
        },
        new Appointment {
            ID = 9,
            Title = "Monthly Planning",
            StartDate = new DateTime(2021, 5, 26, 9, 30, 0, DateTimeKind.Utc),
            EndDate = new DateTime(2021, 5, 26, 10, 45, 0, DateTimeKind.Utc),
            Recurrence = "FREQ=MONTHLY;BYMONTHDAY=28;COUNT=1",
        },
        new Appointment {
            ID = 10,
            Title = "Open Day",
            StartDate = new DateTime(2021, 5, 27, 9, 30, 0, DateTimeKind.Utc),
            EndDate = new DateTime(2021, 5, 27, 19, 0, 0, DateTimeKind.Utc),
        },
    ];
}
Angular
app.component.html
app.component.ts
app.service.ts
<dx-scheduler
    [dataSource]="appointments"
    textExpr="title"
    allDayExpr="dayLong"
    recurrenceRuleExpr="recurrence">
</dx-scheduler>
import { Component } from '@angular/core'; 
import { Appointment, AppService } from './app.service';

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'],
    providers: [AppService]
}) 
export class AppComponent { 
    appointments: Appointment[];

    constructor(service: AppService) {
        this.appointments = service.getAppointments();
    }
}
import { Injectable } from '@angular/core';

export class Appointment {
    title: string;
    startDate: Date;
    endDate: Date;
    dayLong?: boolean;
    recurrence?: string;
}

const appointments: Appointment[] = [
    {
        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"),
    }
];

@Injectable({
    providedIn: 'root'
})
export class AppService {
    getAppointments(): Appointment[] {
        return appointments;
    }
}
Vue
App.vue
data.js
<template> 
    <DxScheduler
        :data-source="appointments"
        text-expr="title"
        all-day-expr="dayLong"
        recurrence-rule-expr="recurrence">
    </DxScheduler>
</template> 

<script setup lang="ts">
import { appointments } from './data.js';
// ...

</script>
export 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"),
    }
];
React
App.tsx
data.js
import { appointments } from './data.js';
// ...

export default function App() {
    return (
        <Scheduler
            dataSource={appointments}
            textExpr="title"
            allDayExpr="dayLong"
            recurrenceRuleExpr="recurrence">
        </Scheduler>
    );
}
export 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"),
    }
];

Set the Current Date

Use currentDate to specify the date displayed in the Scheduler:

jQuery
index.js
$(function() { 
    $("#scheduler").dxScheduler({
        //...
        currentDate: new Date(2021, 4, 25),
    });
});
ASP.NET Core Controls
Index.cshtml
@(Html.DevExtreme().Scheduler()
    .CurrentDate(new DateTime(2021, 5, 25))
    // ...
)
Angular
app.component.html
app.component.ts
<dx-scheduler
    [(currentDate)]="currentDate">
</dx-scheduler>
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    currentDate: Date = new Date(2021, 4, 25);
}
Vue
App.vue
<template> 
    <DxScheduler
        v-model:current-date="currentDate">
    </DxScheduler>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// ...

const currentDate = ref<Date>(new Date(2021, 4, 25));
</script>
React
App.tsx
// ...
import { useCallback, useState } from 'react';

function App() {
    const [currentDate, setCurrentDate] = useState(new Date(2021, 4, 25));
    const handlePropertyChange = useCallback((e) => {
        if(e.name === 'currentDate') {
            setCurrentDate(e.value);
        }
    }, [])

    return (
        <Scheduler
            currentDate={currentDate}
            onOptionChanged={handlePropertyChange}>
        </Scheduler>
    );
}

export default App;

Configure Views

Read Tutorial: View Types Read Tutorial: Customize Individual Views

DevExtreme Scheduler ships with the following view types:

jQuery

Use the views[] array to define and customize Scheduler views. Add views as configuration objects to specify view options. To use default options, add type values as strings to the views[] array.

Angular

Specify the views[] array to define and customize Scheduler views. Specify each view's type value.

Vue

Specify the views[] array to define and customize Scheduler views. Specify each view's type value.

React

Specify the views[] array to define and customize Scheduler views. Specify each view's type value.

This example specifies the following views: Day, Week, and Month. Day and Week views use custom startDayHour and endDayHour values. The Month view uses the default configuration.

You can also specify the initial Scheduler view using currentView. This example initializes the component in the Week view:

jQuery
index.js
$(function() { 
    $("#scheduler").dxScheduler({ 
        // ...
        views: [{
            type: "day",
            startDayHour: 10,
            endDayHour: 22
        }, {
            type: "week",
            startDayHour: 10,
            endDayHour: 22
        },
        "month"
        ],
        currentView: "week"
    });
});
ASP.NET Core Controls
Index.cshtml
@(Html.DevExtreme().Scheduler()
    .Views(v => {
        v.Add()
            .Type(SchedulerViewType.Day)
            .StartDayHour(10)
            .EndDayHour(22);
        v.Add()
            .Type(SchedulerViewType.Week)
            .StartDayHour(10)
            .EndDayHour(22);
        v.Add()
            .Type(SchedulerViewType.Month);
    })
    .CurrentView(SchedulerViewType.Week)
    // ...
)
Angular
app.component.html
<dx-scheduler
    currentView="week">
    <dxi-scheduler-view
        type="day"
        [startDayHour]="10"
        [endDayHour]="22">
    </dxi-scheduler-view>
    <dxi-scheduler-view
        type="week"
        [startDayHour]="10"
        [endDayHour]="22">
    </dxi-scheduler-view>
    <dxi-scheduler-view type="month"></dxi-scheduler-view>
</dx-scheduler>
Vue
App.vue
<template> 
    <DxScheduler
        current-view="week">
        <DxView
            type="day"
            :start-day-hour="10"
            :end-day-hour="22"
        />
        <DxView
            type="week"
            :start-day-hour="10"
            :end-day-hour="22"
        />
        <DxView type="month" />
    </DxScheduler>
</template> 

<script setup lang="ts">
import { DxScheduler, DxView } from 'devextreme-vue/scheduler';

</script>
React
App.tsx
import { Scheduler, View } from 'devextreme-react/scheduler';

export default function App() {
    return (
        <Scheduler
            defaultCurrentView="week">
            <View
                type="day"
                startDayHour={10}
                endDayHour={22}
            />
            <View
                type="week"
                startDayHour={10}
                endDayHour={22}
            />
            <View type="month" />
        </Scheduler>
    );
}

Edit Appointments

Read Tutorial: Add Appointments Read Tutorial: Update Appointments Read Tutorial: Delete Appointments

Scheduler allows users to add, update, and delete appointments. All editing operations are enabled in the default configuration. To disable specific operations, configure the editing properties.

This tutorial disables allowDragging:

jQuery
index.js
$(function() { 
    $("#scheduler").dxScheduler({ 
        // ...
        editing: {
            allowDragging: false
        },
    });
});
ASP.NET Core Controls
Index.cshtml
@(Html.DevExtreme().Scheduler()
    .Editing(e => e
        .AllowDragging(false)
    )
    // ...
)
Angular
app.component.html
<dx-scheduler>
    <dxo-scheduler-editing
        [allowDragging]="false">
    </dxo-scheduler-editing>
</dx-scheduler>
Vue
App.vue
<template> 
    <DxScheduler>
        <DxEditing
            :allow-dragging="false"
        />
    </DxScheduler>
</template> 

<script setup lang="ts">
import { DxScheduler, DxEditing } from 'devextreme-vue/scheduler';

</script>
React
App.tsx
import { Scheduler, Editing } from 'devextreme-react/scheduler';
// ...

export default function App() {
    return (
        <Scheduler>
            <Editing
                allowDragging={false}
            />
        </Scheduler>
    );
}

When users add, update, or delete appointments, Scheduler calls the following event handlers:

You can use these handlers to extend Scheduler's functionality. The following example configures onAppointmentAdding and onAppointmentUpdating to prevent recurring appointments from sharing cells with other appointments:

View on GitHub

Time Zone Support

Read Tutorial: Time Zone Support

Scheduler displays all appointments in the client time zone in the default configuration. To use a different time zone, specify the timeZone property. This option accepts IANA time zone identifiers. This tutorial sets the time zone to "Europe/Berlin".

Users can also edit the time zones of individual appointments when editing.allowTimeZoneEditing is enabled:

jQuery
index.js
$(function() { 
    $("#scheduler").dxScheduler({ 
        // ...
        editing: {
            // ...
            allowTimeZoneEditing: true
        },
        timeZone: "Europe/Berlin"
    });
});
ASP.NET Core Controls
Index.cshtml
@(Html.DevExtreme().Scheduler()
    .Editing(e => e
        .AllowTimeZoneEditing(true)
    )
    // ...
)
Angular
app.component.html
<dx-scheduler
    timeZone="Europe/Berlin"
>
    <dxo-scheduler-editing
        [allowTimeZoneEditing]="true"
    ></dxo-scheduler-editing>
    <!-- ... -->
</dx-scheduler>
Vue
App.vue
<template> 
    <DxScheduler
        time-zone="Europe/Berlin"
    >
        <DxEditing
            :allow-time-zone-editing="true"
        />
        <!-- ... -->
    </DxScheduler>
</template>
React
App.tsx
// ...
export default function App() {
    return (
        <Scheduler
            timeZone="Europe/Berlin"
        >
            <Editing
                allowTimeZoneEditing={true}
            />
            {/* ... */}
        </Scheduler>
    );
}

Enable Adaptive Mode

The Scheduler interface can adapt to small screens. Set adaptivityEnabled to true to enable this capability. For more information, see the following demo:

Scheduler - Adaptability Demo

jQuery
index.js
$(function() { 
    $("#scheduler").dxScheduler({
        // ...
        adaptivityEnabled: true
    });
});
ASP.NET Core Controls
Index.cshtml
@(Html.DevExtreme().Scheduler()
    .AdaptivityEnabled(true)
    // ...
)
Angular
app.component.html
<dx-scheduler
    [adaptivityEnabled]="true"
></dx-scheduler>
Vue
App.vue
<template> 
    <DxScheduler
        :adaptivity-enabled="true"
    />
</template>
React
App.tsx
// ...
export default function App() {
    return (
        <Scheduler
            adaptivityEnabled={true}
        />
    );
}

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