Scheduler Configuration

An object defining configuration options for the widget.

accessKey

Specifies a shortcut key that sets focus on the widget element.

Type: String
Default Value: null

The accessKey option value is passed to the accesskey attribute of the actual HTML element of 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.

Type: String
Default Value: 'allDay'

appointmentTemplate

The template to be used for rendering appointments.

Type: String| function |DOM Node|jQuery
Function parameters:
itemData: Object
The appointment object to be rendered.
itemIndex: Number
The index of the appointment to be rendered.
itemElement: jQuery
An HTML element of the appointment to be rendered.
Return Value: String|DOM Node|jQuery
A template name or a template container.
Default Value: 'item'

NOTE: A binding context of an appointment template is the data source object that corresponds to the currently rendered appointment. So, you can bind template elements to the appointment object's fields directly (see the code above). To access another binding context within an appointment template, use Knockout/Angular binding variables.

See Also
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,
            appointmentTemplate: 'appointment',
            height: 650
        }">
            <div data-options="dxTemplate: {name: 'appointment'}" style="padding: 0;">
                <div class="appointment-header">{{text}}</div>
                <div class="appointment-time">{{from}} - {{to}}</div>
            </div>
        </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 = new DevExpress.data.DataSource({
        store: appointments,
        map: function (dataItem) {
            dataItem.from = dataItem.startDate.getHours() + ":" + dataItem.startDate.getMinutes() + (dataItem.startDate.getMinutes() < 10 ? "0" : "");
            dataItem.to = dataItem.endDate.getHours() + ":" + dataItem.endDate.getMinutes() + (dataItem.endDate.getMinutes() < 10 ? "0" : "");
            return dataItem;
        }
    });
    $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;
}
.appointment-header{
    background-color: yellow;
    border-top: solid 1px blue;
    padding: 5px;
    text-align: center;
    color: blue;
    width: 100%;
    white-space: normal;
    font-size: small;
}
.appointment-time{
    width: 100%;
    text-align: center;
    padding: 5px;
}
<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),
            appointmentTemplate: 'appointment',
            height: 650
        }">
            <div data-options="dxTemplate: {name: 'appointment'}" style="padding: 0;">
                <div class="appointment-header" data-bind="text: text"></div>
                <div class="appointment-time"><span data-bind="text: from"></span> - <span data-bind="text: to"></span></div>
            </div>
        </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: new DevExpress.data.DataSource({
        store: appointments,
        map: function (dataItem) {
            dataItem.from = dataItem.startDate.getHours() + ":" + dataItem.startDate.getMinutes() + (dataItem.startDate.getMinutes() < 10 ? "0" : "");
            dataItem.to = dataItem.endDate.getHours() + ":" + dataItem.endDate.getMinutes() + (dataItem.endDate.getMinutes() < 10 ? "0" : "");
            return dataItem;
        }
    })
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.appointment-header{
    background-color: yellow;
    border-top: solid 1px blue;
    padding: 5px;
    text-align: center;
    color: blue;
    width: 100%;
    white-space: normal;
    font-size: small;
}
.appointment-time{
    width: 100%;
    text-align: center;
    padding: 5px;
}
<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: new DevExpress.data.DataSource({
        store: appointments,
        map: function (dataItem) {
            dataItem.from = dataItem.startDate.getHours() + ":" + dataItem.startDate.getMinutes() + (dataItem.startDate.getMinutes() < 10 ? "0" : "");
            dataItem.to = dataItem.endDate.getHours() + ":" + dataItem.endDate.getMinutes() + (dataItem.endDate.getMinutes() < 10 ? "0" : "");
            return dataItem;
        }
    }),
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2015, 4, 25),
    appointmentTemplate: function(itemData, itemIndex, itemElement){
        itemElement.css("padding", "0");
        itemElement.append("<div class='appointment-header'>" + itemData.text + "</div>");
        itemElement.append("<div class='appointment-time'>" + itemData.from + " - " + itemData.to + "</div>");
    },
    height: 650
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.appointment-header{
    background-color: yellow;
    border-top: solid 1px blue;
    padding: 5px;
    text-align: center;
    color: blue;
    width: 100%;
    white-space: normal;
    font-size: small;
}
.appointment-time{
    width: 100%;
    text-align: center;
    padding: 5px;
}

appointmentTooltipTemplate

The template to be used for rendering an appointment tooltip.

Type: String| function |DOM Node|jQuery
Function parameters:
appointmentData: Object
The appointment object whose tooltip should be rendered.
contentElement: jQuery
An HTML element of the appointment tooltip to be rendered.
Return Value: String|jQuery
A template name or a template container.
Default Value: 'appointmentTooltip'

NOTE: A binding context of an appointment tooltip template is the data source object that corresponds to the currently rendered appointment. So, you can bind template elements to the appointment object's fields directly. To access another binding context within an appointment tooltip template, use Knockout/Angular binding variables.

See Also

cellDuration

Specifies cell duration in minutes.

Type: Number
Default Value: 30

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <p>CellDuration:</p>
        <div ng-model="duration" dx-number-box="{
            min: 20,
            max: 120,
            step: 10,
            width: 100,
            showSpinButtons: true
        }"></div>
    </div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            cellDuration: 'duration'
        }
    }"></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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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.duration = 30;
    $scope.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:555px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <p>CellDuration:</p>
        <div data-bind="dxNumberBox: {
            min: 20,
            max: 120,
            step: 10,
            width: 100,
            showSpinButtons: true,
            value: duration
        }"></div>
    </div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        cellDuration: duration,
        currentDate: new Date(2015, 4, 25)
    }"></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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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 = {
    schedulerDataSource: appointments,
    duration: ko.observable(30)
};

ko.applyBindings(myViewModel);
.wrapper{
    height:555px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <p>CellDuration:</p>
        <div id="cellDurationSelector"></div>
    </div>
    <div id="scheduler"></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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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)
    }
];
$(function () {
    $("#scheduler").dxScheduler({
        dataSource: appointments,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    });
    $("#cellDurationSelector").dxNumberBox({
        min: 20,
        max: 120,
        step: 10,
        width: 100,
        value: 30,
        showSpinButtons: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('cellDuration', e.value);
        }
    });
});
.wrapper{
    height:555px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

currentDate

Specifies a date displayed on the current scheduler view by default.

Default Value: new Date()

This is the date which is displayed when rendering the widget. Although, an end-user can change the current date by using the Date Navigator.

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div class="dx-fieldset" style="width: 300px">
            <div class="dx-field">
                <div class="dx-field-label">currentDate</div>
                <div class="dx-field-value" ng-model="currentDate" dx-date-box="{
                    format: 'date'
                }"></div>
            </div>
        </div>
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            height: 650,
            bindingOptions: {
                currentDate: 'currentDate'
            }
        }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Meeting',
        startDate: new Date(2015, 4, 25, 10, 0),
        endDate: new Date(2015, 4, 25, 12, 30),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=MO"
    },
    {
        text: 'Report',
        startDate: new Date(2015, 4, 29, 12, 0),
        endDate: new Date(2015, 4, 29, 13, 0),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2"
    },
    {
        text: 'Summit',
        startDate: new Date(2015, 4, 27, 9, 0),
        allDay: true,
        recurrenceRule: "FREQ=MONTHLY;INTERVAL=1"
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date();
});
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 class="dx-fieldset" style="width: 300px">
            <div class="dx-field">
                <div class="dx-field-label">currentDate</div>
                <div class="dx-field-value" data-bind="dxDateBox: {
                    format: 'date',
                    value: currentDate
                }"></div>
            </div>
        </div>
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: currentDate,
            height: 650
        }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Meeting',
        startDate: new Date(2015, 4, 25, 10, 0),
        endDate: new Date(2015, 4, 25, 12, 30),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=MO"
    },
    {
        text: 'Report',
        startDate: new Date(2015, 4, 29, 12, 0),
        endDate: new Date(2015, 4, 29, 13, 0),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2"
    },
    {
        text: 'Summit',
        startDate: new Date(2015, 4, 27, 9, 0),
        allDay: true,
        recurrenceRule: "FREQ=MONTHLY;INTERVAL=1"
    }
];
var myViewModel = {
    schedulerData: appointments,
    currentDate: ko.observable(new Date())
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
<div class="demo-page">
    <div class="wrapper">
        <div class="dx-fieldset" style="width: 300px">
            <div class="dx-field">
                <div class="dx-field-label">currentDate</div>
                <div class="dx-field-value" id="dateSelector"></div>
            </div>
        </div>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Meeting',
        startDate: new Date(2015, 4, 25, 10, 0),
        endDate: new Date(2015, 4, 25, 12, 30),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=MO"
    },
    {
        text: 'Report',
        startDate: new Date(2015, 4, 29, 12, 0),
        endDate: new Date(2015, 4, 29, 13, 0),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2"
    },
    {
        text: 'Summit',
        startDate: new Date(2015, 4, 27, 9, 0),
        allDay: true,
        recurrenceRule: "FREQ=MONTHLY;INTERVAL=1"
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(),
    height: 650
});
$("#dateSelector").dxDateBox({
    value: new Date(),
    onValueChanged: function (e) {
        $("#myScheduler").dxScheduler("instance").option("currentDate", e.value);
    }
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}

currentView

Specifies the view used in the scheduler by default.

Type: String
Default Value: 'day'
Accepted Values: 'day' | 'week' | 'workWeek' | 'month' | 'timelineDay' | 'timelineWeek' | 'timelineWorkWeek'

Specify the views to be available in the scheduler's View Selector for end users in the views array. The default view used by the widget when rendering the scheduler is specified by the currentView option.
For more information on scheduler views, refer to the Views guide.

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div class="dx-fieldset" style="width: 300px">
            <div class="dx-field">
                <div class="dx-field-label">currentView</div>
                <div class="dx-field-value" ng-model="selectedView" dx-select-box="{
                    items: schedulerViews
                }"></div>
            </div>
        </div>
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            height: 650,
            views: ['day', 'week', 'workWeek', 'month'],
            bindingOptions: {
                currentView: 'selectedView'
            }
        }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Meeting',
        startDate: new Date(2015, 4, 25, 10, 0),
        endDate: new Date(2015, 4, 25, 12, 30),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=MO"
    },
    {
        text: 'Report',
        startDate: new Date(2015, 4, 29, 12, 0),
        endDate: new Date(2015, 4, 29, 13, 0),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2"
    },
    {
        text: 'Summit',
        startDate: new Date(2015, 4, 27, 9, 0),
        allDay: true,
        recurrenceRule: "FREQ=MONTHLY;INTERVAL=1"
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.schedulerViews = ["day", "week", "workWeek", "month"];
    $scope.selectedView = "day";
});
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 class="dx-fieldset" style="width: 300px">
            <div class="dx-field">
                <div class="dx-field-label">currentView</div>
                <div class="dx-field-value" data-bind="dxSelectBox: {
                    items: schedulerViews,
                    value: selectedView
                }"></div>
            </div>
        </div>
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            views: ['day', 'week', 'workWeek', 'month'],
            currentView: selectedView,
            height: 650
        }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Meeting',
        startDate: new Date(2015, 4, 25, 10, 0),
        endDate: new Date(2015, 4, 25, 12, 30),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=MO"
    },
    {
        text: 'Report',
        startDate: new Date(2015, 4, 29, 12, 0),
        endDate: new Date(2015, 4, 29, 13, 0),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2"
    },
    {
        text: 'Summit',
        startDate: new Date(2015, 4, 27, 9, 0),
        allDay: true,
        recurrenceRule: "FREQ=MONTHLY;INTERVAL=1"
    }
];
var myViewModel = {
    schedulerData: appointments,
    schedulerViews: ["day", "week", "workWeek", "month"],
    selectedView: ko.observable("day")
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
<div class="demo-page">
    <div class="wrapper">
        <div class="dx-fieldset" style="width: 300px">
            <div class="dx-field">
                <div class="dx-field-label">currentView</div>
                <div class="dx-field-value" id="viewSelector"></div>
            </div>
        </div>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Meeting',
        startDate: new Date(2015, 4, 25, 10, 0),
        endDate: new Date(2015, 4, 25, 12, 30),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=MO"
    },
    {
        text: 'Report',
        startDate: new Date(2015, 4, 29, 12, 0),
        endDate: new Date(2015, 4, 29, 13, 0),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2"
    },
    {
        text: 'Summit',
        startDate: new Date(2015, 4, 27, 9, 0),
        allDay: true,
        recurrenceRule: "FREQ=MONTHLY;INTERVAL=1"
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    views: ['day', 'week', 'workWeek', 'month'],
    currentView: 'day',
    height: 650
});
$("#viewSelector").dxSelectBox({
    items: ["day", "week", "workWeek", "month"],
    value: "day",
    onValueChanged: function (e) {
        $("#myScheduler").dxScheduler("instance").option("currentView", e.value);
    }
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}

dataSource

A data source used to fetch data to be displayed by the widget.

Default Value: null

If you access a data source containing dxScheduler appointments using a CustomStore, the function passed to the load option should support the dxScheduler field in addition to standard field set of the argument object. This field holds an object containing the following fields.

  • startDate
    Specifies the start date of the range of appointments to be loaded.

  • endDate
    Specifies the end date of the range of appointments to be loaded.

  • resources
    Specifies resources used to filter the appointments to be loaded.

JavaScript
var myDataSource = new data.DataSource({
    store: new data.CustomStore({
        load: function(options) {
            var result = $.Deferred();
            $.ajax({
                url: "/data/appointments",
                data: {
                    start: options.dxScheduler.startDate.getTime(),
                    end: options.dxScheduler.endDate.getTime(),
                    ownerid: options.dxScheduler.resources
                }
            }).done(function(response){
                result.resolve(response);
            });
            return result.promise();
        }
    })
});

NOTE: Filtering by date range and resources should also be implemented on the server.

You can assign an array directly to this option as well as use the Data Source object provided by the DevExtreme library.

To display appointments, a default template can be used. This template is based on the data source fields that are listed in the Default Item Template section of the widget's API. Alternatively, you can implement a custom item template.

See Also

View Demo

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 createAppointmentDate = function (day, hours, minutes) {
    var date = new Date();
    date.setDate(date.getDate() + 7 - date.getDay() + day);
    date.setHours(hours, minutes, 0);
    return date;
}
var appointments = [
    {
        text: 'Website Re-Design Plan',
        dayOfWeek: 1,
        startHour: 9,
        startMin: 0,
        lengthHour: 2,
        lengthMin: 30
    },
    {
        text: 'Book Flights to San Fran for Sales',
        dayOfWeek: 1,
        startHour: 12,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 0
    },
    {
        text: 'Approve Personal Computer Upgrade',
        dayOfWeek: 2,
        startHour: 10,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 0
    },
    {
        text: 'Final Budget Review',
        dayOfWeek: 2,
        startHour: 12,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 30
    },
    {
        text: 'Install New Database',
        dayOfWeek: 3,
        startHour: 9,
        startMin: 45,
        lengthHour: 1,
        lengthMin: 30
    },
    {
        text: 'Approve New On-line Marketing Strategy',
        dayOfWeek: 3,
        startHour: 12,
        startMin: 0,
        lengthHour: 2,
        lengthMin: 0
    },
    {
        text: 'Prepare Marketing Plan',
        dayOfWeek: 4,
        startHour: 11,
        startMin: 0,
        lengthHour: 2,
        lengthMin: 30
    },
    {
        text: 'Create Icons for Website',
        dayOfWeek: 5,
        startHour: 10,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 30
    },
    {
        text: 'Launch New Website',
        dayOfWeek: 5,
        startHour: 12,
        startMin: 20,
        lengthHour: 1,
        lengthMin: 40
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = new DevExpress.data.DataSource({
        store: appointments,
        map: function (dataItem) {
            var endHour = dataItem.startHour + dataItem.lengthHour;
            var endMin = dataItem.startMin + dataItem.lengthMin;
            while (endMin >= 60) {
                endMin -= 60;
                endHour++;
            }
            dataItem.startDate = createAppointmentDate(dataItem.dayOfWeek, dataItem.startHour, dataItem.startMin);
            dataItem.endDate = createAppointmentDate(dataItem.dayOfWeek, endHour, endMin);
            return dataItem;
        }
    });
    $scope.currentDate = createAppointmentDate(0, 0, 0);
});
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: currentDate,
            height: 650
        }"></div>
    </div>
</div>
var createAppointmentDate = function (day, hours, minutes) {
    var date = new Date();
    date.setDate(date.getDate() + 7 - date.getDay() + day);
    date.setHours(hours, minutes, 0);
    return date;
}
var appointments = [
    {
        text: 'Website Re-Design Plan',
        dayOfWeek: 1,
        startHour: 9,
        startMin: 0,
        lengthHour: 2,
        lengthMin: 30
    },
    {
        text: 'Book Flights to San Fran for Sales',
        dayOfWeek: 1,
        startHour: 12,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 0
    },
    {
        text: 'Approve Personal Computer Upgrade',
        dayOfWeek: 2,
        startHour: 10,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 0
    },
    {
        text: 'Final Budget Review',
        dayOfWeek: 2,
        startHour: 12,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 30
    },
    {
        text: 'Install New Database',
        dayOfWeek: 3,
        startHour: 9,
        startMin: 45,
        lengthHour: 1,
        lengthMin: 30
    },
    {
        text: 'Approve New On-line Marketing Strategy',
        dayOfWeek: 3,
        startHour: 12,
        startMin: 0,
        lengthHour: 2,
        lengthMin: 0
    },
    {
        text: 'Prepare Marketing Plan',
        dayOfWeek: 4,
        startHour: 11,
        startMin: 0,
        lengthHour: 2,
        lengthMin: 30
    },
    {
        text: 'Create Icons for Website',
        dayOfWeek: 5,
        startHour: 10,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 30
    },
    {
        text: 'Launch New Website',
        dayOfWeek: 5,
        startHour: 12,
        startMin: 20,
        lengthHour: 1,
        lengthMin: 40
    }
];
var myViewModel = {
    schedulerData: new DevExpress.data.DataSource({
        store: appointments,
        map: function (dataItem) {
            var endHour = dataItem.startHour + dataItem.lengthHour;
            var endMin = dataItem.startMin + dataItem.lengthMin;
            while(endMin >= 60){
                endMin -= 60;
                endHour++;
            }
            dataItem.startDate = createAppointmentDate(dataItem.dayOfWeek, dataItem.startHour, dataItem.startMin);
            dataItem.endDate = createAppointmentDate(dataItem.dayOfWeek, endHour, endMin);
            return dataItem;
        }
    }),
    currentDate: createAppointmentDate(0, 0, 0)
}
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 createAppointmentDate = function (day, hours, minutes) {
    var date = new Date();
    date.setDate(date.getDate() + 7 - date.getDay() + day);
    date.setHours(hours, minutes, 0);
    return date;
}
var appointments = [
    {
        text: 'Website Re-Design Plan',
        dayOfWeek: 1,
        startHour: 9,
        startMin: 0,
        lengthHour: 2,
        lengthMin: 30
    },
    {
        text: 'Book Flights to San Fran for Sales',
        dayOfWeek: 1,
        startHour: 12,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 0
    },
    {
        text: 'Approve Personal Computer Upgrade',
        dayOfWeek: 2,
        startHour: 10,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 0
    },
    {
        text: 'Final Budget Review',
        dayOfWeek: 2,
        startHour: 12,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 30
    },
    {
        text: 'Install New Database',
        dayOfWeek: 3,
        startHour: 9,
        startMin: 45,
        lengthHour: 1,
        lengthMin: 30
    },
    {
        text: 'Approve New On-line Marketing Strategy',
        dayOfWeek: 3,
        startHour: 12,
        startMin: 0,
        lengthHour: 2,
        lengthMin: 0
    },
    {
        text: 'Prepare Marketing Plan',
        dayOfWeek: 4,
        startHour: 11,
        startMin: 0,
        lengthHour: 2,
        lengthMin: 30
    },
    {
        text: 'Create Icons for Website',
        dayOfWeek: 5,
        startHour: 10,
        startMin: 0,
        lengthHour: 1,
        lengthMin: 30
    },
    {
        text: 'Launch New Website',
        dayOfWeek: 5,
        startHour: 12,
        startMin: 20,
        lengthHour: 1,
        lengthMin: 40
    }
];
$("#myScheduler").dxScheduler({
    dataSource: new DevExpress.data.DataSource({
        store: appointments,
        map: function (dataItem) {
            var endHour = dataItem.startHour + dataItem.lengthHour;
            var endMin = dataItem.startMin + dataItem.lengthMin;
            while (endMin >= 60) {
                endMin -= 60;
                endHour++;
            }
            dataItem.startDate = createAppointmentDate(dataItem.dayOfWeek, dataItem.startHour, dataItem.startMin);
            dataItem.endDate = createAppointmentDate(dataItem.dayOfWeek, endHour, endMin);
            return dataItem;
        }
    }),
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: createAppointmentDate(0, 0, 0),
    height: 650
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}

descriptionExpr

Specifies the name of the data source item field whose value holds the description of the corresponding appointment.

Type: String
Default Value: 'description'

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

editing

Specifies which editing operations an end-user can perform on appointments.

Type: Boolean|Object
Default Value: true

endDateExpr

Specifies the name of the data source item field that defines the ending of an appointment.

Type: String
Default Value: 'endDate'

endDayHour

Specifies an end hour in the scheduler view's time interval.

Type: Number
Default Value: 24

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <p class="label">startDayHour: </p>
            <p ng-model="startHour" dx-number-box="{
                width: 200,
                min: 0,
                max: 24,
                showSpinButtons: true
            }"></p>
        </div>
        <div>
            <p class="label">endDayHour: </p>
            <p ng-model="endHour" dx-number-box="{
                width: 200,
                min: 0,
                max: 24,
                showSpinButtons: true
            }"></p>
        </div>
    </div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        height: 500,
        bindingOptions: {
            startDayHour: 'startHour',
            endDayHour: 'endHour'
        }
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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.startHour = 8;
    $scope.endHour = 20;
    $scope.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:605px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.label{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
}
.option .dx-numberbox{
    display: inline-block;
    vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p class="label">startDayHour:</p>
            <p data-bind="dxNumberBox: {
                width: 200,
                min: 0,
                max: 24,
                showSpinButtons: true,
                value: startHour
            }"></p>
        </div>
        <div>
            <p class="label">endDayHour:</p>
            <p data-bind="dxNumberBox: {
                width: 200,
                min: 0,
                max: 24,
                showSpinButtons: true,
                value: endHour
            }"></p>
        </div>
    </div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        startDayHour: startHour,
        endDayHour: endHour,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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 = {
    schedulerDataSource: appointments,
    startHour: ko.observable(8),
    endHour: ko.observable(20)
};

ko.applyBindings(myViewModel);
.wrapper{
    height:605px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.label{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
}
.option .dx-numberbox{
    display: inline-block;
    vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p class="label">startDayHour:</p>
            <p id="startNumberBox"></p>
        </div>
        <div>
            <p class="label">endDayHour:</p>
            <p id="endNumberBox"></p>
        </div>
    </div>
    <div id="scheduler"></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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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)
    }
];
$(function () {
    $("#scheduler").dxScheduler({
        startDayHour: 8,
        endDayHour: 20,
        dataSource: appointments,
        currentView: 'week',
        height: 500,
        currentDate: new Date(2015, 4, 25)
    });
    $("#startNumberBox").dxNumberBox({
        width: 200,
        min: 0,
        max: 24,
        value: 8,
        showSpinButtons: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('startDayHour', e.value);
        }
    });
    $("#endNumberBox").dxNumberBox({
        width: 200,
        min: 0,
        max: 24,
        value: 20,
        showSpinButtons: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('endDayHour', e.value);
        }
    });
});
.wrapper{
    height:605px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.label{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
}
.option .dx-numberbox{
    display: inline-block;
    vertical-align: middle;
}

firstDayOfWeek

Specifies the first day of a week.

Type: Number
Default Value: undefined
Accepted Values: 0 | 1 | 2 | 3 | 4 | 5 | 6

This option can take on a value from 0 to 6.

  • 0 - Sunday
  • 1 - Monday
  • 2 - Tuesday
  • 3 - Wednesday
  • 4 - Thursday
  • 5 - Friday
  • 6 - Saturday

By default, the value provided by the culture settings is used.

focusStateEnabled

Specifies whether or not the widget can be focused.

Type: Boolean
Default Value: false
Default for generic: true

groups

Specifies the resource kinds by which the scheduler's appointments are grouped in a timetable.

Type: Array
Default Value: []

The array elements should be strings specifying the field field of the resource kind objects.

JavaScript
var resources = [
    { field: 'room', dataSource: roomsDataSource },
    { field: 'teacher', dataSource: teachersDataSource }
];
var schedulerOptions = {
    dataSource: appointments,
    resources: resources,
    groups: ['room', 'teacher']
    //...
}

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.

View Demo

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div class="dx-fieldset">
            <div class="dx-field">
                <div class="dx-field-label">Show groups</div>
                <div class="dx-field-value" dx-switch="{ 
                    value: true,
                    onValueChanged: updateGroups
                }"></div>
            </div>
        </div>
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: currentDate,
            resources: [{
                field: 'priorityId',
                dataSource: priorityData,
                label: 'Priority'
            }],
            height: 650,
            bindingOptions: {
                groups: 'groupsValue'
            }
        }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        priorityId: 1,
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    },
    {
        text: 'Book Flights to San Fran for Sales',
        priorityId: 2,
        startDate: new Date(2015, 4, 25, 12, 0),
        endDate: new Date(2015, 4, 25, 13, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        priorityId: 2,
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Final Budget Review',
        priorityId: 1,
        startDate: new Date(2015, 4, 26, 12, 0),
        endDate: new Date(2015, 4, 26, 13, 30)
    },
    {
        text: 'Install New Database',
        priorityId: 2,
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Approve New On-line Marketing Strategy',
        priorityId: 1,
        startDate: new Date(2015, 4, 27, 12, 0),
        endDate: new Date(2015, 4, 27, 14, 0)
    },
    {
        text: 'Prepare Marketing Plan',
        priorityId: 1,
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Create Icons for Website',
        priorityId: 2,
        startDate: new Date(2015, 4, 29, 10, 0),
        endDate: new Date(2015, 4, 29, 11, 30)
    },
    {
        text: 'Launch New Website',
        priorityId: 1,
        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.groupsValue = ['priorityId'],
    $scope.currentDate = new Date(2015, 4, 25);
    $scope.updateGroups = function (e) {
        $scope.groupsValue = e.value ? ['priorityId'] : [];
    };
    $scope.priorityData = [
        {
            id: 1,
            text: "High priority",
            color: "#AA3933"
        },
        {
            id: 2,
            text: "Low priority",
            color: "#55AA88"
        }
    ]
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-field{
    width: 250px;
}
<div class="demo-page">
    <div class="wrapper">
        <div class="dx-fieldset">
            <div class="dx-field">
                <div class="dx-field-label">Show groups</div>
                <div class="dx-field-value" data-bind="dxSwitch:{ 
                    value: true,
                    onValueChanged: updateGroups
                }"></div>
            </div>
        </div>
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: new Date(2015, 4, 25),
            resources: [{
                field: 'priorityId',
                dataSource: priorityData,
                label: 'Priority'
            }],
            height: 650,
            groups: groupsValue
        }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        priorityId: 1,
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    },
    {
        text: 'Book Flights to San Fran for Sales',
        priorityId: 2,
        startDate: new Date(2015, 4, 25, 12, 0),
        endDate: new Date(2015, 4, 25, 13, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        priorityId: 2,
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Final Budget Review',
        priorityId: 1,
        startDate: new Date(2015, 4, 26, 12, 0),
        endDate: new Date(2015, 4, 26, 13, 30)
    },
    {
        text: 'Install New Database',
        priorityId: 2,
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Approve New On-line Marketing Strategy',
        priorityId: 1,
        startDate: new Date(2015, 4, 27, 12, 0),
        endDate: new Date(2015, 4, 27, 14, 0)
    },
    {
        text: 'Prepare Marketing Plan',
        priorityId: 1,
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Create Icons for Website',
        priorityId: 2,
        startDate: new Date(2015, 4, 29, 10, 0),
        endDate: new Date(2015, 4, 29, 11, 30)
    },
    {
        text: 'Launch New Website',
        priorityId: 1,
        startDate: new Date(2015, 4, 29, 12, 20),
        endDate: new Date(2015, 4, 29, 14, 0)
    }
];
var myViewModel = {
    schedulerData: appointments,
    groupsValue: ko.observable(['priorityId']),
    priorityData: [
        {
            id: 1,
            text: "High priority",
            color: "#AA3933"
        },
        {
            id: 2,
            text: "Low priority",
            color: "#55AA88"
        }
    ],
    updateGroups: function (e) {
        this.groupsValue(e.value ? ['priorityId'] : []);
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-field{
    width: 250px;
}
<div class="demo-page">
    <div class="wrapper">
        <div class="dx-fieldset">
            <div class="dx-field">
                <div class="dx-field-label">Show groups</div>
                <div class="dx-field-value" id="groupSelector"></div>
            </div>
        </div>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        priorityId: 1,
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    },
    {
        text: 'Book Flights to San Fran for Sales',
        priorityId: 2,
        startDate: new Date(2015, 4, 25, 12, 0),
        endDate: new Date(2015, 4, 25, 13, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        priorityId: 2,
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Final Budget Review',
        priorityId: 1,
        startDate: new Date(2015, 4, 26, 12, 0),
        endDate: new Date(2015, 4, 26, 13, 30)
    },
    {
        text: 'Install New Database',
        priorityId: 2,
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Approve New On-line Marketing Strategy',
        priorityId: 1,
        startDate: new Date(2015, 4, 27, 12, 0),
        endDate: new Date(2015, 4, 27, 14, 0)
    },
    {
        text: 'Prepare Marketing Plan',
        priorityId: 1,
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Create Icons for Website',
        priorityId: 2,
        startDate: new Date(2015, 4, 29, 10, 0),
        endDate: new Date(2015, 4, 29, 11, 30)
    },
    {
        text: 'Launch New Website',
        priorityId: 1,
        startDate: new Date(2015, 4, 29, 12, 20),
        endDate: new Date(2015, 4, 29, 14, 0)
    }
];
var priorityData = [
    {
        id: 1,
        text: "High priority",
        color: "#AA3933"
    },
    {
        id: 2,
        text: "Low priority",
        color: "#55AA88"
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2015, 4, 25),
    resources: [{
        field: 'priorityId',
        dataSource: priorityData,
        label: 'Priority'
    }],
    groups: ['priorityId'],
    height: 650
});
$("#groupSelector").dxSwitch({
    value: true,
    onValueChanged: function (e) {
        $("#myScheduler").dxScheduler("instance").option("groups", e.value ? ['priorityId'] : []);
    }
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-field{
    width: 250px;
}

height

Specifies the height of the widget.

Type: Number|String| function
Return Value: Number|String
The widget height.
Default Value: undefined

The option can hold a value of the following types.

  • number
    The height of the widget in pixels

  • string
    A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")

  • function
    A function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

hint

Specifies the text of the hint displayed for the widget.

Type: String
Default Value: undefined

horizontalScrollingEnabled

Specifies whether or not an end-user can scroll the view horizontally.

Type: Boolean
Default Value: false

This option is useful when displaying dxScheduler on narrow screens.

max

The latest date the widget allows you to select.

Type: Date
Default Value: undefined

min

The earliest date the widget allows you to select.

Type: Date
Default Value: undefined

onAppointmentAdded

A handler for the appointmentAdded event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
appointmentData: Object
The appointment object added to the data source.
The standard Error object that defines the occurred error.
Default Value: null

Assign a function to perform a custom action after an appointment has been added to the widget's data source.

onAppointmentAdding

A handler for the appointmentAdding event.

Type: function
Function parameters:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
model: Object
Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
appointmentData: Object
The appointment object to be added to the data source.
A flag allowing you to prevent the appointment from being added. This field accepts a Boolean value or Promise. If you pass Promise to this field, appointment adding is continued or canceled once Promise has been resolved.
Default Value: null

Assign a function to perform a custom action before an appointment is added to the widget's data source.

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div class="option">Add an appointment</div>
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: currentDate,
            height: 650,
            onAppointmentAdding: addingHandler,
            onAppointmentUpdating: updatingHandler,
            onAppointmentDeleting: deletingHandler
        }">
        </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: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 10, 20),
        endDate: new Date(2015, 4, 29, 12, 0)
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2015, 4, 25);
    $scope.addingHandler = function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    };
    $scope.updatingHandler = function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    };
    $scope.deletingHandler = function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Delete appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
<div class="demo-page">
    <div class="wrapper">
        <div class="option">Add an appointment</div>
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: new Date(2015, 4, 25),
            height: 650,
            onAppointmentAdding: addingHandler,
            onAppointmentUpdating: updatingHandler,
            onAppointmentDeleting: deletingHandler
        }"></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: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 10, 20),
        endDate: new Date(2015, 4, 29, 12, 0)
    }
];
var myViewModel = {
    schedulerData: appointments,
    addingHandler: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    updatingHandler: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    deletingHandler: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Delete appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
<div class="demo-page">
    <div class="wrapper">
        <div class="option">Add an appointment</div>
        <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: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 10, 20),
        endDate: new Date(2015, 4, 29, 12, 0)
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2015, 4, 25),
    height: 650,
    onAppointmentAdding: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    onAppointmentUpdating: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    onAppointmentDeleting: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Delete appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    }

});
.wrapper{
    padding: 20px;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}

onAppointmentClick

A handler for the appointmentClick event.

Type: function |String
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
appointmentData: Object
The object associated with the clicked appointment.
appointmentElement: jQuery
An HTML element of the clicked appointment.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
cancel: Boolean
Indicates whether or not to cancel execution of the default appointment click handler.
Default Value: null

Assign a function to perform a custom action after an appointment has been clicked.

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">Click an appointment</div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            onAppointmentClick: 'onClick'
        }
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
var myApp = angular.module('myApp', ['dx']);

myApp.controller("demoController", function ($scope) {
    $scope.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
    $scope.onClick = function () {
        DevExpress.ui.notify("An appointment was clicked", "info", 1000);
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="wrapper">
    <div class="option">Click an appointment</div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        onAppointmentClick: onClick,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
var myViewModel = {
    schedulerDataSource: appointments,
    onClick: function () {
        DevExpress.ui.notify("An appointment was clicked", "info", 1000);
    }
};

ko.applyBindings(myViewModel);
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="wrapper">
    <div class="option">Click an appointment</div>
    <div id="scheduler"></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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
$(function () {
    $("#scheduler").dxScheduler({
        dataSource: appointments,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25),
        onAppointmentClick: function () {
            DevExpress.ui.notify("An appointment was clicked", "info", 1000);
        }
    });
});
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}

onAppointmentDblClick

A handler for the appointmentDblClick event.

Type: function |String
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
appointmentData: Object
The object associated with the clicked appointment.
appointmentElement: jQuery
An HTML element of the clicked appointment.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
cancel: Boolean
Indicates whether or not to cancel execution of the default appointment double click handler.
Default Value: null

Assign a function to perform a custom action after an appointment has been double clicked.

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">Double click an appointment</div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            onAppointmentDblClick: 'onDoubleClick'
        }
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
var myApp = angular.module('myApp', ['dx']);

myApp.controller("demoController", function ($scope) {
    $scope.schedulerDataSource = appointments;
    
    $scope.onDoubleClick = function () {
        DevExpress.ui.notify("An appointment was double-clicked", "info", 1000);
    };
    $scope.date = new Date(2015, 4, 25);
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="wrapper">
    <div class="option">Double click an appointment</div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        onAppointmentDblClick: onDoubleClick,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
var myViewModel = {
    schedulerDataSource: appointments,
    onDoubleClick: function () {
        DevExpress.ui.notify("An appointment was double-clicked", "info", 1000);
    }
};

ko.applyBindings(myViewModel);
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="wrapper">
    <div class="option">Double click an appointment</div>
    <div id="scheduler"></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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
$(function () {
    $("#scheduler").dxScheduler({
        dataSource: appointments,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25),
        onAppointmentDblClick: function () {
            DevExpress.ui.notify("An appointment was double-clicked", "info", 1000);
        }
    });
});
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}

onAppointmentDeleted

A handler for the appointmentDeleted event.

Type: function
Function parameters:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
model: Object
Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
appointmentData: Object
The appointment object deleted from the data source.
The standard Error object that defines the occurred error.
Default Value: null

Assign a function to perform a custom action after an appointment has been deleted from the widget's data source.

onAppointmentDeleting

A handler for the appointmentDeleting event.

Type: function
Function parameters:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
model: Object
Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
appointmentData: Object
The appointment object to be deleted from the data source.
A flag that allows you to prevent an appointment from being deleted. This field accepts a Boolean value or Promise. If you pass Promise to this field, appointment deleting is continued or canceled once Promise has been resolved.
Default Value: null

Assign a function to perform a custom action before an appointment is deleted from the widget's data source.

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div class="option">Delete an appointment</div>
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: currentDate,
            height: 650,
            onAppointmentAdding: addingHandler,
            onAppointmentUpdating: updatingHandler,
            onAppointmentDeleting: deletingHandler
        }">
        </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: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 10, 20),
        endDate: new Date(2015, 4, 29, 12, 0)
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2015, 4, 25);
    $scope.addingHandler = function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    };
    $scope.updatingHandler = function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    };
    $scope.deletingHandler = function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Delete appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="demo-page">
    <div class="wrapper">
        <div class="option">Delete an appointment</div>
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: new Date(2015, 4, 25),
            height: 650,
            onAppointmentAdding: addingHandler,
            onAppointmentUpdating: updatingHandler,
            onAppointmentDeleting: deletingHandler
        }"></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: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 10, 20),
        endDate: new Date(2015, 4, 29, 12, 0)
    }
];
var myViewModel = {
    schedulerData: appointments,
    addingHandler: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    updatingHandler: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    deletingHandler: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Delete appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="demo-page">
    <div class="wrapper">
        <div class="option">Delete an appointment</div>
        <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: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 10, 20),
        endDate: new Date(2015, 4, 29, 12, 0)
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2015, 4, 25),
    height: 650,
    onAppointmentAdding: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    onAppointmentUpdating: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    onAppointmentDeleting: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Delete appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    }

});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}

onAppointmentFormCreated

A handler for the appointmentFormCreated event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
appointmentData: Object
The object associated with the appointment for which a form is created.
form: Object
An instance of the dxForm widget used to edit the appointment details.
Default Value: null

Assign a function to perform a custom action after an edit form has been created for an appointment.

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">Add a new appointment or update an existing one</div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            onAppointmentFormCreated: 'onFormCreated'
        }
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
var myApp = angular.module('myApp', ['dx']);

myApp.controller("demoController", function ($scope) {
    $scope.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
    $scope.onFormCreated = function () {
        DevExpress.ui.notify("An appointment form was created", "info", 1000);
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="wrapper">
    <div class="option">Add a new appointment or update an existing one</div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        onAppointmentFormCreated: onFormCreated,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
var myViewModel = {
    schedulerDataSource: appointments,
    onFormCreated: function () {
        DevExpress.ui.notify("An appointment form was created", "info", 1000);
    }
};

ko.applyBindings(myViewModel);
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="wrapper">
    <div class="option">Add a new appointment or update an existing one</div>
    <div id="scheduler"></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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
$(function () {
    $("#scheduler").dxScheduler({
        dataSource: appointments,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25),
        onAppointmentFormCreated: function () {
            DevExpress.ui.notify("An appointment form was created", "info", 1000);
        }
    });
});
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}

onAppointmentRendered

A handler for the appointmentRendered event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
appointmentData: Object
The data that is bound to the appointment to be rendered.
appointmentElement: jQuery
An HTML element of the appointment.
Default Value: null

Assign a function to perform a custom action after an appointment is rendered.

onAppointmentUpdated

A handler for the appointmentUpdated event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
appointmentData: Object
The appointment object updated in the data source.
The standard Error object that defines the occurred error.
Default Value: null

Assign a function to perform a custom action after an appointment has been updated in the widget's data source.

onAppointmentUpdating

A handler for the appointmentUpdating event.

Type: function
Function parameters:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
model: Object
Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
oldData: Object
The appointment object to be updated in the data source.
newData: Object
The appointment object containing new values for the specified appointment.
A flag that allows you to prevent an appointment from being updated. This field accepts a Boolean value or Promise. If you pass Promise to this field, the appointment updating is continued or canceled once Promise has been resolved.
Default Value: null

Assign a function to perform a custom action before an appointment is updated in the widget's data source.

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div class="option">Update an appointment</div>
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: currentDate,
            height: 650,
            onAppointmentAdding: addingHandler,
            onAppointmentUpdating: updatingHandler,
            onAppointmentDeleting: deletingHandler
        }">
        </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: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 10, 20),
        endDate: new Date(2015, 4, 29, 12, 0)
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2015, 4, 25);
    $scope.addingHandler = function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    };
    $scope.updatingHandler = function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    };
    $scope.deletingHandler = function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Delete appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="demo-page">
    <div class="wrapper">
        <div class="option">Update an appointment</div>
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: new Date(2015, 4, 25),
            height: 650,
            onAppointmentAdding: addingHandler,
            onAppointmentUpdating: updatingHandler,
            onAppointmentDeleting: deletingHandler
        }"></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: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 10, 20),
        endDate: new Date(2015, 4, 29, 12, 0)
    }
];
var myViewModel = {
    schedulerData: appointments,
    addingHandler: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    updatingHandler: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    deletingHandler: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Delete appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="demo-page">
    <div class="wrapper">
        <div class="option">Update an appointment</div>
        <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: 'Approve Personal Computer Upgrade',
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2015, 4, 29, 10, 20),
        endDate: new Date(2015, 4, 29, 12, 0)
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2015, 4, 25),
    height: 650,
    onAppointmentAdding: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    onAppointmentUpdating: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    },
    onAppointmentDeleting: function (e) {
        e.cancel = $.Deferred();
        DevExpress.ui.dialog.confirm("Delete appointment?", "Confirm").done(function (dialogResponse) {
            e.cancel.resolve(!dialogResponse);
        });
    }

});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}

onCellClick

A handler for the cellClick event.

Type: function |String
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
cellData: Object
An object associated with the clicked cell.
cellElement: jQuery
An HTML element of the clicked cell.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
cancel: Boolean
Indicates whether or not to cancel execution of the default cell click handler.
Default Value: null

Assign a function to perform a custom action after a view cell has been clicked.

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">Click an empty space of a cell</div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            onCellClick: 'onCellClick'
        }
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
var myApp = angular.module('myApp', ['dx']);

myApp.controller("demoController", function ($scope) {
    $scope.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
    $scope.onCellClick = function () {
        DevExpress.ui.notify("A cell was clicked", "info", 1000);
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="wrapper">
    <div class="option">Click an empty space of a cell</div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        onCellClick: onCellClick,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
var myViewModel = {
    schedulerDataSource: appointments,
    onCellClick: function () {
        DevExpress.ui.notify("A cell was clicked", "info", 1000);
    }
};

ko.applyBindings(myViewModel);
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}
<div class="wrapper">
    <div class="option">Click an empty space of a cell</div>
    <div id="scheduler"></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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }
];
$(function () {
    $("#scheduler").dxScheduler({
        dataSource: appointments,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25),
        onCellClick: function () {
            DevExpress.ui.notify("A cell was clicked", "info", 1000);
        }
    });
});
.wrapper{
    height:600px;
    max-width:800px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
    text-align: center;
}

onDisposing

A handler for the disposing event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
Default Value: null

Assign a function to perform a custom action when the widget is being removed.

NOTE: The function assigned to this option is executed only if the widget is removed using the remove(), empty(), or html() jQuery methods.

onInitialized

A handler for the initialized event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
Default Value: null

Assign a function to perform a custom action when the widget is initialized.

onOptionChanged

A handler for the optionChanged event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
name: String
Specifies the name of the option whose value is changed.
fullName: String
Specifies a full name of the option whose value is changed. The full name is formed by concatenating the names of the options that are presented in the hierarchy of the given option. The names are delimited by commas.
value: any
Specifies a new value for the option.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
Default Value: null

Assign a function to perform a custom action after an option of the component is changed.

recurrenceEditMode

Specifies the edit mode for recurring appointments.

Type: String
Default Value: 'dialog'
Accepted Values: 'dialog' | 'series' | 'occurrence'

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.

recurrenceExceptionExpr

Specifies the name of the data source item field that defines exceptions for the current recurring appointment.

Type: String
Default Value: 'recurrenceException'

recurrenceRuleExpr

Specifies the name of the data source item field that defines a recurrence rule for generating recurring appointments.

Type: String
Default Value: 'recurrenceRule'

If the option value is null, the widget does not support recurring appointments. It displays only initial appointments without generating appointment series.

remoteFiltering

Specifies whether filtering is performed on the server or client side.

Type: Boolean
Default Value: false

resources[]

Specifies an array of resources available in the scheduler.

Type: Array
Default Value: []

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.

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.

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

Type: Boolean
Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

showAllDayPanel

Specifies whether or not the "All-day" panel is visible.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div ng-model="showPanel" dx-check-box="{
            text: 'showAllDayPanel'
        }"></div>
    </div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            showAllDayPanel: 'showPanel'
        }
    }">
    </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),
        allDay: true
    },
    {
        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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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),
        allDay: true
    }
];
var myApp = angular.module('myApp', ['dx']);

myApp.controller("demoController", function ($scope) {
    $scope.showPanel = true;
    $scope.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:555px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div data-bind="dxCheckBox: {
            text: 'showAllDayPanel',
            value: showPanel
        }"></div>
    </div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        showAllDayPanel: showPanel,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    }">
    </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),
        allDay: true
    },
    {
        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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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),
        allDay: true
    }
];
var myViewModel = {
    schedulerDataSource: appointments,
    showPanel: ko.observable(true)
};

ko.applyBindings(myViewModel);
.wrapper{
    height:555px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div id="checkBox"></div>
    </div>
    <div id="scheduler"></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),
        allDay: true
    },
    {
        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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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),
        allDay: true
    }
];
$(function () {
    $("#scheduler").dxScheduler({
        dataSource: appointments,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    });
    $("#checkBox").dxCheckBox({
        text: 'showAllDayPanel',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('showAllDayPanel', e.value);
        }
    });
});
.wrapper{
    height:555px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

startDateExpr

Specifies the name of the data source item field that defines the start of an appointment.

Type: String
Default Value: 'startDate'

startDayHour

Specifies a start hour in the scheduler view's time interval.

Type: Number
Default Value: 0

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <p class="label">startDayHour: </p>
            <p ng-model="startHour" dx-number-box="{
                width: 200,
                min: 0,
                max: 24,
                showSpinButtons: true
            }"></p>
        </div>
        <div>
            <p class="label">endDayHour: </p>
            <p ng-model="endHour" dx-number-box="{
                width: 200,
                min: 0,
                max: 24,
                showSpinButtons: true
            }"></p>
        </div>
    </div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        height: 500,
        bindingOptions: {
            startDayHour: 'startHour',
            endDayHour: 'endHour'
        }
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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.startHour = 8;
    $scope.endHour = 20;
    $scope.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:605px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.label{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
}
.option .dx-numberbox{
    display: inline-block;
    vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p class="label">startDayHour:</p>
            <p data-bind="dxNumberBox: {
                width: 200,
                min: 0,
                max: 24,
                showSpinButtons: true,
                value: startHour
            }"></p>
        </div>
        <div>
            <p class="label">endDayHour:</p>
            <p data-bind="dxNumberBox: {
                width: 200,
                min: 0,
                max: 24,
                showSpinButtons: true,
                value: endHour
            }"></p>
        </div>
    </div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        startDayHour: startHour,
        endDayHour: endHour,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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 = {
    schedulerDataSource: appointments,
    startHour: ko.observable(8),
    endHour: ko.observable(20)
};

ko.applyBindings(myViewModel);
.wrapper{
    height:605px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.label{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
}
.option .dx-numberbox{
    display: inline-block;
    vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p class="label">startDayHour:</p>
            <p id="startNumberBox"></p>
        </div>
        <div>
            <p class="label">endDayHour:</p>
            <p id="endNumberBox"></p>
        </div>
    </div>
    <div id="scheduler"></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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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)
    }
];
$(function () {
    $("#scheduler").dxScheduler({
        startDayHour: 8,
        endDayHour: 20,
        dataSource: appointments,
        currentView: 'week',
        height: 500,
        currentDate: new Date(2015, 4, 25)
    });
    $("#startNumberBox").dxNumberBox({
        width: 200,
        min: 0,
        max: 24,
        value: 8,
        showSpinButtons: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('startDayHour', e.value);
        }
    });
    $("#endNumberBox").dxNumberBox({
        width: 200,
        min: 0,
        max: 24,
        value: 20,
        showSpinButtons: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('endDayHour', e.value);
        }
    });
});
.wrapper{
    height:605px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.label{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
}
.option .dx-numberbox{
    display: inline-block;
    vertical-align: middle;
}

tabIndex

Specifies the widget tab index.

Type: Number
Default Value: 0

textExpr

Specifies the name of the data source item field that holds the subject of an appointment.

Type: String
Default Value: 'text'

useDropDownViewSwitcher

Specifies whether a user can switch views using tabs or a drop-down menu.

Type: Boolean
Default Value: false
Default for mobile: true

Using a drop-down menu makes the view switcher more compact.

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div ng-model="useDropDownSwitcher" dx-check-box="{
            text: 'useDropDownViewSwitcher'
        }"></div>
    </div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        views: ['day','week','workWeek','month'],
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            useDropDownViewSwitcher: 'useDropDownSwitcher'
        }
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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.useDropDownSwitcher = false;
    $scope.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:555px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div data-bind="dxCheckBox: {
            text: 'useDropDownViewSwitcher',
            value: useDropDownSwitcher
        }"></div>
    </div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        useDropDownViewSwitcher: useDropDownSwitcher,
        views: ['day','week','workWeek','month'],
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    }">
    </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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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 = {
    schedulerDataSource: appointments,
    useDropDownSwitcher: ko.observable(false)
};

ko.applyBindings(myViewModel);
.wrapper{
    height:555px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div id="checkBox"></div>
    </div>
    <div id="scheduler"></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: 'Install New Database',
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    },
    {
        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)
    }
];

$(function () {
    $("#scheduler").dxScheduler({
        dataSource: appointments,
        currentView: 'week',
        views: ['day', 'week', 'workWeek', 'month'],
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    });
    $("#checkBox").dxCheckBox({
        text: 'useDropDownViewSwitcher',
        value: false,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('useDropDownViewSwitcher', e.value);
        }
    });
});
.wrapper{
    height:555px;
    max-width:800px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

views

Lists the views to be available within the scheduler's View Selector.

Type: Array
Default Value: ['day', 'week']
Accepted Values: 'day' | 'week' | 'workWeek' | 'month' | 'timelineDay' | 'timelineWeek' | 'timelineWorkWeek'

Set a default view by using the currentView option.
For more information on scheduler views, refer to the Views guide.

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            height: 650,
            views: ['day', 'week', 'workWeek', 'month'],
            currentView: 'week',
            currentDate: today
        }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Meeting',
        startDate: new Date(2015, 4, 25, 10, 0),
        endDate: new Date(2015, 4, 25, 12, 30),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=MO"
    },
    {
        text: 'Report',
        startDate: new Date(2015, 4, 29, 12, 0),
        endDate: new Date(2015, 4, 29, 13, 0),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2"
    },
    {
        text: 'Summit',
        startDate: new Date(2015, 4, 27, 9, 0),
        allDay: true,
        recurrenceRule: "FREQ=MONTHLY;INTERVAL=1"
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.today = new Date(2015, 4, 25, 10, 0);
});
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,
            views: ['day', 'week', 'workWeek', 'month'],
            currentView: 'day',
            currentDate: new Date(2015, 4, 25, 10, 0),
            height: 650
        }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Meeting',
        startDate: new Date(2015, 4, 25, 10, 0),
        endDate: new Date(2015, 4, 25, 12, 30),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=MO"
    },
    {
        text: 'Report',
        startDate: new Date(2015, 4, 29, 12, 0),
        endDate: new Date(2015, 4, 29, 13, 0),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2"
    },
    {
        text: 'Summit',
        startDate: new Date(2015, 4, 27, 9, 0),
        allDay: true,
        recurrenceRule: "FREQ=MONTHLY;INTERVAL=1"
    }
];
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: 'Meeting',
        startDate: new Date(2015, 4, 25, 10, 0),
        endDate: new Date(2015, 4, 25, 12, 30),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=MO"
    },
    {
        text: 'Report',
        startDate: new Date(2015, 4, 29, 12, 0),
        endDate: new Date(2015, 4, 29, 13, 0),
        recurrenceRule: "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2"
    },
    {
        text: 'Summit',
        startDate: new Date(2015, 4, 27, 9, 0),
        allDay: true,
        recurrenceRule: "FREQ=MONTHLY;INTERVAL=1"
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    views: ['day', 'week', 'workWeek', 'month'],
    currentView: 'day',
    currentDate: new Date(2015, 4, 25, 10, 0),
    height: 650
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String| function
Return Value: Number|String
The widget width.
Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget width in pixels.
  • string
    A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget width. For example, see the following code.

    JavaScript
    width: function () { 
        return baseWidth - 10 + "%";
    }