Adaptive Rendering

The Scheduler provides adaptive enhancements that adjust its styling and behavior to suit the viewing device.

For example, when editing on a mobile device, the edit container slides in on full screen instead of appearing as a popup—providing a more mobile-friendly experience.

To enable the adaptive rendering feature, set the Mobile property to MobileMode.Auto or MobileMode.Phone:

• If set to MobileMode.Auto, the component uses adaptive rendering when viewed in a mobile browser.
• If set to MobileMode.Phone, the component always uses adaptive rendering, regardless of the browser type.

When using mobile rendering, set the Height explicitly. Otherwise, each Scheduler view might render with a different height.

The following example demonstrates how to configure the adaptive rendering mode of the Scheduler.

@(Html.Kendo().Scheduler<KendoSchedulerAjaxEditing.Models.TaskViewModel>()
    .Name("scheduler")
    .Mobile(MobileMode.Auto)
    .Date(new DateTime(2013, 6, 13))
    .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
    .Height(600)
    .Views(views =>
    {
        views.DayView();
        views.WeekView(weekView => weekView.Selected(true));
        views.MonthView();
        views.AgendaView();
    })
    .Timezone("Etc/UTC")
    .DataSource(d => d
        .Model(m => {
            m.Id(f => f.TaskID);
            m.Field(f => f.OwnerID).DefaultValue(1);
            m.RecurrenceId(f => f.RecurrenceID);
        })
        .Read("Tasks_Read", "Home")
        .Create("Tasks_Create", "Home")
        .Destroy("Tasks_Destroy", "Home")
        .Update("Tasks_Update", "Home")
    )
)

KB Articles on Scheduler Adaptive Rendering

• Comprehensive Month Events in Scheduler with Adaptive Rendering
• Find Out More in the Knowledge Base

See Also

• Adaptive Rendering by the Scheduler HtmlHelper for ASP.NET MVC (Demo)
• Server-Side API