Scheduling / Planning ▸ 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.

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)
    .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("Room")
        .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>

using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;

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 : Appointment {
        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 = "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"
            }
        };
    }
}

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",
                Color = "#cc5c53"
            },
            new PriorityResource {
                Id = 2,
                Text = "Low",
                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;
            }
}