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.

@model DevExtreme.MVC.Demos.ViewModels.AppointmentContextMenuItemsViewModel @using DevExtreme.MVC.Demos.Models; @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model.Appointments) .Views(new SchedulerViewType[] { SchedulerViewType.Day, SchedulerViewType.Month }) .CurrentView(SchedulerViewType.Month) .CurrentDate(new DateTime(2017, 5, 25)) .RecurrenceEditMode(SchedulerRecurrenceEditMode.Series) .StartDayHour(9) .FirstDayOfWeek(FirstDayOfWeek.Monday) .Groups(null) .Resources(res => { res.Add() .FieldExpr("RoomId") .ValueExpr("Id") .ColorExpr("Color") .DisplayExpr("Text") .Label("Room") .DataSource(Model.Resources); }) .OnCellContextMenu("onCellContextMenu") .OnAppointmentContextMenu("onAppointmentContextMenu") .Height(600) .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .RecurrenceRuleExpr("RecurrenceRule") .RecurrenceExceptionExpr("RecurrenceException") ) @(Html.DevExtreme().ContextMenu() .ID("context-menu") .Width(200) .DisplayExpr("Text") .Target(".dx-scheduler-date-table-cell") .DataSource(new List<AppointmentContextMenuItem> { new AppointmentContextMenuItem { Name = "NewAppointment", Text = "New Appointment" }, new AppointmentContextMenuItem { Name = "NewRecurringAppointment", Text = "New Recurring Appointment" }, new AppointmentContextMenuItem { Name = "Group/Ungroup", Text = "Group by Room/Ungroup", BeginGroup = true }, new AppointmentContextMenuItem { Name = "GoToToday", Text = "Go to Today" } }) ) @(Html.DevExtreme().ContextMenu() .ID("appointment-context-menu") .Width(200) .Target(".dx-scheduler-appointment") .DataSource(Model.ContextMenuItems) .ItemTemplate(new JS(@" function(itemData) { var $template = $('<div></div>'); if(itemData.Color) { $template.append(""<div class='appointment-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; }") ) ) <script> function onAppointmentContextMenu(e) { var scheduler = e.component, appointmentData = e.appointmentData, targetedAppointmentData = e.targetedAppointmentData; $("#appointment-context-menu").dxContextMenu("instance").option("onItemClick", function (e) { switch (e.itemData.Name) { case "Open": scheduler.showAppointmentPopup(appointmentData); break; case "Delete": scheduler.deleteAppointment(appointmentData); break; case "RepeatWeekly": scheduler.updateAppointment(appointmentData, $.extend(appointmentData, { StartDate: targetedAppointmentData.StartDate, RecurrenceRule: "FREQ=WEEKLY" })); break; default: if (e.itemData.Color) { scheduler.updateAppointment(appointmentData, $.extend(appointmentData, { RoomId: [e.itemData.Id] })); } } }); } function onCellContextMenu(e) { var scheduler = e.component, cellData = e.cellData; $("#context-menu").dxContextMenu("instance").option("onItemClick", function (e) { switch (e.itemData.Name) { case "NewAppointment": scheduler.showAppointmentPopup({ StartDate: cellData.startDate }, true); break; case "NewRecurringAppointment": scheduler.showAppointmentPopup({ StartDate: cellData.startDate, RecurrenceRule: "FREQ=DAILY" }, true); break; case "Group/Ungroup": if (scheduler.option("groups")) { scheduler.option({ "crossScrollingEnabled": false, "groups": undefined }); } else { scheduler.option({ "crossScrollingEnabled": true, "groups": ["RoomId"] }); scheduler.repaint(); } break; case "GoToToday": scheduler.option("currentDate", new Date()); break; } }); } </script>
using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.ViewModels; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class SchedulerController : Controller { public ActionResult ContextMenuIntegration() { return View(new AppointmentContextMenuItemsViewModel { Appointments = SampleData.RecurringAppointments, Resources = SampleData.RecurringAppointmentsResources, ContextMenuItems = SampleData.AppointmentContextMenuItems }); } } }
using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class AppointmentContextMenuItem : RecurringAppointmentsResource { public string Name { get; set; } [JsonProperty(PropertyName = "beginGroup")] public bool BeginGroup { get; set; } [JsonProperty(PropertyName = "disabled")] public bool Disabled { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<AppointmentContextMenuItem> AppointmentContextMenuItems { get { var items = new List<AppointmentContextMenuItem> { new AppointmentContextMenuItem { Name = "Open", Text = "Open" }, new AppointmentContextMenuItem { Name = "Delete", Text = "Delete" }, new AppointmentContextMenuItem { Name = "RepeatWeekly", Text = "Repeat Weekly", BeginGroup = true }, new AppointmentContextMenuItem { Name = "SetRoom", Text = "Set Room", BeginGroup = true, Disabled = true } }; items.AddRange(RecurringAppointmentsResources.Select(resource => new AppointmentContextMenuItem { Id = resource.Id, Text = resource.Text, Color = resource.Color }) ); return items; } } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models { public class RecurringAppointment { public string Text { get; set; } public int RoomId { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public string RecurrenceRule { get; set; } public string RecurrenceException { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<RecurringAppointment> RecurringAppointments { get { return new List<RecurringAppointment> { new RecurringAppointment { Text = "Watercolor Landscape", RoomId = 1, StartDate = new DateTime(2017, 5, 1, 9, 30, 0), EndDate = new DateTime(2017, 5, 1, 11, 0, 0), RecurrenceRule = "FREQ=WEEKLY;BYDAY=TU,FR;COUNT=10" }, new RecurringAppointment { Text = "Oil Painting for Beginners", RoomId = 2, StartDate = new DateTime(2017, 5, 1, 9, 30, 0), EndDate = new DateTime(2017, 5, 1, 11, 0, 0), RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10" }, new RecurringAppointment { Text = "Testing", RoomId = 3, StartDate = new DateTime(2017, 5, 1, 12, 0, 0), EndDate = new DateTime(2017, 5, 1, 13, 0, 0), RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO;WKST=TU;INTERVAL=2;COUNT=2" }, new RecurringAppointment { Text = "Meeting of Instructors", RoomId = 4, StartDate = new DateTime(2017, 5, 1, 9, 0, 0), EndDate = new DateTime(2017, 5, 1, 9, 15, 0), RecurrenceRule = "FREQ=DAILY;BYDAY=WE;UNTIL=20170601" }, new RecurringAppointment { Text = "Recruiting students", RoomId = 5, StartDate = new DateTime(2017, 5, 26, 10, 0, 0), EndDate = new DateTime(2017, 5, 26, 11, 0, 0), RecurrenceRule = "FREQ=YEARLY;BYWEEKNO=23", RecurrenceException = "20170611T100000" }, new RecurringAppointment { Text = "Final exams", RoomId = 3, StartDate = new DateTime(2017, 5, 26, 12, 0, 0), EndDate = new DateTime(2017, 5, 26, 13, 35, 0), RecurrenceRule = "FREQ=YEARLY;BYWEEKNO=24;BYDAY=TH,FR" }, new RecurringAppointment { Text = "Monthly Planning", RoomId = 4, StartDate = new DateTime(2017, 5, 26, 14, 30, 0), EndDate = new DateTime(2017, 5, 26, 15, 45, 0), RecurrenceRule = "FREQ=MONTHLY;BYMONTHDAY=27;COUNT=1" }, new RecurringAppointment { Text = "Open Day", RoomId = 5, StartDate = new DateTime(2017, 5, 1, 9, 30, 0), EndDate = new DateTime(2017, 5, 1, 13, 0, 0), RecurrenceRule = "FREQ=YEARLY;BYYEARDAY=148" } }; } } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models { public class RecurringAppointmentsResource { public int Id { get; set; } public string Text { get; set; } public string Color { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<RecurringAppointmentsResource> RecurringAppointmentsResources { get { return new List<RecurringAppointmentsResource> { new RecurringAppointmentsResource { Id = 1, Text = "Room 101", Color = "#bbd806" }, new RecurringAppointmentsResource { Id = 2, Text = "Room 102", Color = "#f34c8a" }, new RecurringAppointmentsResource { Id = 3, Text = "Room 103", Color = "#ae7fcc" }, new RecurringAppointmentsResource { Id = 4, Text = "Meeting room", Color = "#ff8817" }, new RecurringAppointmentsResource { Id = 5, Text = "Conference hall", Color = "#03bb92" } }; } } } }
.dx-menu-item-content span { margin-right: 5px; } .dx-menu-item-has-submenu .dx-icon-spinright { position: absolute; top: 7px; right: 2px; } .appointment-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; }