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.
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.
@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);
}
}
}