Scheduler Events

This section describes events fired by this widget.

appointmentAdded

Fires after an appointment has been added to the data source.

Event Handler Argument:
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 approach.
appointmentData: Object
The appointment object added to the data source.
The standard Error object that defines the occurred error.

Instead, you can use the onAppointmentAdded option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div dx-scheduler="{
                dataSource: schedulerData,
                startDayHour: 9,
                endDayHour: 18,
                currentView: 'week',
                currentDate: currentDate,
                height: 650,
                onInitialized: initializedHandler
            }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2016, 4, 25);
    $scope.initializedHandler = function (e) {
        e.component
            .on("appointmentAdded", function (e) {
                DevExpress.ui.notify("Appointment added");
            })
            .on("appointmentUpdated", function (e) {
                DevExpress.ui.notify("Appointment updated");
            })
            .on("appointmentDeleted", function (e) {
                DevExpress.ui.notify("Appointment deleted");
            });
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div data-bind="dxScheduler: {
                dataSource: schedulerData,
                startDayHour: 9,
                endDayHour: 18,
                currentView: 'week',
                currentDate: new Date(2016, 4, 25),
                height: 650,
                onInitialized: initializedHandler
            }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myViewModel = {
    schedulerData: appointments,
    initializedHandler: function (e) {
        e.component
            .on("appointmentAdded", function (e) {
                DevExpress.ui.notify("Appointment added");
            })
            .on("appointmentUpdated", function (e) {
                DevExpress.ui.notify("Appointment updated");
            })
            .on("appointmentDeleted", function (e) {
                DevExpress.ui.notify("Appointment deleted");
            });
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2016, 4, 25),
    height: 650,
    onInitialized: function (e) {
        e.component
            .on("appointmentAdded", function (e) {
                DevExpress.ui.notify("Appointment added");
            })
            .on("appointmentUpdated", function (e) {
                DevExpress.ui.notify("Appointment updated");
            })
            .on("appointmentDeleted", function (e) {
                DevExpress.ui.notify("Appointment deleted");
            });
    }
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}

appointmentAdding

Fires before an appointment is added to the data source.

Event Handler Argument:
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 approach.
appointmentData: Object
The appointment object to be added to the data source.
A flag allowing you to prevent the appointment from being added to the data source.

Instead, you can use the onAppointmentAdding option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div dx-scheduler="{
				dataSource: schedulerData,
				startDayHour: 9,
				endDayHour: 18,
				currentView: 'week',
				currentDate: currentDate,
				height: 650,
				onInitialized: initializedHandler
			}">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2016, 4, 25);
    $scope.initializedHandler = function (e) {
        e.component
            .on("appointmentAdding", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentUpdating", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentDeleting", 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;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div data-bind="dxScheduler: {
			dataSource: schedulerData,
			startDayHour: 9,
			endDayHour: 18,
			currentView: 'week',
			currentDate: new Date(2016, 4, 25),
			height: 650,
			onInitialized: initializedHandler
		}"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myViewModel = {
    schedulerData: appointments,
    initializedHandler: function (e) {
        e.component
            .on("appointmentAdding", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentUpdating", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentDeleting", 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;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2016, 4, 25),
    height: 650,
    onInitialized: function (e) {
        e.component
            .on("appointmentAdding", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentUpdating", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentDeleting", 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;
}
.dx-button {
    margin: 10px;
}

appointmentClick

Fires after an appointment has been clicked.

Event Handler Argument:
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 approach.
appointmentData: Object
The object associated with the initial appointment.
targetedAppointmentData: 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.

Instead, you can use the onAppointmentClick option to handle the event.

In case of recurring appointments or appointments with multiple resources, you may want to obtain information about the currently selected appointment, not the initial appointment. For this purpose, use the targetedAppointmentData field of the function parameter. Otherwise, use the appointmentData field.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div dx-button="{ text: 'Subscribe to AppointmentClick event', onClick: clickHandler }"></div></br>
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: currentDate,
            height: 650,
            onInitialized: initializedHandler
        }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2016, 4, 25);
    $scope.schedulerInstance = {};
    $scope.initializedHandler = function (e) {
        $scope.schedulerInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.schedulerInstance
                .on(
                    "appointmentClick", function (e) { DevExpress.ui.notify("'" + e.targetedAppointmentData.text + "' is clicked", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from AppointmentClick event");
            flag = true;
        } else {
            $scope.schedulerInstance.off("appointmentClick");
            e.component.option("text", "Subscribe to AppointmentClick event");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div data-bind="dxButton: { text: 'Subscribe to AppointmentClick event', onClick: clickHandler }"></div></br>
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: new Date(2016, 4, 25),
            height: 650,
            onInitialized: initializedHandler
        }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var flag = false;
var myViewModel = {
    schedulerData: appointments,
    schedulerInstance: {},
    initializedHandler: function (e) {
        myViewModel.schedulerInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.schedulerInstance
                .on(
                    "appointmentClick", function (e) { DevExpress.ui.notify("'" + e.targetedAppointmentData.text + "' is clicked", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from AppointmentClick event");
            flag = true;
        } else {
            myViewModel.schedulerInstance.off("appointmentClick");
            e.component.option("text", "Subscribe to AppointmentClick event");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div id="button"></div></br>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var flag = false;
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2016, 4, 25),
    height: 650
});
$("#button").dxButton({
    text: 'Subscribe to appointmentClick event',
    onClick: function (e) {
        if (flag === false) {
            $("#myScheduler").dxScheduler("instance")
                    .on(
                        "appointmentClick", function (e) { DevExpress.ui.notify("'" + e.targetedAppointmentData.text + "' is clicked", "success", 1500); }
                    );
            e.component.option("text", "Unsubscribe from appointmentClick event");
            flag = true;
        } else {
            $("#myScheduler").dxScheduler("instance").off("appointmentClick");
            e.component.option("text", "Subscribe to appointmentClick event");
            flag = false;
        }
    }
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}

appointmentDblClick

Fires after an appointment has been double clicked.

Event Handler Argument:
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 approach.
appointmentData: Object
The object associated with the initial appointment.
targetedAppointmentData: 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.

Instead, you can use the onAppointmentDblClick option to handle the event.

In case of recurring appointments or appointments with multiple resources, you may want to obtain information about the currently selected appointment, not the initial appointment. For this purpose, use the targetedAppointmentData field of the function parameter. Otherwise, use the appointmentData field.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div dx-button="{ text: 'Subscribe to AppointmentDblClick event', onClick: clickHandler }"></div></br>
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: currentDate,
            height: 650,
            onInitialized: initializedHandler
        }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2016, 4, 25);
    $scope.schedulerInstance = {};
    $scope.initializedHandler = function (e) {
        $scope.schedulerInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.schedulerInstance
                .on(
                    "appointmentDblClick", function (e) { DevExpress.ui.notify("'" + e.targetedAppointmentData.text + "' is double-clicked", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from AppointmentDblClick event");
            flag = true;
        } else {
            $scope.schedulerInstance.off("appointmentDblClick");
            e.component.option("text", "Subscribe to AppointmentDblClick event");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div data-bind="dxButton: { text: 'Subscribe to AppointmentDblClick event', onClick: clickHandler }"></div></br>
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: new Date(2016, 4, 25),
            height: 650,
            onInitialized: initializedHandler
        }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var flag = false;
var myViewModel = {
    schedulerData: appointments,
    schedulerInstance: {},
    initializedHandler: function (e) {
        myViewModel.schedulerInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.schedulerInstance
                .on(
                    "appointmentDblClick", function (e) { DevExpress.ui.notify("'" + e.targetedAppointmentData.text + "' is double-clicked", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from AppointmentDblClick event");
            flag = true;
        } else {
            myViewModel.schedulerInstance.off("appointmentDblClick");
            e.component.option("text", "Subscribe to AppointmentDblClick event");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div id="button"></div></br>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var flag = false;
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2016, 4, 25),
    height: 650
});
$("#button").dxButton({
    text: 'Subscribe to appointmentDblClick event',
    onClick: function (e) {
        if (flag === false) {
            $("#myScheduler").dxScheduler("instance")
                    .on(
                        "appointmentDblClick", function (e) { DevExpress.ui.notify("'" + e.targetedAppointmentData.text + "' is double-clicked", "success", 1500); }
                    );
            e.component.option("text", "Unsubscribe from AppointmentDblClick event");
            flag = true;
        } else {
            $("#myScheduler").dxScheduler("instance").off("appointmentDblClick");
            e.component.option("text", "Subscribe to appointmentDblClick event");
            flag = false;
        }
    }
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}

appointmentDeleted

Fires after an appointment has been deleted from the data source.

Event Handler Argument:
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 approach.
appointmentData: Object
The appointment object deleted from the data source.
The standard Error object that defines the occurred error.

Instead, you can use the onAppointmentDeleted option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div dx-scheduler="{
                dataSource: schedulerData,
                startDayHour: 9,
                endDayHour: 18,
                currentView: 'week',
                currentDate: currentDate,
                height: 650,
                onInitialized: initializedHandler
            }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2016, 4, 25);
    $scope.initializedHandler = function (e) {
        e.component
            .on("appointmentAdded", function (e) {
                DevExpress.ui.notify("Appointment added");
            })
            .on("appointmentUpdated", function (e) {
                DevExpress.ui.notify("Appointment updated");
            })
            .on("appointmentDeleted", function (e) {
                DevExpress.ui.notify("Appointment deleted");
            });
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div data-bind="dxScheduler: {
                dataSource: schedulerData,
                startDayHour: 9,
                endDayHour: 18,
                currentView: 'week',
                currentDate: new Date(2016, 4, 25),
                height: 650,
                onInitialized: initializedHandler
            }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myViewModel = {
    schedulerData: appointments,
    initializedHandler: function (e) {
        e.component
            .on("appointmentAdded", function (e) {
                DevExpress.ui.notify("Appointment added");
            })
            .on("appointmentUpdated", function (e) {
                DevExpress.ui.notify("Appointment updated");
            })
            .on("appointmentDeleted", function (e) {
                DevExpress.ui.notify("Appointment deleted");
            });
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2016, 4, 25),
    height: 650,
    onInitialized: function (e) {
        e.component
            .on("appointmentAdded", function (e) {
                DevExpress.ui.notify("Appointment added");
            })
            .on("appointmentUpdated", function (e) {
                DevExpress.ui.notify("Appointment updated");
            })
            .on("appointmentDeleted", function (e) {
                DevExpress.ui.notify("Appointment deleted");
            });
    }
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}

appointmentDeleting

Fires before an appointment is deleted from the data source.

Event Handler Argument:
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 approach.
appointmentData: Object
The appointment object to be deleted from the data source.
A flag allowing you to prevent the appointment from being deleted from the data source.

Instead, you can use the onAppointmentDeleting option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div dx-scheduler="{
				dataSource: schedulerData,
				startDayHour: 9,
				endDayHour: 18,
				currentView: 'week',
				currentDate: currentDate,
				height: 650,
				onInitialized: initializedHandler
			}">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2016, 4, 25);
    $scope.initializedHandler = function (e) {
        e.component
            .on("appointmentAdding", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentUpdating", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentDeleting", 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;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div data-bind="dxScheduler: {
			dataSource: schedulerData,
			startDayHour: 9,
			endDayHour: 18,
			currentView: 'week',
			currentDate: new Date(2016, 4, 25),
			height: 650,
			onInitialized: initializedHandler
		}"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myViewModel = {
    schedulerData: appointments,
    initializedHandler: function (e) {
        e.component
            .on("appointmentAdding", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentUpdating", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentDeleting", 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;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2016, 4, 25),
    height: 650,
    onInitialized: function (e) {
        e.component
            .on("appointmentAdding", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentUpdating", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentDeleting", 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;
}
.dx-button {
    margin: 10px;
}

appointmentFormCreated

Fires after an edit form has been created for an appointment.

Event Handler Argument:
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 approach.
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.

Instead, you can use the onAppointmentFormCreated option to handle the event.

See Also

appointmentRendered

Fires after an appointment is rendered.

Event Handler Argument:
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 approach.
appointmentData: Object
The data that is bound to the initial appointment.
targetedAppointmentData: Object
The data that is bound to the appointment to be rendered.
appointmentElement: jQuery
An HTML element of the appointment.

Instead, you can use the onAppointmentRendered option to handle the event.

In case of recurring appointments or appointments with multiple resources, you may want to obtain information about the appointment to be rendered, not the initial appointment. For this purpose, use the targetedAppointmentData field of the function parameter. Otherwise, use the appointmentData field.

See Also

appointmentUpdated

Fires after an appointment has been updated in the data source.

Event Handler Argument:
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 approach.
appointmentData: Object
The appointment object updated in the data source.
The standard Error object that defines the occurred error.

Instead, you can use the onAppointmentUpdated option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div dx-scheduler="{
                dataSource: schedulerData,
                startDayHour: 9,
                endDayHour: 18,
                currentView: 'week',
                currentDate: currentDate,
                height: 650,
                onInitialized: initializedHandler
            }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2016, 4, 25);
    $scope.initializedHandler = function (e) {
        e.component
            .on("appointmentAdded", function (e) {
                DevExpress.ui.notify("Appointment added");
            })
            .on("appointmentUpdated", function (e) {
                DevExpress.ui.notify("Appointment updated");
            })
            .on("appointmentDeleted", function (e) {
                DevExpress.ui.notify("Appointment deleted");
            });
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div data-bind="dxScheduler: {
                dataSource: schedulerData,
                startDayHour: 9,
                endDayHour: 18,
                currentView: 'week',
                currentDate: new Date(2016, 4, 25),
                height: 650,
                onInitialized: initializedHandler
            }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myViewModel = {
    schedulerData: appointments,
    initializedHandler: function (e) {
        e.component
            .on("appointmentAdded", function (e) {
                DevExpress.ui.notify("Appointment added");
            })
            .on("appointmentUpdated", function (e) {
                DevExpress.ui.notify("Appointment updated");
            })
            .on("appointmentDeleted", function (e) {
                DevExpress.ui.notify("Appointment deleted");
            });
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2016, 4, 25),
    height: 650,
    onInitialized: function (e) {
        e.component
            .on("appointmentAdded", function (e) {
                DevExpress.ui.notify("Appointment added");
            })
            .on("appointmentUpdated", function (e) {
                DevExpress.ui.notify("Appointment updated");
            })
            .on("appointmentDeleted", function (e) {
                DevExpress.ui.notify("Appointment deleted");
            });
    }
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}

appointmentUpdating

Fires before an appointment is updated in the data source.

Event Handler Argument:
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 approach.
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 allowing you to prevent the appointment from being updated in the data source.

Instead, you can use the onAppointmentUpdating option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div dx-scheduler="{
				dataSource: schedulerData,
				startDayHour: 9,
				endDayHour: 18,
				currentView: 'week',
				currentDate: currentDate,
				height: 650,
				onInitialized: initializedHandler
			}">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2016, 4, 25);
    $scope.initializedHandler = function (e) {
        e.component
            .on("appointmentAdding", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentUpdating", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentDeleting", 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;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div data-bind="dxScheduler: {
			dataSource: schedulerData,
			startDayHour: 9,
			endDayHour: 18,
			currentView: 'week',
			currentDate: new Date(2016, 4, 25),
			height: 650,
			onInitialized: initializedHandler
		}"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var myViewModel = {
    schedulerData: appointments,
    initializedHandler: function (e) {
        e.component
            .on("appointmentAdding", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentUpdating", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentDeleting", 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;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div>Add, delete or update an appointment</div>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2016, 4, 25),
    height: 650,
    onInitialized: function (e) {
        e.component
            .on("appointmentAdding", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Add appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentUpdating", function (e) {
                e.cancel = $.Deferred();
                DevExpress.ui.dialog.confirm("Update appointment?", "Confirm").done(function (dialogResponse) {
                    e.cancel.resolve(!dialogResponse);
                });
            })
            .on("appointmentDeleting", 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;
}
.dx-button {
    margin: 10px;
}

cellClick

Fires after a view cell has been clicked.

Event Handler Argument:
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 approach.
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.

Instead, you can use the onCellClick option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div dx-button="{ text: 'Subscribe to CellClick event', onClick: clickHandler }"></div></br>
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: currentDate,
            height: 650,
            onInitialized: initializedHandler
        }">
        </div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.schedulerData = appointments;
    $scope.currentDate = new Date(2016, 4, 25);
    $scope.schedulerInstance = {};
    $scope.initializedHandler = function (e) {
        $scope.schedulerInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.schedulerInstance
                .on(
                    "cellClick", function (e) { DevExpress.ui.notify("Cell is clicked", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from cellClick event");
            flag = true;
        } else {
            $scope.schedulerInstance.off("cellClick");
            e.component.option("text", "Subscribe to cellClick event");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div data-bind="dxButton: { text: 'Subscribe to CellClick event', onClick: clickHandler }"></div></br>
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: new Date(2016, 4, 25),
            height: 650,
            onInitialized: initializedHandler
        }"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var flag = false;
var myViewModel = {
    schedulerData: appointments,
    schedulerInstance: {},
    initializedHandler: function (e) {
        myViewModel.schedulerInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.schedulerInstance
                .on(
                    "cellClick", function (e) { DevExpress.ui.notify("Cell is clicked", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from cellClick event");
            flag = true;
        } else {
            myViewModel.schedulerInstance.off("cellClick");
            e.component.option("text", "Subscribe to cellClick event");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}
<div class="demo-page">
    <div class="wrapper">
        <div id="button"></div></br>
        <div id="myScheduler"></div>
    </div>
</div>
var appointments = [
    {
        text: 'Website Re-Design Plan',
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 11, 30)
    },
    {
        text: 'Approve Personal Computer Upgrade',
        startDate: new Date(2016, 4, 26, 10, 0),
        endDate: new Date(2016, 4, 26, 11, 0)
    },
    {
        text: 'Install New Database',
        startDate: new Date(2016, 4, 27, 9, 45),
        endDate: new Date(2016, 4, 27, 11, 15)
    },
    {
        text: 'Prepare Marketing Plan',
        startDate: new Date(2016, 4, 28, 11, 0),
        endDate: new Date(2016, 4, 28, 13, 30)
    },
    {
        text: 'Launch New Website',
        startDate: new Date(2016, 4, 29, 10, 20),
        endDate: new Date(2016, 4, 29, 12, 0)
    }
];
var flag = false;
$("#myScheduler").dxScheduler({
    dataSource: appointments,
    startDayHour: 9,
    endDayHour: 18,
    currentView: 'week',
    currentDate: new Date(2016, 4, 25),
    height: 650
});
$("#button").dxButton({
    text: 'Subscribe to CellClick event',
    onClick: function (e) {
        if (flag === false) {
            $("#myScheduler").dxScheduler("instance")
                .on(
                    "cellClick", function (e) { DevExpress.ui.notify("Cell is clicked", "success", 1500); }
                );
            e.component.option("text", "Unsubscribe from CellClick event");
            flag = true;
        } else {
            $("#myScheduler").dxScheduler("instance").off("cellClick");
            e.component.option("text", "Subscribe to CellClick event");
            flag = false;
        }
    }
});
.wrapper{
    padding: 20px;
}
.demo-page{
    height: 700px;
    margin: 0 auto;
}
.dx-button {
    margin: 10px;
}

contentReady

Fires when the widget content is ready.

Event Handler Argument:
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 approach.

Instead, you can use the onContentReady option to handle the event.

If data displayed by the widget is specified using a DataSource instance, the contentReady event fires each time the load() method of the DataSource instance is called as well as when the widget content is ready or an appointment is modified.

See Also

disposing

Fires when the widget is being removed.

Event Handler Argument:
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 approach.

Instead, you can use the onDisposing option to handle the event.

See Also

NOTE: This event fires only if the widget is removed using the remove(), empty(), or html() jQuery methods.

initialized

Fires when the widget is initialized.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.

Instead, you can use the onInitialized option to handle the event.

See Also

optionChanged

Fires after an option of the component is changed.

Event Handler Argument:
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 approach.

Instead, you can use the onOptionChanged option to handle the event.

See Also