UI Widgets Scheduler

A widget that displays scheduled data using different views and provides the capability to load, add and edit appointments.

The dxScheduler widget allows appointments from a local or remote storage to be scheduled and displayed. Appointments can be shown using one of the views provided by the scheduler widget. For instance, in the 'day' view, the widget displays a single day at a time with the appointments that are assigned to this day. In addition to different views, the widget allows you to create different types of appointments - recurring/non-recurring, time-limited/all-day, with/without resources.

You can create the widget using one of the following approaches.

  • jQuery
    Use the dxScheduler jQuery plug-in.

    HTML
    <div id="scheduler">
    JavaScript
    $("#scheduler").dxScheduler({
        dataSource: schedulerDataSource
    });
  • Knockout
    Add a div element and apply the dxScheduler binding to this element.

    HTML
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource
    }">
    </div>
  • Angular
    Add a div element and apply the dx-scheduler directive to this element.

    HTML
    <div dx-scheduler="{
        dataSource: schedulerDataSource
    }">
    </div>

Note that DevExtreme widgets require you to link the jQuery and Globalize libraries to your application. If you use the Knockout or Angular approach, the Knockout or Angular library is also required.

See Also

The dataSource option takes on an array of appointment objects, as well as the DataSource object that requests appointment data from the associated Store (local, OData or a custom one). The appointment objects loaded to the widget's data source may have a particular set of fields that allow the widget to use a default appointment template. In case of custom data source fields, you can define a custom template for displaying appointments.

See Also

Refer to the Scheduler UI Widgets guides for more information on working with the dxScheduler widget.

View Demo

Watch Video

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: currentDate,
            height: 650
        }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    },
    {
        text: 'Book Flights to San Fran for Sales',
        startDate: new Date(2015, 4, 25, 12, 0),
        endDate: new Date(2015, 4, 25, 13, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Final Budget Review',
        startDate: new Date(2015, 4, 26, 12, 0),
        endDate: new Date(2015, 4, 26, 13, 30)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Approve New On-line Marketing Strategy',
        startDate: new Date(2015, 4, 27, 12, 0),
        endDate: new Date(2015, 4, 27, 14, 0)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Create Icons for Website',
        startDate: new Date(2015, 4, 29, 10, 0),
        endDate: new Date(2015, 4, 29, 11, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 12, 20),
        endDate: new Date(2015, 4, 29, 14, 0)
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2015, 4, 25);
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
<div class="demo-page">
    <div class="wrapper">
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: new Date(2015, 4, 25),
            height: 650
        }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    },
    {
        text: 'Book Flights to San Fran for Sales',
        startDate: new Date(2015, 4, 25, 12, 0),
        endDate: new Date(2015, 4, 25, 13, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Final Budget Review',
        startDate: new Date(2015, 4, 26, 12, 0),
        endDate: new Date(2015, 4, 26, 13, 30)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Approve New On-line Marketing Strategy',
        startDate: new Date(2015, 4, 27, 12, 0),
        endDate: new Date(2015, 4, 27, 14, 0)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Create Icons for Website',
        startDate: new Date(2015, 4, 29, 10, 0),
        endDate: new Date(2015, 4, 29, 11, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 12, 20),
        endDate: new Date(2015, 4, 29, 14, 0)
    }
];
var myViewModel = {
    schedulerData: appointments
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
<div class="demo-page">
    <div class="wrapper">
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    },
    {
        text: 'Book Flights to San Fran for Sales',
        startDate: new Date(2015, 4, 25, 12, 0),
        endDate: new Date(2015, 4, 25, 13, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Final Budget Review',
        startDate: new Date(2015, 4, 26, 12, 0),
        endDate: new Date(2015, 4, 26, 13, 30)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Approve New On-line Marketing Strategy',
        startDate: new Date(2015, 4, 27, 12, 0),
        endDate: new Date(2015, 4, 27, 14, 0)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Create Icons for Website',
        startDate: new Date(2015, 4, 29, 10, 0),
        endDate: new Date(2015, 4, 29, 11, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 12, 20),
        endDate: new Date(2015, 4, 29, 14, 0)
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2015, 4, 25),
    height: 650
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}

Configuration

An object defining configuration options for the widget.

Methods

This section describes methods used to manipulate the widget.

Events

This section describes events exposed by this widget.

Default Appointment Template

This section lists the fields that are used in a default template for scheduler appointments.

By default, a predefined appointment template is applied to display scheduler appointments. This template is based on certain fields of the data source provided for the widget. Below is the list of these fields. If the default appointment template is not appropriate for your task, implement a custom appointment template based on these or other fields of your data source.

See Also