Your search did not match any results.
Scheduler

Adaptive Appointments

Documentation

This example demonstrates how to limit the number of full-sized appointments per cell. On exceeding the limit, appointments are sent to the appointment collector where they are customized using the dropDownAppointment template.

@model DevExtreme.NETCore.Demos.ViewModels.AdaptiveAppointmentsViewModel @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model.Appointments) .Views(views => { views.Add() .Name("Auto Mode") .Type(SchedulerViewType.Month) .MaxAppointmentsPerCell(MaxAppointmentsPerCell.Auto); views.Add() .Name("Unlimited Mode") .Type(SchedulerViewType.Month) .MaxAppointmentsPerCell(MaxAppointmentsPerCell.Unlimited); views.Add() .Name("Numeric Mode") .Type(SchedulerViewType.Month) .MaxAppointmentsPerCell(2); }) .CurrentView("Auto Mode") .DropDownAppointmentTemplate(@<text> @(Html.Partial("_AppointmentTemplate")) </text>) .AppointmentTooltipTemplate(@<text> @(Html.Partial("_AppointmentTemplate")) </text>) .OnAppointmentDeleted(@<text> function() { var scheduler = e.component.dxScheduler("instance"); scheduler.hideAppointmentTooltip(); } </text>) .CurrentDate(new DateTime(2017, 5, 25)) .Resources(res => { res.Add() .FieldExpr("RoomId") .ValueExpr("Id") .ColorExpr("Color") .Label("Room") .DataSource(Model.Resources); }) .Height(650) .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") ) <script> var resourcesData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Resources)); function getSchedulerInstance() { return $("#scheduler").dxScheduler("instance"); } function getAppointmentColor(resourceId) { return DevExpress.data.query(resourcesData) .filter("Id", resourceId) .toArray()[0].Color; } </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 AdaptiveAppointments() { return View(new AdaptiveAppointmentsViewModel { Appointments = SampleData.AdaptiveAppointments, Resources = SampleData.AdaptiveAppointmentsResources }); } } }
using System; namespace DevExtreme.NETCore.Demos.Models { public class AdaptiveAppointment { public string Text { get; set; } public int RoomId { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<AdaptiveAppointment> AdaptiveAppointments { get { return new List<AdaptiveAppointment> { new AdaptiveAppointment { Text = "Google AdWords Strategy", RoomId = 1, StartDate = new DateTime(2017, 5, 5, 9, 0, 0), EndDate = new DateTime(2017, 5, 5, 10, 30, 0) }, new AdaptiveAppointment { Text = "New Brochures", RoomId = 5, StartDate = new DateTime(2017, 5, 5, 11, 30, 0), EndDate = new DateTime(2017, 5, 5, 14, 15, 0) }, new AdaptiveAppointment { Text = "Brochure Design Review", RoomId = 5, StartDate = new DateTime(2017, 5, 5, 13, 15, 0), EndDate = new DateTime(2017, 5, 5, 16, 15, 0) }, new AdaptiveAppointment { Text = "Website Re-Design Plan", RoomId = 5, StartDate = new DateTime(2017, 5, 5, 16, 45, 0), EndDate = new DateTime(2017, 5, 5, 17, 15, 0) }, new AdaptiveAppointment { Text = "Rollout of New Website and Marketing Brochures", RoomId = 2, StartDate = new DateTime(2017, 5, 9, 8, 15, 0), EndDate = new DateTime(2017, 5, 9, 10, 45, 0) }, new AdaptiveAppointment { Text = "Update Sales Strategy Documents", RoomId = 3, StartDate = new DateTime(2017, 5, 9, 12, 0, 0), EndDate = new DateTime(2017, 5, 9, 13, 45, 0) }, new AdaptiveAppointment { Text = "Non-Compete Agreements", RoomId = 3, StartDate = new DateTime(2017, 5, 9, 8, 15, 0), EndDate = new DateTime(2017, 5, 9, 9, 0, 0) }, new AdaptiveAppointment { Text = "Update NDA Agreement", RoomId = 1, StartDate = new DateTime(2017, 5, 10, 11, 45, 0), EndDate = new DateTime(2017, 5, 10, 13, 45, 0) }, new AdaptiveAppointment { Text = "Update Employee Files with New NDA", RoomId = 4, StartDate = new DateTime(2017, 5, 18, 14, 0, 0), EndDate = new DateTime(2017, 5, 18, 16, 45, 0) }, new AdaptiveAppointment { Text = "Submit Questions Regarding New NDA", RoomId = 4, StartDate = new DateTime(2017, 5, 18, 8, 0, 0), EndDate = new DateTime(2017, 5, 18, 9, 30, 0) }, new AdaptiveAppointment { Text = "Submit Signed NDA", RoomId = 4, StartDate = new DateTime(2017, 5, 18, 12, 45, 0), EndDate = new DateTime(2017, 5, 18, 14, 0, 0) }, new AdaptiveAppointment { Text = "Review Revenue Projections", RoomId = 4, StartDate = new DateTime(2017, 5, 25, 17, 15, 0), EndDate = new DateTime(2017, 5, 25, 18, 0, 0) }, new AdaptiveAppointment { Text = "Comment on Revenue Projections", RoomId = 1, StartDate = new DateTime(2017, 5, 22, 9, 15, 0), EndDate = new DateTime(2017, 5, 22, 11, 15, 0) }, new AdaptiveAppointment { Text = "Provide New Health Insurance Docs", RoomId = 4, StartDate = new DateTime(2017, 5, 22, 12, 45, 0), EndDate = new DateTime(2017, 5, 22, 14, 15, 0) }, new AdaptiveAppointment { Text = "Review Changes to Health Insurance Coverage", RoomId = 4, StartDate = new DateTime(2017, 5, 25, 14, 15, 0), EndDate = new DateTime(2017, 5, 25, 15, 30, 0) }, new AdaptiveAppointment { Text = "Review Training Course for any Ommissions", RoomId = 4, StartDate = new DateTime(2017, 5, 22, 14, 0, 0), EndDate = new DateTime(2017, 5, 22, 14, 0, 0) }, new AdaptiveAppointment { Text = "Recall Rebate Form", RoomId = 2, StartDate = new DateTime(2017, 5, 23, 12, 45, 0), EndDate = new DateTime(2017, 5, 23, 13, 15, 0) }, new AdaptiveAppointment { Text = "Create Report on Customer Feedback", RoomId = 3, StartDate = new DateTime(2017, 5, 23, 15, 15, 0), EndDate = new DateTime(2017, 5, 23, 17, 30, 0) }, new AdaptiveAppointment { Text = "Review Customer Feedback Report", RoomId = 3, StartDate = new DateTime(2017, 5, 17, 16, 15, 0), EndDate = new DateTime(2017, 5, 17, 18, 30, 0) }, new AdaptiveAppointment { Text = "Customer Feedback Report Analysis", RoomId = 3, StartDate = new DateTime(2017, 5, 17, 9, 30, 0), EndDate = new DateTime(2017, 5, 17, 10, 30, 0) }, new AdaptiveAppointment { Text = "Prepare Shipping Cost Analysis Report", RoomId = 3, StartDate = new DateTime(2017, 5, 23, 12, 30, 0), EndDate = new DateTime(2017, 5, 23, 13, 30, 0) }, new AdaptiveAppointment { Text = "Provide Feedback on Shippers", RoomId = 3, StartDate = new DateTime(2017, 5, 23, 14, 15, 0), EndDate = new DateTime(2017, 5, 23, 16, 0, 0) }, new AdaptiveAppointment { Text = "Select Preferred Shipper", RoomId = 1, StartDate = new DateTime(2017, 5, 26, 17, 30, 0), EndDate = new DateTime(2017, 5, 26, 20, 0, 0) }, new AdaptiveAppointment { Text = "Complete Shipper Selection Form", RoomId = 5, StartDate = new DateTime(2017, 5, 25, 8, 30, 0), EndDate = new DateTime(2017, 5, 25, 10, 0, 0) }, new AdaptiveAppointment { Text = "Upgrade Server Hardware", RoomId = 5, StartDate = new DateTime(2017, 5, 26, 12, 0, 0), EndDate = new DateTime(2017, 5, 26, 14, 15, 0) }, new AdaptiveAppointment { Text = "Upgrade Personal Computers", RoomId = 5, StartDate = new DateTime(2017, 5, 26, 14, 45, 0), EndDate = new DateTime(2017, 5, 26, 16, 30, 0) } }; } } } }
using System; namespace DevExtreme.NETCore.Demos.Models.SampleData { public class AdaptiveAppointmentsResource { 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 List<AdaptiveAppointmentsResource> AdaptiveAppointmentsResources { get { return new List<AdaptiveAppointmentsResource> { new AdaptiveAppointmentsResource { Id = 1, Text = "Room 401", Color = "#bbd806" }, new AdaptiveAppointmentsResource { Id = 2, Text = "Room 402", Color = "#f34c8a" }, new AdaptiveAppointmentsResource { Id = 3, Text = "Room 403", Color = "#ae7fcc" }, new AdaptiveAppointmentsResource { Id = 4, Text = "Room 407", Color = "#ff8817" }, new AdaptiveAppointmentsResource { Id = 5, Text = "Room 409", Color = "#03bb92" } }; } } } }
.appointment-content { width: 360px; margin-top: 3px; } .dx-popup-content .appointment-content { margin-top: 7px; height: 50px; } .appointment-badge { text-align: center; float: left; margin-right: 12px; color: white; width: 28px; height: 28px; font-size: 20px; line-height: 20px; border-radius: 28px; margin-top: 5px; display: flex; justify-content: center; flex-direction: column; } .appointment-dates { color: #959595; font-size: 12px; text-align: left; float: left; } .appointment-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 270px; font-size: 15px; text-align: left; float: left; } .delete-appointment { position: relative; border: none; box-shadow: none; top: -8px; height: 50px; } .delete-appointment .dx-button-content { width: 50px; height: 50px; padding-left: 4px; } .delete-appointment.dx-state-hover, .dx-list-item.dx-state-hover .dx-button { box-shadow: none; background-color: inherit; } .delete-appointment .dx-icon-trash { color: #337ab7 !important; font-size: 23px !important; }