React Scheduler - Overview

The Scheduler is a UI component that represents scheduled data and allows a user to manage it. The following image is an element map. You can click the desired element to navigate to its dedicated article.

DevExtreme HTML5 JavaScript Scheduler

View Switcher Resource Headers All-Day Panel Appointment Tooltip Appointment Appointment Appointment Appointment Current Time Indicator Timetable Timetable Drop-Down List Cell Overflow Indicator

View Demo

The following code adds the Scheduler UI component to your page. The simplest configuration requires only a dataSource to be specified. In addition, you can define a date that should be initially displayed in the date navigator using the currentDate property.

jQuery
JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: [{
            text: "Website Re-Design Plan",
            startDate: new Date("2016-04-25T09:30:00.000Z"),
            endDate: new Date("2016-04-25T11:30:00.000Z")
        }, {
            text: "Book Flights to San Fran for Sales Trip",
            startDate: new Date("2016-04-25T12:00:00.000Z"),
            endDate: new Date("2016-04-25T13:00:00.000Z")
        }, 
        // ...
        ],
        currentDate: new Date(2016, 4, 25)
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="appointments"
    [currentDate]="currentDate">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent  {
    appointments = [{
        text: "Website Re-Design Plan",
        startDate: new Date("2016-04-25T01:30:00.000Z"),
        endDate: new Date("2016-04-25T03:30:00.000Z")
    }, {
        text: "Book Flights to San Fran for Sales Trip",
        startDate: new Date("2016-04-25T09:00:00.000Z"),
        endDate: new Date("2016-04-25T10:00:00.000Z")
    }, 
    // ...
    ];
    currentDate = new Date(2016, 4, 25);
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScheduler
        :data-source="dataSource"
        :current-date="currentDate" />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxScheduler from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            currentDate: new Date(2016, 4, 25),
            dataSource: [{
                text: "Website Re-Design Plan",
                startDate: new Date("2016-04-25T09:30:00.000Z"),
                endDate: new Date("2016-04-25T11:30:00.000Z")
            }, {
                text: "Book Flights to San Fran for Sales Trip",
                startDate: new Date("2016-04-25T12:00:00.000Z"),
                endDate: new Date("2016-04-25T13:00:00.000Z")
            }, 
            // ...
            ]
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Scheduler from 'devextreme-react/scheduler';

const data = [{
    text: "Website Re-Design Plan",
    startDate: new Date("2016-04-25T09:30:00.000Z"),
    endDate: new Date("2016-04-25T11:30:00.000Z")
}, {
    text: "Book Flights to San Fran for Sales Trip",
    startDate: new Date("2016-04-25T12:00:00.000Z"),
    endDate: new Date("2016-04-25T13:00:00.000Z")
}, 
// ...
];

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource={data}
                defaultCurrentDate={new Date(2016, 4, 25)} />
        );
    }
}
export default App;

Each data source object represents an appointment to be scheduled and has a special structure. This structure should be similar to that described in the dataSource property. The fields listed below should be present in every appointment.

  • text
    The subject of an appointment.

  • startDate
    The start date of an appointment (includes time if needed).

  • endDate
    The end date of an appointment (includes time if needed).

If your appointments have a different structure, specify:

  • textExpr
    The data field that provides subjects for appointments.

  • startDateExpr
    The data field that provides start dates for appointments.

  • endDateExpr
    The data field that provides end dates for appointments.

jQuery
JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: [{ 
            subject: 'Meet with a customer', 
            from: new Date("2016-04-10T11:00:00.000Z"), 
            to: new Date("2016-04-10T13:00:00.000Z") 
        }, { 
            subject: 'Discuss results', 
            from: new Date("2016-05-11T12:00:00.000Z"), 
            to: new Date("2016-04-11T13:00:00.000Z") 
        }, 
        // ...
        ],
        textExpr: "subject",
        startDateExpr: "from",
        endDateExpr: "to"
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="appointments"
    textExpr="subject"
    startDateExpr="from"
    endDateExpr="to"
    [currentDate]="currentDate">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent  {
    appointments = [{ 
        subject: 'Meet with a customer', 
        from: new Date("2016-04-25T01:00:00.000Z"), 
        to: new Date("2016-04-25T03:00:00.000Z") 
    }, { 
        subject: 'Discuss results', 
        from: new Date("2016-05-25T09:00:00.000Z"), 
        to: new Date("2016-04-25T10:00:00.000Z") 
    }, 
    // ...
    ];
    currentDate = new Date(2016, 4, 25);
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScheduler
        :data-source="dataSource"
        text-expr="subject"
        start-date-expr="from"
        end-date-expr="to" />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxScheduler from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            currentDate: new Date(2016, 4, 25),
            dataSource: [{ 
                subject: 'Meet with a customer', 
                from: new Date("2016-04-10T11:00:00.000Z"), 
                to: new Date("2016-04-10T13:00:00.000Z") 
            }, { 
                subject: 'Discuss results', 
                from: new Date("2016-05-11T12:00:00.000Z"), 
                to: new Date("2016-04-11T13:00:00.000Z") 
            }, 
            // ...
            ]
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Scheduler from 'devextreme-react/scheduler';

const data = [{ 
    subject: 'Meet with a customer', 
    from: new Date("2016-04-10T11:00:00.000Z"), 
    to: new Date("2016-04-10T13:00:00.000Z") 
}, { 
    subject: 'Discuss results', 
    from: new Date("2016-05-11T12:00:00.000Z"), 
    to: new Date("2016-04-11T13:00:00.000Z") 
}, 
// ...
];

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource={data}
                textExpr="subject"
                startDateExpr="from"
                endDateExpr="to" />
        );
    }
}
export default App;
See Also