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
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.groups = undefined; $scope.crossScrolling = false; $scope.currentDate = new Date(2017, 4, 25); $scope.contextMenuCellData = {}; $scope.contextMenuAppointmentData = {}; $scope.contextMenuTargetedAppointmentData = {}; $scope.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 } ]; $scope.appointmentContextMenuItems = [ { text: 'Open', onItemClick: showAppointment }, { text: 'Delete', onItemClick: deleteAppointment }, { text: 'Repeat Weekly', beginGroup: true, onItemClick: repeatAppointmentWeekly }, { text: 'Set Room', beginGroup: true, disabled: true } ]; var roomsData = resourcesData; $.each(roomsData, function(i, item) { item.onItemClick = setResource; }); $scope.appointmentContextMenuItems = $.merge($scope.appointmentContextMenuItems, roomsData); $scope.cellContextMenuOptions = { target: ".dx-scheduler-date-table-cell", dataSource: $scope.cellContextMenuItems, width: 200, onItemClick: function(e) { e.itemData.onItemClick(e.itemData); } }; $scope.appointmentContextMenuOptions = { target: ".dx-scheduler-appointment", dataSource: $scope.appointmentContextMenuItems, width: 200, itemTemplate: "item-template", onItemClick: function(e) { e.itemData.onItemClick(e.itemData); } }; $scope.schedulerOptions = { bindingOptions: { groups: "groups", crossScrollingEnabled: "crossScrolling", currentDate: "currentDate" }, dataSource: data, views: ["day", "month"], currentView: "month", currentDate: new Date(2017, 4, 28), firstDayOfWeek: 1, startDayHour: 9, recurrenceEditMode: "series", onAppointmentContextMenu: function(e) { $scope.contextMenuTargetedAppointmentData = e.targetedAppointmentData; $scope.contextMenuAppointmentData = e.appointmentData; }, onCellContextMenu: function(e) { $scope.contextMenuCellData = e.cellData; }, resources: [{ fieldExpr: "roomId", dataSource: resourcesData, label: "Room" }], height: 600 }; function createAppointment(e) { var scheduler = $('#scheduler').dxScheduler('instance'); scheduler.showAppointmentPopup({ startDate: $scope.contextMenuCellData.startDate }, true); } function createRecurringAppointment(e) { var scheduler = $('#scheduler').dxScheduler('instance'); scheduler.showAppointmentPopup({ startDate: $scope.contextMenuCellData.startDate, recurrenceRule: "FREQ=DAILY" }, true); } function groupCell(e) { if($scope.groups && $scope.groups.length) { $scope.crossScrolling = false; $scope.groups = undefined; } else { $scope.crossScrolling = true; $scope.groups = ["roomId"]; } } function showCurrentDate(e) { $scope.currentDate = new Date(); } function showAppointment(e) { var scheduler = $('#scheduler').dxScheduler('instance'); scheduler.showAppointmentPopup($scope.contextMenuAppointmentData); } function deleteAppointment(e) { var scheduler = $('#scheduler').dxScheduler('instance'); scheduler.deleteAppointment($scope.contextMenuAppointmentData); } function repeatAppointmentWeekly(e) { var scheduler = $('#scheduler').dxScheduler('instance'); scheduler.updateAppointment($scope.contextMenuAppointmentData, $.extend($scope.contextMenuAppointmentData, { startDate: $scope.contextMenuTargetedAppointmentData.startDate, recurrenceRule: "FREQ=WEEKLY" })); } function setResource(itemData) { var scheduler = $('#scheduler').dxScheduler('instance'); scheduler.updateAppointment($scope.contextMenuAppointmentData, $.extend($scope.contextMenuAppointmentData, { roomId: [itemData.id] })); } });
<!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://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/18.1.6/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" ng-app="DemoApp" ng-controller="DemoController"> <div id="scheduler" dx-scheduler="schedulerOptions"></div> <div id="context-menu" dx-context-menu="cellContextMenuOptions"></div> <div id="appointment-context-menu" dx-context-menu="appointmentContextMenuOptions" dx-item-alias="item"> <div data-options="dxTemplate: {name: 'item-template'} "> <div ng-if="item.color"> <div class="item-badge" ng-style="{ backgroundColor: item.color}"></div> </div> <div class="item-text">{{item.text}}</div> </div> </div> </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" } ];