Scheduler - Adaptability

When the adaptivityEnabled property 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.

Backend API

​x
 
@model DevExtreme.NETCore.Demos.ViewModels.AdaptabilityAppointmentViewModel​@(Html.DevExtreme().Scheduler()    .ID("scheduler")    .DataSource(Model.Appointments)    .TimeZone("America/Los_Angeles")    .Views(new[] { SchedulerViewType.Week, SchedulerViewType.Month })    .CurrentView(SchedulerViewType.Month)    .CurrentDate(new DateTime(2021, 3, 25))    .AdaptivityEnabled(true)    .StartDayHour(9)    .Resources(res => { res.Add()        .FieldExpr("PriorityId")        .ValueExpr("Id")        .ColorExpr("Color")        .Label("Priority")        .DisplayExpr("Text")        .AllowMultiple(true)        .DataSource(Model.Priorities);    })    .Height(590)    .TextExpr("Text")    .StartDateExpr("StartDate")    .EndDateExpr("EndDate")    .RecurrenceRuleExpr("RecurrenceRule")    .AllDayExpr("AllDay"))​@(Html.DevExtreme().SpeedDialAction()    .ID("speedDialAction")    .Icon("plus")    .OnClick("onPlusClick"))​<script>    function onPlusClick(e) {        $("#scheduler").dxScheduler("instance").showAppointmentPopup();    }</script>​

xxxxxxxxxx
 
using Microsoft.AspNetCore.Mvc;​using DevExtreme.NETCore.Demos.Models.SampleData;using DevExtreme.NETCore.Demos.ViewModels;​namespace DevExtreme.NETCore.Demos.Controllers {    public class SchedulerController : Controller {        public ActionResult Adaptability() {            return View(new AdaptabilityAppointmentViewModel {                Appointments = SampleData.AdaptabilityAppointments,                Priorities = SampleData.PriorityResources            });        }    }}

xxxxxxxxxx
 
using System;using System.Collections.Generic;using System.Linq;​namespace DevExtreme.NETCore.Demos.Models {    public class AdaptabilityAppointment : Appointment {        public int? PriorityId { get; set; }    }}​

xxxxxxxxxx
 
using System;using System.Collections.Generic;​namespace DevExtreme.NETCore.Demos.Models.SampleData {    public partial class SampleData {        public static readonly IEnumerable<AdaptabilityAppointment> AdaptabilityAppointments = new[] {            new AdaptabilityAppointment {                Text = "Website Re-Design Plan",                StartDate = "2021-03-01T16:30:00.000Z",                EndDate = "2021-03-01T18:30:00.000Z",                RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,FR;WKST=TU;INTERVAL=2;COUNT=32",            },            new AdaptabilityAppointment {                Text = "Book Flights to San Fran for Sales Trip",                StartDate = "2021-03-01T16:30:00.000Z",                EndDate = "2021-03-01T18:30:00.000Z",                RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,FR;INTERVAL=4;COUNT=32",                AllDay = true,                PriorityId = 1            },            new AdaptabilityAppointment {                Text = "Install New Router in Dev Room",                StartDate = "2021-03-01T16:30:00.000Z",                EndDate = "2021-03-01T18:30:00.000Z",                RecurrenceRule = "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2;COUNT=32"            },            new AdaptabilityAppointment {                Text = "Approve Personal Computer Upgrade Plan",                StartDate = "2021-02-10T17:00:00.000Z",                EndDate = "2021-02-10T18:00:00.000Z",                RecurrenceRule = "FREQ=WEEKLY;BYDAY=WE;INTERVAL=2;COUNT=32",                PriorityId = 2            },            new AdaptabilityAppointment {                Text = "Final Budget Review",                StartDate = "2021-04-01T19:00:00.000Z",                EndDate = "2021-04-01T20:35:00.000Z"            },            new AdaptabilityAppointment {                Text = "New Brochures",                StartDate = "2021-04-01T21:30:00.000Z",                EndDate = "2021-04-01T22:45:00.000Z"            },            new AdaptabilityAppointment {                Text = "Install New Database",                StartDate = "2021-04-01T16:45:00.000Z",                EndDate = "2021-04-01T18:15:00.000Z"            },            new AdaptabilityAppointment {                Text = "Approve New Online Marketing Strategy",                StartDate = "2021-04-01T19:00:00.000Z",                EndDate = "2021-04-01T21:00:00.000Z"            },            new AdaptabilityAppointment {                Text = "Upgrade Personal Computers",                StartDate = "2021-04-01T22:15:00.000Z",                EndDate = "2021-04-01T23:30:00.000Z"            },            new AdaptabilityAppointment {                Text = "Upgrade Personal Computers",                StartDate = "2021-04-02T22:15:00.000Z",                EndDate = "2021-04-02T23:30:00.000Z"            }        };    }}​

xxxxxxxxxx
 
using System;using System.Collections.Generic;using System.Linq;​namespace DevExtreme.NETCore.Demos.Models {    public class AdaptabilityAppointmentsResource {        public int Id { get; set; }        public string Text { get; set; }        public string Color { get; set; }    }}​

xxxxxxxxxx
 
using System;​namespace DevExtreme.NETCore.Demos.Models.SampleData {    public class PriorityResource {        public int Id { get; set; }        public string Text { get; set; }        public string Color { get; set; }    }}​

xxxxxxxxxx
 
using System;using System.Collections.Generic;using System.Linq;​namespace DevExtreme.NETCore.Demos.Models.SampleData {    public partial class SampleData {        public static readonly IEnumerable<PriorityResource> PriorityResources = new[] {            new PriorityResource {                Id = 1,                Text = "High",                Color = "#cc5c53"            },            new PriorityResource {                Id = 2,                Text = "Low",                Color = "#ff9747"            }        };    }}​

xxxxxxxxxx
 
@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;            }}​

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.