Your search did not match any results.
Scheduler

Context Menu Integration

Documentation

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

@model DevExtreme.NETCore.Demos.ViewModels.RecurringAppointmentsViewModel @using DevExtreme.NETCore.Demos.Models; @{ var cellContextMenuItems = new[] { new ContextMenuItem { Text = "New Appointment", OnItemClick = new JS("createAppointment") }, new ContextMenuItem { Text = "New Recurring Appointment", OnItemClick = new JS("createRecurringAppointment") }, new ContextMenuItem { Text = "Group by Room/Ungroup", BeginGroup = true, OnItemClick = new JS("groupCell") }, new ContextMenuItem { Text = "Go to Today", OnItemClick = new JS("showCurrentDate") } }; var resourcesData = Model.Resources.Select(r => new { Id = r.Id, Text = r.Text, Color = r.Color, }); var appointmentContextMenuItems = new[] { new ContextMenuItem { Text = "Open", OnItemClick = new JS("showAppointment") }, new ContextMenuItem { Text = "Delete", OnItemClick = new JS("deleteAppointment") }, new ContextMenuItem { Text = "Repeat Weekly", BeginGroup = true, OnItemClick = new JS("repeatAppointmentWeekly") }, new ContextMenuItem { Text = "Set Room", BeginGroup = true, Disabled = true } }.Concat( resourcesData.Select(r => new ContextMenuItem { Id = r.Id, Text = r.Text, Color = r.Color, OnItemClick = new JS("setResource") }) );} @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model.Appointments) .Views(new[] { 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(resourcesData); }) .OnCellContextMenu("onCellContextMenu") .OnAppointmentContextMenu("onAppointmentContextMenu") .Height(600) .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .RecurrenceRuleExpr("RecurrenceRule") .RecurrenceExceptionExpr("RecurrenceException") ) @(Html.DevExtreme().ContextMenu() .ID("context-menu") .Disabled(true) .Width(200) .OnHiding("onContextMenuHiding") .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); return $template; }") ) ) <script> function onAppointmentContextMenu(e) { var contextMenuInstance = $("#context-menu").dxContextMenu("instance"); contextMenuInstance.option({ dataSource: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(appointmentContextMenuItems)), target: ".dx-scheduler-appointment", onItemClick: onItemClick(e), disabled: false, }); } function onCellContextMenu(e) { var contextMenuInstance = $("#context-menu").dxContextMenu("instance"); contextMenuInstance.option({ dataSource: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(cellContextMenuItems)), target: ".dx-scheduler-date-table-cell", onItemClick: onItemClick(e), disabled: false, }); } var onContextMenuHiding = function (e) { e.component.option({ disabled: true, dataSource: [] }) } var onItemClick = function (contextMenuEvent) { return function (e) { e.itemData.onItemClick(contextMenuEvent, e); } } var createAppointment = function(e) { e.component.showAppointmentPopup({ StartDate: e.cellData.startDate }, true); }; var createRecurringAppointment = function (e) { e.component.showAppointmentPopup({ StartDate: e.cellData.startDate, RecurrenceRule: "FREQ=DAILY" }, true); }; var groupCell = function(e) { var scheduler = e.component; if(scheduler.option("groups")) { scheduler.option({ crossScrollingEnabled: false, groups: undefined }); } else { scheduler.option({ crossScrollingEnabled: true, groups: ["RoomId"] }); } }; var showCurrentDate = function(e) { e.component.option("currentDate", new Date()); }; var showAppointment = function(e) { e.component.showAppointmentPopup(e.appointmentData); }; var deleteAppointment = function(e) { e.component.deleteAppointment(e.appointmentData); }; var repeatAppointmentWeekly = function(e) { var itemData = e.appointmentData; e.component.updateAppointment(itemData, $.extend(itemData, { StartDate: e.targetedAppointmentData.StartDate, RecurrenceRule: "FREQ=WEEKLY" })); }; var setResource = function(e, clickEvent) { var itemData = e.appointmentData; e.component.updateAppointment(itemData, $.extend(itemData, { RoomId: [clickEvent.itemData.Id] })); }; </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class SchedulerController : Controller { public ActionResult ContextMenuIntegration() { return View(new RecurringAppointmentsViewModel { Appointments = SampleData.RecurringAppointments, Resources = SampleData.RecurringAppointmentsResources, }); } } }
using DevExtreme.NETCore.Demos.Models.SampleData; using Newtonsoft.Json; using DevExtreme.AspNet.Mvc; namespace DevExtreme.NETCore.Demos.Models { public class ContextMenuItem : RecurringAppointmentsResource { [JsonProperty(PropertyName = "onItemClick")] public JS OnItemClick { get; set; } = new JS("function() {}"); [JsonProperty(PropertyName = "beginGroup")] public bool BeginGroup { get; set; } = false; [JsonProperty(PropertyName = "disabled")] public bool Disabled { get; set; } = false; } }
using System; namespace DevExtreme.NETCore.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.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<RecurringAppointment> RecurringAppointments = new[] { 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" } }; } }
namespace DevExtreme.NETCore.Demos.Models.SampleData { 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.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<RecurringAppointmentsResource> RecurringAppointmentsResources = new[] { 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; }