Scheduler - Create from Selection

This demo creates a new appointment from a multi-cell selection. Click and drag across two or more time cells to select a range. Our Scheduler opens the appointment popup pre-populated with the corresponding start date, end date, and resource group.

Backend API

@model IEnumerable<DevExtreme.MVC.Demos.Models.AppointmentWithResources> @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model) .TimeZone("America/Los_Angeles") .Views(views => { views.Add() .Type(SchedulerViewType.WorkWeek) .GroupOrientation(Orientation.Horizontal) .CellDuration(30); }) .CurrentView(SchedulerViewType.WorkWeek) .CurrentDate(new DateTime(2021, 4, 21)) .StartDayHour(9) .EndDayHour(16) .Groups(new[] { "PriorityId" }) .Resources(res => { res.Add() .FieldExpr("PriorityId") .AllowMultiple(false) .Label("Priority") .DataSource(new[] { new { id = 1, text = "Low Priority", color = "#1D90FF" }, new { id = 2, text = "High Priority", color = "#FF9747" } }); }) .ShowCurrentTimeIndicator(false) .AllDayPanelMode(AllDayPanelMode.AllDay) .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .AllDayExpr("AllDay") .OnSelectionEnd("onSelectionEnd") ) <script> function onSelectionEnd(e) { const cells = e.selectedCellData; if(cells.length <= 1) { return; } const startDate = cells[0].startDateUTC || cells[0].startDate; const endDate = cells[cells.length - 1].endDateUTC || cells[cells.length - 1].endDate; e.component.showAppointmentPopup({ StartDate: startDate, EndDate: endDate, AllDay: cells[0].allDay, ...cells[0].groups }, true); } </script>

using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.Models.Scheduler.ResolveTimeConflicts; using DevExtreme.MVC.Demos.ViewModels; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class SchedulerController : Controller { public ActionResult CreateFromSelection() { return View(SampleData.CreateFromSelectionAppointments); } } }

DevExtreme Scheduler raises the onSelectionEnd event when a user selects cells. The event's selectedCellData array contains one object per selected cell, each with startDate, endDate, allDay, and group field values.

In this sample, the event handler ignores single-cell selection and passes a new appointment object built from the first and last cell in the selection to the showAppointmentPopup method.