Your search did not match any results.
Scheduler

Adaptability

When the adaptivityEnabled option is set to true, Scheduler elements adapt to small screens as follows:

  • Cell overflow indicators become larger to accommodate touch gestures.
  • The appointment list for a chosen date slides in from the edge of the screen.
  • The appointment details form occupies the entire screen.
  • Instead of the view switcher, a drop-down menu is used to switch between views. To open this menu, users should click or tap a button in the upper right corner.

In this demo, we also added the floating action button as an alternative way to create a new appointment. The button is implemented with the SpeedDialAction component.

@model DevExtreme.MVC.Demos.ViewModels.AdaptabilityAppointmentViewModel @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model.Appointments) .Views(new[] { SchedulerViewType.Week, SchedulerViewType.Month }) .CurrentView(SchedulerViewType.Month) .CurrentDate(new DateTime(2017, 5, 25)) .AdaptivityEnabled(true) .StartDayHour(9) .Resources(res => { res.Add() .FieldExpr("PriorityId") .ValueExpr("Id") .ColorExpr("Color") .Label("Room") .DataSource(Model.Priorities); }) .Height(590) .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .RecurrenceRuleExpr("RecurrenceRule") .AllDayExpr("AllDay") ) @(Html.DevExtreme().SpeedDialAction() .ID("speedDialAction") .Icon("plus") .OnClick(@<text> function() { getSchedulerInstance().showAppointmentPopup(createAppointmentPopupData()); } </text>) ) <script> function createAppointmentPopupData() { var instance = getSchedulerInstance(); var currentDate = instance.option('currentDate'); var cellDuration = instance.option('cellDuration'); return { StartDate: new Date(currentDate), EndDate: new Date(currentDate.setMinutes(cellDuration)) }; } function getSchedulerInstance() { return $("#scheduler").dxScheduler("instance"); } </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 Adaptability() { return View(new AdaptabilityAppointmentViewModel { Appointments = SampleData.AdaptabilityAppointments, Priorities = SampleData.PriorityResources }); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models { public class AdaptabilityAppointment { public string Text { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public string RecurrenceRule { get; set; } public bool? AllDay { get; set; } public int? PriorityId { get; set; } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<AdaptabilityAppointment> AdaptabilityAppointments = new[] { new AdaptabilityAppointment { Text = "Website Re-Design Plan", StartDate = new DateTime(2017, 5, 1, 9, 30, 0), EndDate = new DateTime(2017, 5, 1, 11, 30, 0), RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,FR;WKST=TU;INTERVAL=2;COUNT=32" }, new AdaptabilityAppointment { Text = "Book Flights to San Fran for Sales Trip", StartDate = new DateTime(2017, 5, 1, 9, 30, 0), EndDate = new DateTime(2017, 5, 1, 11, 30, 0), RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,FR;INTERVAL=4;COUNT=32", AllDay = true, PriorityId = 1 }, new AdaptabilityAppointment { Text = "Install New Router in Dev Room", StartDate = new DateTime(2017, 5, 1, 9, 30, 0), EndDate = new DateTime(2017, 5, 1, 11, 30, 0), RecurrenceRule = "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2;COUNT=32" }, new AdaptabilityAppointment { Text = "Approve Personal Computer Upgrade Plan", StartDate = new DateTime(2017, 5, 10, 10, 0, 0), EndDate = new DateTime(2017, 5, 10, 11, 0, 0), RecurrenceRule = "FREQ=WEEKLY;BYDAY=WE;INTERVAL=2;COUNT=32", PriorityId = 2 }, new AdaptabilityAppointment { Text = "Final Budget Review", StartDate = new DateTime(2017, 5, 25, 12, 0, 0), EndDate = new DateTime(2017, 5, 25, 13, 35, 0) }, new AdaptabilityAppointment { Text = "New Brochures", StartDate = new DateTime(2017, 5, 25, 14, 30, 0), EndDate = new DateTime(2017, 5, 25, 15, 45, 0) }, new AdaptabilityAppointment { Text = "Install New Database", StartDate = new DateTime(2017, 5, 25, 9, 45, 0), EndDate = new DateTime(2017, 5, 25, 11, 15, 0) }, new AdaptabilityAppointment { Text = "Approve New Online Marketing Strategy", StartDate = new DateTime(2017, 5, 25, 12, 0, 0), EndDate = new DateTime(2017, 5, 25, 14, 0, 0) }, new AdaptabilityAppointment { Text = "Upgrade Personal Computers", StartDate = new DateTime(2017, 5, 25, 15, 15, 0), EndDate = new DateTime(2017, 5, 25, 16, 30, 0) }, new AdaptabilityAppointment { Text = "Upgrade Personal Computers", StartDate = new DateTime(2017, 5, 26, 15, 15, 0), EndDate = new DateTime(2017, 5, 26, 16, 30, 0) } }; } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models { public class AdaptabilityAppointmentsResource { 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 { public class PriorityResource { public int Id { get; set; } public string Text { get; set; } public string Color { get; set; } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<PriorityResource> PriorityResources = new[] { new PriorityResource { Id = 1, Text = "High priority", Color = "#cc5c53" }, new PriorityResource { Id = 2, Text = "Low priority", Color = "#ff9747" } }; } }
@media only screen and (max-width: 370px) { .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-popup-bottom.dx-toolbar .dx-toolbar-items-container { height: auto; } .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center { display: flex; flex-direction: column; } .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button { padding: 0; } .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button .dx-button { width: 200px; } .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button:nth-child(1) { margin-bottom: 12px; } }