window.onload = function () {
function showToast(event, value, type) {
DevExpress.ui.notify(`${event} "${value}" task`, type, 800);
}
const allowAddingValue = ko.observable(true);
const allowDeletingValue = ko.observable(true);
const allowUpdatingValue = ko.observable(true);
const allowResizingValue = ko.observable(true);
const allowDraggingValue = ko.observable(true);
const disabledValue = ko.observable(false);
const viewModel = {
schedulerOptions: {
timeZone: 'America/Los_Angeles',
dataSource: data,
views: ['day', 'week'],
currentView: 'week',
currentDate: new Date(2021, 3, 29),
startDayHour: 9,
endDayHour: 19,
editing: {
allowAdding: allowAddingValue,
allowDeleting: allowDeletingValue,
allowUpdating: allowUpdatingValue,
allowResizing: allowResizingValue,
allowDragging: allowDraggingValue,
},
onAppointmentAdded(e) {
showToast('Added', e.appointmentData.text, 'success');
},
onAppointmentUpdated(e) {
showToast('Updated', e.appointmentData.text, 'info');
},
onAppointmentDeleted(e) {
showToast('Deleted', e.appointmentData.text, 'warning');
},
height: 600,
},
allowAddingOptions: {
text: 'Allow adding',
value: allowAddingValue,
},
allowDeletingOptions: {
text: 'Allow deleting',
value: allowDeletingValue,
},
allowUpdatingOptions: {
text: 'Allow updating',
onValueChanged(data) {
disabledValue(!data.value);
},
value: allowUpdatingValue,
},
allowResizingOptions: {
text: 'Allow resizing',
disabled: disabledValue,
value: allowResizingValue,
},
allowDraggingOptions: {
text: 'Allow dragging',
disabled: disabledValue,
value: allowDraggingValue,
},
};
ko.applyBindings(viewModel, document.getElementById('scheduler-demo'));
};
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.3/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="scheduler-demo">
<div data-bind="dxScheduler: schedulerOptions"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div data-bind="dxCheckBox: allowAddingOptions"></div>
</div>
<div class="option">
<div data-bind="dxCheckBox: allowDeletingOptions"></div>
</div>
<div class="option">
<div data-bind="dxCheckBox: allowUpdatingOptions"></div>
</div>
<div class="option">
<div data-bind="dxCheckBox: allowResizingOptions"></div>
</div>
<div class="option">
<div data-bind="dxCheckBox: allowDraggingOptions"></div>
</div>
</div>
</div>
</div>
</body>
</html>
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
display: inline-block;
width: 19%;
}
const data = [
{
text: 'Website Re-Design Plan',
startDate: new Date('2021-04-26T16:30:00.000Z'),
endDate: new Date('2021-04-26T18:30:00.000Z'),
}, {
text: 'Book Flights to San Fran for Sales Trip',
startDate: new Date('2021-04-26T19:00:00.000Z'),
endDate: new Date('2021-04-26T20:00:00.000Z'),
allDay: true,
}, {
text: 'Install New Router in Dev Room',
startDate: new Date('2021-04-26T21:30:00.000Z'),
endDate: new Date('2021-04-26T22:30:00.000Z'),
}, {
text: 'Approve Personal Computer Upgrade Plan',
startDate: new Date('2021-04-27T17:00:00.000Z'),
endDate: new Date('2021-04-27T18:00:00.000Z'),
}, {
text: 'Final Budget Review',
startDate: new Date('2021-04-27T19:00:00.000Z'),
endDate: new Date('2021-04-27T20:35:00.000Z'),
}, {
text: 'New Brochures',
startDate: new Date('2021-04-27T21:30:00.000Z'),
endDate: new Date('2021-04-27T22:45:00.000Z'),
}, {
text: 'Install New Database',
startDate: new Date('2021-04-28T16:45:00.000Z'),
endDate: new Date('2021-04-28T18:15:00.000Z'),
}, {
text: 'Approve New Online Marketing Strategy',
startDate: new Date('2021-04-28T19:00:00.000Z'),
endDate: new Date('2021-04-28T21:00:00.000Z'),
}, {
text: 'Upgrade Personal Computers',
startDate: new Date('2021-04-28T22:15:00.000Z'),
endDate: new Date('2021-04-28T23:30:00.000Z'),
}, {
text: 'Customer Workshop',
startDate: new Date('2021-04-29T18:00:00.000Z'),
endDate: new Date('2021-04-29T19:00:00.000Z'),
allDay: true,
}, {
text: 'Prepare 2021 Marketing Plan',
startDate: new Date('2021-04-29T18:00:00.000Z'),
endDate: new Date('2021-04-29T20:30:00.000Z'),
}, {
text: 'Brochure Design Review',
startDate: new Date('2021-04-29T21:00:00.000Z'),
endDate: new Date('2021-04-29T22:30:00.000Z'),
}, {
text: 'Create Icons for Website',
startDate: new Date('2021-04-30T17:00:00.000Z'),
endDate: new Date('2021-04-30T18:30:00.000Z'),
}, {
text: 'Upgrade Server Hardware',
startDate: new Date('2021-04-30T21:30:00.000Z'),
endDate: new Date('2021-04-30T23:00:00.000Z'),
}, {
text: 'Submit New Website Design',
startDate: new Date('2021-04-30T23:30:00.000Z'),
endDate: new Date('2021-05-01T01:00:00.000Z'),
}, {
text: 'Launch New Website',
startDate: new Date('2021-04-30T19:20:00.000Z'),
endDate: new Date('2021-04-30T21:00:00.000Z'),
},
];