如何在Kendo UI Scheduler中实现响应式视图切换

嘿，这个需求很实用，我给你提供两种靠谱的实现方案，你可以根据自己的场景选择：

方案一：初始化时根据设备类型设置默认视图 #

这个方案简单直接，在Scheduler初始化前就检测设备类型，动态配置视图的selected属性：

// 先定义你的majorTick变量（根据实际业务调整值）
const majorTick = 60;

// 检测是否为移动设备：这里用媒体查询判断屏幕宽度，也可以改用触摸设备检测
// 可选：用触摸设备检测更精准 -> const isMobile = window.matchMedia("(pointer: coarse)").matches;
const isMobile = window.matchMedia("(max-width: 768px)").matches;

// 动态配置视图数组
const schedulerViews = [
  { 
    type: "day", 
    selected: isMobile, // 移动设备默认选中Day视图
    majorTick: majorTick 
  },
  { 
    type: "week", 
    selected: !isMobile, // 非移动设备默认选中Week视图
    majorTick: majorTick 
  }
];

// 初始化Scheduler
$("#scheduler").kendoScheduler({
  // 你的其他配置项（比如数据源、时间范围等）
  views: schedulerViews,
  // 其他配置...
});

说明 #

• 这里用max-width:768px作为移动设备的分界，你可以根据自己的响应式设计调整这个阈值
• 如果想更精准判断触摸类移动设备，可以把媒体查询改成(pointer: coarse)，它会匹配手机、平板这类触摸优先的设备，避免把小屏桌面设备误判为移动设备

方案二：响应窗口大小变化，动态切换视图 #

如果需要支持用户调整浏览器窗口大小（比如从桌面窗口缩放到移动尺寸）时自动切换视图，就用这个方案：

const majorTick = 60;

// 初始化Scheduler，先不设置默认选中视图
const scheduler = $("#scheduler").kendoScheduler({
  views: [
    { type: "day", majorTick: majorTick },
    { type: "week", majorTick: majorTick }
  ],
  // 你的其他配置项
}).data("kendoScheduler");

// 定义切换视图的函数
function updateSchedulerView() {
  const isMobile = window.matchMedia("(max-width: 768px)").matches;
  const targetViewName = isMobile ? "day" : "week";
  
  // 只有当前视图和目标视图不一致时才切换，避免不必要的重复操作
  if (scheduler.view().name !== targetViewName) {
    scheduler.view(targetViewName);
  }
}

// 页面加载时先执行一次，设置初始视图
updateSchedulerView();

// 监听窗口 resize 事件，实时调整视图
window.addEventListener("resize", updateSchedulerView);

说明 #

• 这个方案会在窗口大小变化时自动检测设备类型，切换到对应视图，体验更流畅
• 加入了视图判断逻辑，避免每次窗口 resize 都重复切换视图，提升性能

内容的提问来源于stack exchange，提问作者lch