Adaptive Rendering

The Scheduler supports adaptive enhancements like changes in styling and behavior in order to remain consistent with the specific user device experience. For instance, when editing on a mobile device, the edit container will slide in a new screen for the user, which is a departure from the more desktop-like popup behaviors.

To enable the adaptive rendering feature, set the mobile option to true, phone or tablet:

  • If set to true, the widget will use adaptive rendering when viewed on a mobile browser.
  • If set to phone or tablet, the widget will be forced to use adaptive rendering regardless of the browser type.

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

<div id="vueapp" class="vue-app">
    <div id="qr-wrap" style="text-align: center;">
      <p>To test the Adaptive Rendering, scan the QR code or open this demo on a mobile device.</p>
      <kendo-qrcode :value="qrCodeValue" :size="200"></kendo-qrcode>
    </div>
    <div id="scheduler-wrap" style="display: none;">
      <kendo-scheduler
        ref="scheduler"
        :data-source="localDataSource"
        :date="date"
        :mobile="true"
        :height="450"
        :timezone="'Etc/UTC'"
      >
        <kendo-scheduler-view :type="'day'"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'workWeek'" :selected="true"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'week'"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'month'"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'agenda'"></kendo-scheduler-view>
      </kendo-scheduler>
    </div>
</div>
Vue.use(SchedulerInstaller);
Vue.use(BarcodesInstaller);

new Vue({
    el: "#vueapp",
    data: {
        qrCodeValue: "https://2432r24qzj.codesandbox.io/",
        date: new Date("2018/6/6"),
        localDataSource: [{
            id: 1,
            start: new Date("2018/6/6 08:00 AM"),
            end: new Date("2018/6/6 09:00 AM"),
            title: "Interview"
        },
        {
            id: 2,
            start: new Date("2018/6/6 08:00 AM"),
            end: new Date("2018/6/6 09:00 AM"),
            title: "Meeting"
        }]
    },
    mounted: function() {
        var isMobile = Boolean(kendo.support.mobileOS);

        if (isMobile) {
            document.getElementById("qr-wrap").style.display = "none";
            document.getElementById("scheduler-wrap").style.display = "block";

            this.$refs.scheduler.kendoWidget().resize();
        }
    }
})

In this article