Configuration editing

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

Type: Boolean|Object
Default Value: true

allowAdding

Specifies whether or not an end-user can add appointments.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <p dx-check-box="{
                text: 'Allow adding',
                bindingOptions: {
                    value: 'editing.allowAdding'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow deleting',
                bindingOptions: {
                    value: 'editing.allowDeleting'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow dragging',
                bindingOptions: {
                    value: 'editing.allowDragging'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow resizing',
                bindingOptions: {
                    value: 'editing.allowResizing'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow updating',
                bindingOptions: {
                    value: 'editing.allowUpdating'
                }
            }"></p>
        </div>
    </div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            editing: 'editing'
        }
    }">
    </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.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
    $scope.editing = {
        allowAdding: true,
        allowUpdating: true,
        allowDeleting: true,
        allowResizing: true,
        allowDragging: true
    };
});
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-checkbox{
    display: inline-block;
    margin-right: 15px
}
<div class="wrapper">
    <div class="option">
        <div>
            <p data-bind="dxCheckBox: {
                text: 'Allow adding',
                value: allowAddingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow deleting',
                value: allowDeletingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow dragging',
                value: allowDraggingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow resizing',
                value: allowResizingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow updating',
                value: allowUpdatingValue
            }"></p>
        </div>
    </div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25),
        editing:{
            allowAdding: allowAddingValue,
            allowDeleting: allowDeletingValue,
            allowDragging: allowDraggingValue,
            allowResizing: allowResizingValue,
            allowUpdating: allowUpdatingValue
        }
    }">
    </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,
    allowAddingValue: ko.observable(true),
    allowDeletingValue: ko.observable(true),
    allowDraggingValue: ko.observable(true),
    allowResizingValue: ko.observable(true),
    allowUpdatingValue: ko.observable(true)
};
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-checkbox{
    display: inline-block;
    margin-right: 15px
}
<div class="wrapper">
    <div class="option">
        <div>
            <p id="addingCheckBox"></p>
            <p id="deletingCheckBox"></p>
            <p id="draggingCheckBox"></p>
            <p id="resizingCheckBox"></p>
            <p id="updatingCheckBox"></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({
        dataSource: appointments,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    });
    $("#addingCheckBox").dxCheckBox({
        text: 'Allow adding',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowAdding', e.value);
        }
    });
    $("#deletingCheckBox").dxCheckBox({
        text: 'Allow deleting',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowDeleting', e.value);
        }
    });
    $("#draggingCheckBox").dxCheckBox({
        text: 'Allow dragging',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowDragging', e.value);
        }
    });
    $("#resizingCheckBox").dxCheckBox({
        text: 'Allow resizing',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowResizing', e.value);
        }
    });
    $("#updatingCheckBox").dxCheckBox({
        text: 'Allow updating',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowUpdating', 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-checkbox{
    display: inline-block;
    margin-right: 15px
}

allowDeleting

Specifies whether or not an end-user can delete appointments.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <p dx-check-box="{
                text: 'Allow adding',
                bindingOptions: {
                    value: 'editing.allowAdding'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow deleting',
                bindingOptions: {
                    value: 'editing.allowDeleting'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow dragging',
                bindingOptions: {
                    value: 'editing.allowDragging'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow resizing',
                bindingOptions: {
                    value: 'editing.allowResizing'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow updating',
                bindingOptions: {
                    value: 'editing.allowUpdating'
                }
            }"></p>
        </div>
    </div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            editing: 'editing'
        }
    }">
    </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.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
    $scope.editing = {
        allowAdding: true,
        allowUpdating: true,
        allowDeleting: true,
        allowResizing: true,
        allowDragging: true
    };
});
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-checkbox{
    display: inline-block;
    margin-right: 15px
}
<div class="wrapper">
    <div class="option">
        <div>
            <p data-bind="dxCheckBox: {
                text: 'Allow adding',
                value: allowAddingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow deleting',
                value: allowDeletingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow dragging',
                value: allowDraggingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow resizing',
                value: allowResizingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow updating',
                value: allowUpdatingValue
            }"></p>
        </div>
    </div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25),
        editing:{
            allowAdding: allowAddingValue,
            allowDeleting: allowDeletingValue,
            allowDragging: allowDraggingValue,
            allowResizing: allowResizingValue,
            allowUpdating: allowUpdatingValue
        }
    }">
    </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,
    allowAddingValue: ko.observable(true),
    allowDeletingValue: ko.observable(true),
    allowDraggingValue: ko.observable(true),
    allowResizingValue: ko.observable(true),
    allowUpdatingValue: ko.observable(true)
};
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-checkbox{
    display: inline-block;
    margin-right: 15px
}
<div class="wrapper">
    <div class="option">
        <div>
            <p id="addingCheckBox"></p>
            <p id="deletingCheckBox"></p>
            <p id="draggingCheckBox"></p>
            <p id="resizingCheckBox"></p>
            <p id="updatingCheckBox"></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({
        dataSource: appointments,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    });
    $("#addingCheckBox").dxCheckBox({
        text: 'Allow adding',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowAdding', e.value);
        }
    });
    $("#deletingCheckBox").dxCheckBox({
        text: 'Allow deleting',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowDeleting', e.value);
        }
    });
    $("#draggingCheckBox").dxCheckBox({
        text: 'Allow dragging',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowDragging', e.value);
        }
    });
    $("#resizingCheckBox").dxCheckBox({
        text: 'Allow resizing',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowResizing', e.value);
        }
    });
    $("#updatingCheckBox").dxCheckBox({
        text: 'Allow updating',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowUpdating', 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-checkbox{
    display: inline-block;
    margin-right: 15px
}

allowDragging

Specifies whether or not an end-user can drag appointments.

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

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <p dx-check-box="{
                text: 'Allow adding',
                bindingOptions: {
                    value: 'editing.allowAdding'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow deleting',
                bindingOptions: {
                    value: 'editing.allowDeleting'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow dragging',
                bindingOptions: {
                    value: 'editing.allowDragging'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow resizing',
                bindingOptions: {
                    value: 'editing.allowResizing'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow updating',
                bindingOptions: {
                    value: 'editing.allowUpdating'
                }
            }"></p>
        </div>
    </div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            editing: 'editing'
        }
    }">
    </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.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
    $scope.editing = {
        allowAdding: true,
        allowUpdating: true,
        allowDeleting: true,
        allowResizing: true,
        allowDragging: true
    };
});
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-checkbox{
    display: inline-block;
    margin-right: 15px
}
<div class="wrapper">
    <div class="option">
        <div>
            <p data-bind="dxCheckBox: {
                text: 'Allow adding',
                value: allowAddingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow deleting',
                value: allowDeletingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow dragging',
                value: allowDraggingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow resizing',
                value: allowResizingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow updating',
                value: allowUpdatingValue
            }"></p>
        </div>
    </div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25),
        editing:{
            allowAdding: allowAddingValue,
            allowDeleting: allowDeletingValue,
            allowDragging: allowDraggingValue,
            allowResizing: allowResizingValue,
            allowUpdating: allowUpdatingValue
        }
    }">
    </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,
    allowAddingValue: ko.observable(true),
    allowDeletingValue: ko.observable(true),
    allowDraggingValue: ko.observable(true),
    allowResizingValue: ko.observable(true),
    allowUpdatingValue: ko.observable(true)
};
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-checkbox{
    display: inline-block;
    margin-right: 15px
}
<div class="wrapper">
    <div class="option">
        <div>
            <p id="addingCheckBox"></p>
            <p id="deletingCheckBox"></p>
            <p id="draggingCheckBox"></p>
            <p id="resizingCheckBox"></p>
            <p id="updatingCheckBox"></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({
        dataSource: appointments,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    });
    $("#addingCheckBox").dxCheckBox({
        text: 'Allow adding',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowAdding', e.value);
        }
    });
    $("#deletingCheckBox").dxCheckBox({
        text: 'Allow deleting',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowDeleting', e.value);
        }
    });
    $("#draggingCheckBox").dxCheckBox({
        text: 'Allow dragging',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowDragging', e.value);
        }
    });
    $("#resizingCheckBox").dxCheckBox({
        text: 'Allow resizing',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowResizing', e.value);
        }
    });
    $("#updatingCheckBox").dxCheckBox({
        text: 'Allow updating',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowUpdating', 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-checkbox{
    display: inline-block;
    margin-right: 15px
}

allowResizing

Specifies whether or not an end-user can change an appointment duration.

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

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <p dx-check-box="{
                text: 'Allow adding',
                bindingOptions: {
                    value: 'editing.allowAdding'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow deleting',
                bindingOptions: {
                    value: 'editing.allowDeleting'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow dragging',
                bindingOptions: {
                    value: 'editing.allowDragging'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow resizing',
                bindingOptions: {
                    value: 'editing.allowResizing'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow updating',
                bindingOptions: {
                    value: 'editing.allowUpdating'
                }
            }"></p>
        </div>
    </div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            editing: 'editing'
        }
    }">
    </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.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
    $scope.editing = {
        allowAdding: true,
        allowUpdating: true,
        allowDeleting: true,
        allowResizing: true,
        allowDragging: true
    };
});
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-checkbox{
    display: inline-block;
    margin-right: 15px
}
<div class="wrapper">
    <div class="option">
        <div>
            <p data-bind="dxCheckBox: {
                text: 'Allow adding',
                value: allowAddingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow deleting',
                value: allowDeletingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow dragging',
                value: allowDraggingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow resizing',
                value: allowResizingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow updating',
                value: allowUpdatingValue
            }"></p>
        </div>
    </div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25),
        editing:{
            allowAdding: allowAddingValue,
            allowDeleting: allowDeletingValue,
            allowDragging: allowDraggingValue,
            allowResizing: allowResizingValue,
            allowUpdating: allowUpdatingValue
        }
    }">
    </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,
    allowAddingValue: ko.observable(true),
    allowDeletingValue: ko.observable(true),
    allowDraggingValue: ko.observable(true),
    allowResizingValue: ko.observable(true),
    allowUpdatingValue: ko.observable(true)
};
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-checkbox{
    display: inline-block;
    margin-right: 15px
}
<div class="wrapper">
    <div class="option">
        <div>
            <p id="addingCheckBox"></p>
            <p id="deletingCheckBox"></p>
            <p id="draggingCheckBox"></p>
            <p id="resizingCheckBox"></p>
            <p id="updatingCheckBox"></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({
        dataSource: appointments,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    });
    $("#addingCheckBox").dxCheckBox({
        text: 'Allow adding',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowAdding', e.value);
        }
    });
    $("#deletingCheckBox").dxCheckBox({
        text: 'Allow deleting',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowDeleting', e.value);
        }
    });
    $("#draggingCheckBox").dxCheckBox({
        text: 'Allow dragging',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowDragging', e.value);
        }
    });
    $("#resizingCheckBox").dxCheckBox({
        text: 'Allow resizing',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowResizing', e.value);
        }
    });
    $("#updatingCheckBox").dxCheckBox({
        text: 'Allow updating',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowUpdating', 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-checkbox{
    display: inline-block;
    margin-right: 15px
}

allowUpdating

Specifies whether or not an end-user can change appointment options.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <p dx-check-box="{
                text: 'Allow adding',
                bindingOptions: {
                    value: 'editing.allowAdding'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow deleting',
                bindingOptions: {
                    value: 'editing.allowDeleting'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow dragging',
                bindingOptions: {
                    value: 'editing.allowDragging'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow resizing',
                bindingOptions: {
                    value: 'editing.allowResizing'
                }
            }"></p>
            <p dx-check-box="{
                text: 'Allow updating',
                bindingOptions: {
                    value: 'editing.allowUpdating'
                }
            }"></p>
        </div>
    </div>
    <div dx-scheduler="{
        dataSource: schedulerDataSource,
        currentView: 'week',
        currentDate: date,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        bindingOptions: {
            editing: 'editing'
        }
    }">
    </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.schedulerDataSource = appointments;
    $scope.date = new Date(2015, 4, 25);
    $scope.editing = {
        allowAdding: true,
        allowUpdating: true,
        allowDeleting: true,
        allowResizing: true,
        allowDragging: true
    };
});
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-checkbox{
    display: inline-block;
    margin-right: 15px
}
<div class="wrapper">
    <div class="option">
        <div>
            <p data-bind="dxCheckBox: {
                text: 'Allow adding',
                value: allowAddingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow deleting',
                value: allowDeletingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow dragging',
                value: allowDraggingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow resizing',
                value: allowResizingValue
            }"></p>
            <p data-bind="dxCheckBox: {
                text: 'Allow updating',
                value: allowUpdatingValue
            }"></p>
        </div>
    </div>
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource,
        currentView: 'week',
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25),
        editing:{
            allowAdding: allowAddingValue,
            allowDeleting: allowDeletingValue,
            allowDragging: allowDraggingValue,
            allowResizing: allowResizingValue,
            allowUpdating: allowUpdatingValue
        }
    }">
    </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,
    allowAddingValue: ko.observable(true),
    allowDeletingValue: ko.observable(true),
    allowDraggingValue: ko.observable(true),
    allowResizingValue: ko.observable(true),
    allowUpdatingValue: ko.observable(true)
};
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-checkbox{
    display: inline-block;
    margin-right: 15px
}
<div class="wrapper">
    <div class="option">
        <div>
            <p id="addingCheckBox"></p>
            <p id="deletingCheckBox"></p>
            <p id="draggingCheckBox"></p>
            <p id="resizingCheckBox"></p>
            <p id="updatingCheckBox"></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({
        currentView: 'week',
        dataSource: appointments,
        startDayHour: 9,
        endDayHour: 18,
        height: 500,
        currentDate: new Date(2015, 4, 25)
    });
    $("#addingCheckBox").dxCheckBox({
        text: 'Allow adding',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowAdding', e.value);
        }
    });
    $("#deletingCheckBox").dxCheckBox({
        text: 'Allow deleting',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowDeleting', e.value);
        }
    });
    $("#draggingCheckBox").dxCheckBox({
        text: 'Allow dragging',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowDragging', e.value);
        }
    });
    $("#resizingCheckBox").dxCheckBox({
        text: 'Allow resizing',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowResizing', e.value);
        }
    });
    $("#updatingCheckBox").dxCheckBox({
        text: 'Allow updating',
        value: true,
        onValueChanged: function (e) {
            $("#scheduler").dxScheduler("instance").option('editing.allowUpdating', 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-checkbox{
    display: inline-block;
    margin-right: 15px
}