Your search did not match any results.
Documentation

This demo shows how to create a context menu for appointments and cells using the onAppointmentContextMenu and onCellContextMenu functions.

Copy to CodePen
Apply
Reset
$(function() { $("#scheduler").dxScheduler({ dataSource: data, views: ["day", "month"], currentView: "month", currentDate: new Date(2017, 4, 25), firstDayOfWeek: 1, startDayHour: 9, groups: undefined, recurrenceEditMode: "series", onAppointmentContextMenu: function(e) { var contextMenuEvent = e; $("#appointment-context-menu").dxContextMenu({ dataSource: appointmentContextMenuItems, width: 200, target: ".dx-scheduler-appointment", itemTemplate: function(itemData) { var template = getAppointmentMenuTemplate(itemData); return template; }, onItemClick: function(e) { if(!e.itemData.items && e.itemData.onItemClick) { e.itemData.onItemClick(contextMenuEvent, e); } } }); }, onCellContextMenu: function(e) { var contextMenuEvent = e; $("#context-menu").dxContextMenu({ dataSource: cellContextMenuItems, width: 200, target: ".dx-scheduler-date-table-cell", onItemClick: function(e) { e.itemData.onItemClick(contextMenuEvent); } }); }, resources: [{ fieldExpr: "roomId", dataSource: resourcesData, label: "Room" }], height: 600 }); var createAppointment = function(e) { var scheduler = e.component, data = e.cellData; scheduler.showAppointmentPopup({ startDate: data.startDate }, true); }; var createRecurringAppointment = function(e) { var scheduler = e.component, data = e.cellData; scheduler.showAppointmentPopup({ startDate: data.startDate, recurrenceRule: "FREQ=DAILY" }, true); }; var groupCell = function(e) { var scheduler = e.component; if(scheduler.option("groups")) { scheduler.option("crossScrollingEnabled", false); scheduler.option("groups", undefined); } else { scheduler.option("crossScrollingEnabled", true); scheduler.option("groups", ["roomId"]); } }; var showCurrentDate = function(e) { var scheduler = e.component; scheduler.option("currentDate", new Date()); }; var showAppointment = function(e) { var scheduler = e.component, itemData = e.appointmentData; scheduler.showAppointmentPopup(itemData); }; var deleteAppointment = function(e) { var scheduler = e.component, itemData = e.appointmentData; scheduler.deleteAppointment(itemData); }; var repeatAppointmentWeekly = function(e) { var scheduler = e.component, itemData = e.appointmentData, targetedAppointmentData = e.targetedAppointmentData; scheduler.updateAppointment(itemData, $.extend(itemData, { startDate: targetedAppointmentData.startDate, recurrenceRule: "FREQ=WEEKLY" })); }; var setResource = function(e, clickEvent) { var scheduler = e.component, itemData = e.appointmentData; scheduler.updateAppointment(itemData, $.extend(itemData, { roomId: [clickEvent.itemData.id] })); }; var cellContextMenuItems = [ { text: 'New Appointment', onItemClick: createAppointment }, { text: 'New Recurring Appointment', onItemClick: createRecurringAppointment }, { text: 'Group by Room/Ungroup', beginGroup: true, onItemClick: groupCell }, { text: 'Go to Today', onItemClick: showCurrentDate } ]; var appointmentContextMenuItems = [ { text: 'Open', onItemClick: showAppointment }, { text: 'Delete', onItemClick: deleteAppointment }, { text: 'Repeat Weekly', beginGroup: true, onItemClick: repeatAppointmentWeekly }, { text: 'Set Room', beginGroup: true, disabled: true } ]; var getAppointmentMenuTemplate = function(itemData) { var template = $('<div></div>'); if(itemData.color) { template.append("<div class='item-badge' style='background-color:" + itemData.color + ";'></div>"); } template.append(itemData.text); if(itemData.text === "New Appointment until the end of the week") { template.append('<hr />'); } return template; }; var roomsData = resourcesData; $.each(roomsData, function (i, item) { item.onItemClick = setResource; }); appointmentContextMenuItems = $.merge(appointmentContextMenuItems, roomsData); });
<!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.1.0/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/18.1.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/18.1.6/js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="context-menu"></div> <div id="appointment-context-menu"></div> <div id="scheduler"></div> </div> </body> </html>
.dx-menu-item-content span { margin-right: 5px; } .dx-menu-item-has-submenu .dx-icon-spinright { position: absolute; top: 7px; right: 2px; } .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; }
var data = [ { text: "Watercolor Landscape", roomId: [1], startDate: new Date(2017, 4, 1, 9, 30), endDate: new Date(2017, 4, 1, 11), recurrenceRule: "FREQ=WEEKLY;BYDAY=TU,FR;COUNT=10" }, { text: "Oil Painting for Beginners", roomId: [2], startDate: new Date(2017, 4, 1, 9, 30), endDate: new Date(2017, 4, 1, 11), recurrenceRule: "FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10" }, { text: "Testing", roomId: [3], startDate: new Date(2017, 4, 1, 12, 0), endDate: new Date(2017, 4, 1, 13, 0), recurrenceRule: "FREQ=WEEKLY;BYDAY=MO;WKST=TU;INTERVAL=2;COUNT=2" }, { text: "Meeting of Instructors", roomId: [4], startDate: new Date(2017, 4, 1, 9, 0), endDate: new Date(2017, 4, 1, 9, 15), recurrenceRule: "FREQ=DAILY;BYDAY=WE;UNTIL=20170601" }, { text: "Recruiting students", roomId: [5], startDate: new Date(2017, 4, 26, 10, 0), endDate: new Date(2017, 4, 26, 11, 0), recurrenceRule: "FREQ=YEARLY;BYWEEKNO=23", recurrenceException: "20170611T100000" }, { text: "Final exams", roomId: [3], startDate: new Date(2017, 4, 26, 12, 0), endDate: new Date(2017, 4, 26, 13, 35), recurrenceRule: "FREQ=YEARLY;BYWEEKNO=24;BYDAY=TH,FR" }, { text: "Monthly Planning", roomId: [4], startDate: new Date(2017, 4, 26, 14, 30), endDate: new Date(2017, 4, 26, 15, 45), recurrenceRule: "FREQ=MONTHLY;BYMONTHDAY=27;COUNT=1" }, { text: "Open Day", roomId: [5], startDate: new Date(2017, 4, 1, 9, 30), endDate: new Date(2017, 4, 1, 13), recurrenceRule: "FREQ=YEARLY;BYYEARDAY=148" } ]; var resourcesData = [ { text: "Room 101", id: 1, color: "#bbd806" }, { text: "Room 102", id: 2, color: "#f34c8a" }, { text: "Room 103", id: 3, color: "#ae7fcc" }, { text: "Meeting room", id: 4, color: "#ff8817" }, { text: "Conference hall", id: 5, color: "#03bb92" } ];