响应于Kendo UI Scheduler更改视图

时间:2018-03-19 11:32:55

标签: kendo-ui responsive-design scheduler

我有这个使用Kendo UI调度程序的应用程序,现在我有两个视图:

views: [
            { type: "day", selected: false, majorTick: majorTick },
            { type: "week", selected: true, majorTick: majorTick },
        ]

问题是,如果用户处于移动状态,我需要将视图更改为day,否则请将其保留在week

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

好吧,我找到了这个解决方案,首先我检查一下这个应用程序是否在移动设备上:

detectmobile(): boolean {
    if (navigator.userAgent.match(/Android/i)
        || navigator.userAgent.match(/webOS/i)
        || navigator.userAgent.match(/iPhone/i)
        || navigator.userAgent.match(/iPad/i)
        || navigator.userAgent.match(/iPod/i)
        || navigator.userAgent.match(/BlackBerry/i)
        || navigator.userAgent.match(/Windows Phone/i)
        || (window.innerWidth <= 800 && window.innerHeight <= 600)) {
        return true;
    }
    else {
        return false;
    }
}

然后我只是训练我的布尔人:

 let detectMobile = this.detectmobile();
 let isDay = detectMobile;
 let isWeek = !detectMobile;

最后我将它们提供给jQuery("#scheduler").kendoScheduler

views: [
            { type: "day", selected: isDay, majorTick: majorTick },
            { type: "week", selected: isWeek, majorTick: majorTick },
        ],