Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
$(() => {
function showToast(event, value, type) {
DevExpress.ui.notify(`${event} "${value}" task`, type, 800);
}
const scheduler = $('#scheduler').dxScheduler({
timeZone: 'America/Los_Angeles',
dataSource: data,
views: ['day', 'week'],
currentView: 'week',
currentDate: new Date(2021, 3, 29),
startDayHour: 9,
endDayHour: 19,
editing: {
allowAdding: true,
allowDeleting: true,
allowUpdating: true,
allowResizing: true,
allowDragging: true,
},
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,
}).dxScheduler('instance');
$('#allow-adding').dxCheckBox({
text: 'Allow adding',
value: true,
onValueChanged(e) {
scheduler.option('editing.allowAdding', e.value);
},
});
$('#allow-deleting').dxCheckBox({
text: 'Allow deleting',
value: true,
onValueChanged(e) {
scheduler.option('editing.allowDeleting', e.value);
},
});
$('#allow-updating').dxCheckBox({
text: 'Allow updating',
value: true,
onValueChanged(e) {
scheduler.option('editing.allowUpdating', e.value);
dragging.option('disabled', !e.value);
resizing.option('disabled', !e.value);
},
});
const resizing = $('#allow-resizing').dxCheckBox({
text: 'Allow resizing',
value: true,
onValueChanged(e) {
scheduler.option('editing.allowResizing', e.value);
},
}).dxCheckBox('instance');
const dragging = $('#allow-dragging').dxCheckBox({
text: 'Allow dragging',
value: true,
onValueChanged(e) {
scheduler.option('editing.allowDragging', e.value);
},
}).dxCheckBox('instance');
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<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=5.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>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" />
<script src="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"></div>
<div class="options">
<div class="caption">Options</div>
<div class="options-container">
<div class="option">
<div id="allow-adding"></div>
</div>
<div class="option">
<div id="allow-deleting"></div>
</div>
<div class="option">
<div id="allow-updating"></div>
</div>
<div class="option">
<div id="allow-resizing"></div>
</div>
<div class="option">
<div id="allow-dragging"></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%;
}
.options-container {
display: flex;
align-items: center;
}
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'),
},
];
These operations raise events that you can handle with the following functions:
In this demo, we configured the handlers to display a toast message after a user performs an edit operation.
Users can edit appointment data in the appointment details form. To open it, they need to double-click the appointment. You can use the onAppointmentFormOpening function to customize the form.