Context Menu - JavaScript/jQuery Scheduler

$(() => { $('#scheduler').dxScheduler({ timeZone: 'America/Los_Angeles', dataSource: data, views: ['day', 'month'], currentView: 'month', currentDate: new Date(2020, 10, 25), startDayHour: 9, recurrenceEditMode: 'series', groups: [], onAppointmentContextMenu(e) { const items = getAppointmentContextMenuItems(e); contextMenuInstance.option('dataSource', items); }, onCellContextMenu(e) { const items = getCellContextMenuItems(e); contextMenuInstance.option('dataSource', items); }, resources: [{ fieldExpr: 'roomId', dataSource: resourcesData, label: 'Room', icon: 'conferenceroomoutline', }], height: 730, }); const contextMenuInstance = $('#context-menu').dxContextMenu({ width: 200, dataSource: [], target: '#scheduler', itemTemplate: contextMenuItemTemplate, onItemClick: (e) => { e.itemData.onItemClick(e); }, onHiding: (e) => { e.component.option('dataSource', []); }, }).dxContextMenu('instance'); function contextMenuItemTemplate(itemData) { const template = $('<div></div>'); if (itemData.color) { $('<div>') .addClass('item-badge') .css('background-color', itemData.color) .appendTo(template); } template.append(itemData.text); return template; } function getAppointmentContextMenuItems(e) { const scheduler = e.component; const { appointmentData: appointment, targetedAppointmentData: targetedAppointment } = e; return [ { text: 'Open', onItemClick: () => { scheduler.showAppointmentPopup(appointment); }, }, { text: 'Delete', onItemClick: () => { scheduler.deleteAppointment(appointment); }, }, { text: 'Repeat Weekly', beginGroup: true, onItemClick: () => { scheduler.updateAppointment(appointment, $.extend(appointment, { startDate: targetedAppointment.startDate, recurrenceRule: 'FREQ=WEEKLY', })); }, }, { text: 'Set Room', beginGroup: true, disabled: true, }, ...resourcesData.map((item) => ({ ...item, onItemClick: (clickEvent) => { scheduler.updateAppointment(appointment, $.extend(appointment, { roomId: [clickEvent.itemData.id], })); }, })), ]; } function getCellContextMenuItems(e) { const scheduler = e.component; return [ { text: 'New Appointment', onItemClick: () => { scheduler.showAppointmentPopup({ startDate: e.cellData.startDateUTC, }, true); }, }, { text: 'New Recurring Appointment', onItemClick: () => { scheduler.showAppointmentPopup({ startDate: e.cellData.startDateUTC, recurrenceRule: 'FREQ=DAILY', }, true); }, }, { text: 'Group by Room/Ungroup', beginGroup: true, onItemClick: () => { if (scheduler.option('groups').length) { scheduler.option({ crossScrollingEnabled: false, groups: [] }); } else { scheduler.option({ crossScrollingEnabled: true, groups: ['roomId'] }); } }, }, { text: 'Go to Today', onItemClick: () => { scheduler.option('currentDate', new Date()); }, }, ]; } });

<!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/25.2.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="js/dx.all.js?v=25.2.5"></script> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="scheduler"></div> <div id="context-menu"></div> </div> </body> </html>

.item-badge { text-align: center; float: left; margin-right: 12px; color: white; width: 18px; height: 18px; font-size: 19.5px; border-radius: 18px; margin-top: 2px; }

JavaScript/jQuery Scheduler - Context Menu