# 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`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/schedulerbuilder#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.

```Razor HtmlHelper
@(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")
    )
)
```

```Razor TagHelper
@{
    string defaultTitle = "No Title";
}
<kendo-scheduler name="scheduler" 
    mobile="MobileMode.Auto"
    date="new DateTime(2021, 6, 13)" 
    start-time="new DateTime(2021, 6, 13, 7, 00, 00)"
    timezone="Etc/UTC"
    height="600">
    <views>
        <view type="day"></view>
        <view type="week" selected="true"></view>
        <view type="month"></view>
        <view type="agenda"></view>
    </views>
    <scheduler-datasource type="@DataSourceTagHelperType.Ajax">
        <transport>
            <read url="@Url.Action("Tasks_Read", "Home")" />
            <create url="@Url.Action("Tasks_Create", "Home")" />
            <destroy url="@Url.Action("Tasks_Destroy", "Home")" />
            <update url="@Url.Action("Tasks_Update", "Home")" />
        </transport>
        <schema data="Data" total="Total" errors="Errors">
            <scheduler-model id="TaskID">
                <fields>
                    <field name="TaskID" type="number"></field>
                    <field name="title" from="Title" type="string" default-value="@defaultTitle"></field>
                    <field name="start" from="Start" type="date"></field>
                    <field name="end" from="End" type="date"></field>
                    <field name="description" from="Description" type="string"></field>
                    <field name="recurrenceId" from="RecurrenceID" type="number" default-value="null"></field>
                    <field name="recurrenceRule" from="RecurrenceRule" type="string"></field>
                    <field name="recurrenceException" from="RecurrenceException" type="string"></field>
                    <field name="startTimezone" from="StartTimezone" type="string"></field>
                    <field name="endTimezone" from="EndTimezone" type="string"></field>
                    <field name="isAllDay" from="IsAllDay" type="boolean"></field>
                </fields>
            </scheduler-model>
        </schema>
    </scheduler-datasource>
</kendo-scheduler>
```

## KB Articles on Scheduler Adaptive Rendering

* [Comprehensive Month Events in Scheduler with Adaptive Rendering](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/scheduler-adaptive-rendering-month-view-comprehensive-events)
* [Find Out More in the Knowledge Base](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)

## See Also

* [Adaptive Rendering by the Scheduler HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/scheduler/adaptive-rendering)
* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/scheduler)