如何让Kendo Scheduler聚焦刚添加/编辑的事件？

核心思路 #

绕过Kendo默认FocusService的自动聚焦逻辑，直接定位到刚操作的事件DOM元素手动聚焦，同时更新Scheduler的activeEvent状态避免后续干扰。

方法一：事件回调中手动定位聚焦 #

在Scheduler的add、edit完成回调中，获取目标事件的数据项，等待DOM渲染完成后找到对应元素并聚焦：

// 以Angular环境为例，其他框架逻辑通用
onEventSave(e: any) {
  // 获取刚添加/编辑后的事件数据项
  const targetEvent = e.dataItem;
  
  // 延迟执行确保DOM已更新
  setTimeout(() => {
    // 通过事件ID定位DOM元素（Kendo会给事件节点自动添加data-event-id属性）
    const eventElement = this.schedulerInstance.element.find(`[data-event-id="${targetEvent.id}"]`)[0];
    
    if (eventElement) {
      // 手动触发聚焦
      eventElement.focus();
      // 更新Scheduler的活跃事件状态，覆盖默认的第一个事件
      this.schedulerInstance.activeEvent = targetEvent;
    }
  }, 100);
}

方法二：自定义FocusService覆盖默认行为 #

如果需要全局修改聚焦逻辑，可以重写Kendo的FocusService（适用于Angular环境）：

1. 创建自定义服务类：

import { FocusService } from '@progress/kendo-angular-scheduler';
import { Injectable } from '@angular/core';

@Injectable()
export class CustomSchedulerFocusService extends FocusService {
  focusEvent(event: any): void {
    if (event?.id) {
      // 精准定位目标事件DOM
      const eventElement = this.scheduler.element.find(`[data-event-id="${event.id}"]`)[0];
      if (eventElement) {
        eventElement.focus();
        this.scheduler.activeEvent = event;
        return;
      }
    }
    // 无匹配时回退到默认逻辑
    super.focusEvent(event);
  }
}

2. 在组件/模块中替换默认服务：

@NgModule({
  providers: [
    { provide: FocusService, useClass: CustomSchedulerFocusService }
  ]
})
export class YourSchedulerModule { }

方法三：删除事件后的聚焦处理 #

如果删除的是当前活跃事件，可手动指定新的聚焦目标（比如删除事件的前一个/后一个事件）：

onEventRemove(e: any) {
  const removedEventId = e.dataItem.id;
  // 获取剩余事件列表，筛选出需要聚焦的事件
  const remainingEvents = this.schedulerInstance.data.filter(item => item.id !== removedEventId);
  if (remainingEvents.length > 0) {
    // 自定义逻辑：这里聚焦最后一个剩余事件，可根据需求调整
    const targetEvent = remainingEvents[remainingEvents.length - 1];
    setTimeout(() => {
      const eventElement = this.schedulerInstance.element.find(`[data-event-id="${targetEvent.id}"]`)[0];
      eventElement?.focus();
      this.schedulerInstance.activeEvent = targetEvent;
    }, 100);
  }
}

关键注意事项 #

• 必须等待DOM更新完成后再操作，所以用setTimeout做延迟（时间可根据实际渲染速度调整）
• 确保事件数据项有唯一id字段，Kendo会自动将其绑定到DOM的data-event-id属性
• 更新activeEvent状态是为了让后续的Scheduler操作（比如键盘导航）基于正确的事件上下文

内容的提问来源于stack exchange，提问作者Govert Jaap den Boef