Responsiveness

10 Jan 20174 minutes to read

Scheduler is provided with default responsive support, so that it adjust or auto-resize it’s UI content based on the window or the container size on which it is placed.

Auto-Resizing Scheduler

By default, setting 100% width to the Scheduler makes it adaptable to the window or its parent container, as and when the browser is resized. This will not allow the scheduler to adapt height-wise.

  • RAZOR
  • @using MyProject.Models; // Here MyProject defines your project name to access the model class
    @{
        <!-- Datasource for Appointments -->
        List<ScheduleFields> Appoint = new List<ScheduleFields>();
        Appoint.Add(new ScheduleFields { Id = "1", Subject = "Meeting", StartTime = new DateTime(2015, 11, 10, 10, 00, 00), EndTime = new DateTime(2015, 11, 10, 11, 00, 00), Description = "", AllDay = false, Recurrence = false, RecurrenceRule = "" });
    }
    
    <ej-schedule id="Schedule1" width="100%" current-date="new DateTime(2015, 11, 8)">
        <e-appointment-settings datasource="Appoint" id="Id" subject='"Subject"' start-time='"StartTime"' end-time='"EndTime"' description='"Description"' all-day='"AllDay"' recurrence='"Recurrence"' recurrence-rule='"RecurrenceRule"'>
        </e-appointment-settings>
    </ej-schedule>

    To auto-resize the Scheduler height – set the height property of the Scheduler to 100% and also set some specific height (either percentage or pixel values) to its parent container (or) to the HTML and body tag elements as shown below.

  • RAZOR
  • @using MyProject.Models; // Here MyProject defines your project name to access the model class
    @{
        <!-- Datasource for Appointments -->
        List<ScheduleFields> Appoint = new List<ScheduleFields>();
        Appoint.Add(new ScheduleFields { Id = "1", Subject = "Meeting", StartTime = new DateTime(2015, 11, 10, 10, 00, 00), EndTime = new DateTime(2015, 11, 10, 11, 00, 00), Description = "", AllDay = false, Recurrence = false, RecurrenceRule = "" });
    }
    
    <ej-schedule id="Schedule1" height="100%" current-date="new DateTime(2015, 11, 8)">
        <e-appointment-settings datasource="Appoint" id="Id" subject='"Subject"' start-time='"StartTime"' end-time='"EndTime"' description='"Description"' all-day='"AllDay"' recurrence='"Recurrence"' recurrence-rule='"RecurrenceRule"'>
        </e-appointment-settings>
    </ej-schedule>

    NOTE

    When the Scheduler width is set to have less than 600px, then the View selection options will be displayed in a navigation drawer.

    Also, whenever the Scheduler resizes - the width of the work cells adjusts automatically (if no cell-width property is specified with pixel values), but the height of the cells are kept to remain as same as 20px until cell-height property is set explicitly with some pixel values.

    Scheduler in Mobile/Tablets

    The Scheduler layout adapts automatically in the mobile and tablet devices with the appropriate UI changes, as the is-responsive property is set to true by default. In case, if the user wants to display the normal scheduler in mobile devices without any adaptive enhancements, then the is-responsive property can be set to false.

    Some of the default changes done for adaptive Scheduler to render in mobile devices are as follows,

    • Animation effect introduced between view/date navigation.
    • Cell Height increased
    • The header date display changes (displayed next to the navigation icons).
    • View options displayed in Navigation drawer
    • Time cell width decreased
    • Quick window display blocked on cell/appointment single click.
    • Appointment resizing action blocked.
    • Multiple cell selection blocked.
    • Delete appointment option made available within the appointment window.
    • Week header display in month view hidden.
    • With Multiple resources - only one resource is viewable initially on the screen and to further look onto other resources, user need to swipe the screen.

    NOTE

    To make the Scheduler control to react as responsive in mobile/tablet devices, it is necessary to refer the additional ej.responsive.css file in the application.

    The following code snippet depicts the Scheduler code with responsive set to true.

  • HTML
  • @using MyProject.Models; // Here MyProject defines your project name to access the model class
    @{
        <!-- Datasource for Appointments -->
        List<ScheduleFields> Appoint = new List<ScheduleFields>();
        Appoint.Add(new ScheduleFields { Id = "1", Subject = "Meeting", StartTime = new DateTime(2015, 11, 10, 10, 00, 00), EndTime = new DateTime(2015, 11, 10, 11, 00, 00), Description = "", AllDay = false, Recurrence = false, RecurrenceRule = "" });
    }
    
    <ej-schedule id="Schedule1" current-date="new DateTime(2015, 11, 8)" is-responsive="true">
        <e-appointment-settings datasource="Appoint" id="Id" subject='"Subject"' start-time='"StartTime"' end-time='"EndTime"' description='"Description"' all-day='"AllDay"' recurrence='"Recurrence"' recurrence-rule='"RecurrenceRule"'>
        </e-appointment-settings>
    </ej-schedule>