Angular 4.x集成Kendo UI jQuery Scheduler：编辑事件数据问题

我之前也碰到过类似的场景，核心痛点就是既要实时更新编辑器里的内容，又不能触发数据源同步导致编辑器意外关闭。给你几个可行的实现思路：

1. 直接获取当前事件实例，避免遍历数据源 #

别再去datasource.data.events[xxx]里找事件了，Scheduler在打开编辑器时，会把当前事件的实例直接暴露在编辑器的上下文里。

如果你的自定义编辑器是通过Scheduler的editorTemplate配置的，直接在模板里绑定当前事件的属性就行，利用Angular的双向绑定实时同步：

<!-- 自定义编辑器模板 -->
<select [(ngModel)]="event.category" (change)="handleCategoryChange($event)">
  <option value="work">工作</option>
  <option value="life">生活</option>
</select>

这里的event就是当前正在编辑的事件实例，修改它的属性后，编辑器会立刻更新显示，完全不需要手动操作DOM。

2. 禁用自动同步，延迟到保存时再执行 #

你之前调用sync()导致编辑器关闭，是因为Scheduler默认会在数据源同步后自动关闭编辑器（认为编辑流程完成）。解决办法是先关闭自动同步，在内存中修改事件属性，等用户手动点击保存时再提交修改：

第一步：配置数据源时关闭自动同步 #

const schedulerDataSource = new Scheduler.DataSource({
  autoSync: false, // 关闭自动同步
  transport: {
    // 你的数据库交互配置
  }
});

第二步：下拉框事件中仅修改事件属性 #

handleCategoryChange(event: Event) {
  // this.currentEvent是提前获取到的当前事件实例
  this.currentEvent.category = (event.target as HTMLSelectElement).value;
  // 这里不需要调用sync()，双向绑定已经让编辑器实时更新了
}

第三步：手动点击保存时同步数据源 #

saveEvent() {
  // 提交修改到数据库
  schedulerDataSource.sync();
  // 手动关闭编辑器（可选，Scheduler同步后也会自动关闭）
  this.schedulerInstance.closeEditor();
}

3. 把自定义编辑器做成Angular组件，充分利用MVVM #

如果你的编辑器逻辑比较复杂，推荐把它封装成独立的Angular组件，通过@Input接收当前事件实例和Scheduler实例，完全用Angular的方式管理状态：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'custom-event-editor',
  template: `
    <div class="editor-container">
      <label>分类：</label>
      <select [(ngModel)]="currentEvent.category" (change)="onCategoryUpdate()">
        <option value="meeting">会议</option>
        <option value="task">任务</option>
      </select>
      <button (click)="saveAndClose()">保存</button>
    </div>
  `
})
export class CustomEventEditorComponent {
  @Input() currentEvent: any;
  @Input() scheduler: any;

  onCategoryUpdate() {
    // 仅修改事件属性，编辑器自动更新
    console.log('当前事件分类已修改为:', this.currentEvent.category);
  }

  saveAndClose() {
    // 手动同步数据源
    this.scheduler.getDataSource().sync();
    // 关闭编辑器
    this.scheduler.closeEditor();
  }
}

这种方式完全贴合Angular的MVVM模式，状态管理更清晰，也能避免直接操作jQuery Scheduler的DOM或内部API带来的问题。

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