在 Kendo UI Scheduler 上响应更改视图

Posted

技术标签:

【中文标题】在 Kendo UI Scheduler 上响应更改视图【英文标题】:Change view responsively on Kendo UI Scheduler 【发布时间】:2018-08-27 22:54:45 【问题描述】:

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

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

问题是如果用户在移动设备中,我需要将视图更改为day,否则将其保留在week

任何帮助将不胜感激。

【问题讨论】:

【参考方案1】:

好吧,我找到了这个解决方案,首先我检查该应用是否在移动设备中,如下所示:

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 ,
        ],

【讨论】:

以上是关于在 Kendo UI Scheduler 上响应更改视图的主要内容,如果未能解决你的问题,请参考以下文章

Kendo UI Scheduler:营业时间?

我想在 Header 更改 Kendo ui Scheduler 的日期格式

Kendo UI Scheduler:自定义视图和编辑行为

Kendo UI Scheduler - MVVM 设置日期

响应式 Kendo UI 网格示例

Kendo UI Scheduler:仅删除/编辑/更新指定的事件