Syncfusion Angular Scheduler如何通过Ajax向自定义API提交数据及获取日期范围

一、编辑器创建事件提交自定义API实现 #

通过调度器的actionBegin事件拦截新增、编辑、删除事件的操作，手动调用自定义API完成数据提交即可：

1. 首先在组件模板中绑定事件

<ejs-schedule #scheduleObj [eventSettings]="eventSettings" (actionBegin)="onActionBegin($event)" (actionComplete)="onActionComplete($event)"></ejs-schedule>

2. 编写提交逻辑代码

import { Ajax, ActionBeginEventArgs, ActionEventArgs } from '@syncfusion/ej2-angular-schedule';

// 类内代码
onActionBegin(args: ActionBeginEventArgs): void {
  // 拦截事件新增、编辑、删除三类操作
  if (['eventCreate', 'eventChange', 'eventRemove'].includes(args.requestType)) {
    // 阻止调度器默认的数据源操作，完全走自定义API逻辑
    args.cancel = true;
    let requestMethod: string;
    let apiUrl = 'https://localhost:3486/api/CalendarEvents';
    let sendData: any = null;

    if (args.requestType === 'eventCreate') {
      // 新增事件场景
      const event = args.data[0];
      requestMethod = 'POST';
      // 字段映射和你之前拉取数据的逻辑对齐
      sendData = JSON.stringify({
        title: event.Subject,
        startDate: event.StartTime,
        endDate: event.EndTime
      });
    } else if (args.requestType === 'eventChange') {
      // 编辑事件场景
      const event = args.data;
      requestMethod = 'PUT';
      apiUrl += `/${event.id}`;
      sendData = JSON.stringify({
        id: event.id,
        title: event.Subject,
        startDate: event.StartTime,
        endDate: event.EndTime
      });
    } else {
      // 删除事件场景
      const event = args.data[0];
      requestMethod = 'DELETE';
      apiUrl += `/${event.id}`;
    }

    const ajax = new Ajax(apiUrl, requestMethod, true);
    ajax.contentType = 'application/json';
    if (sendData) ajax.data = sendData;
    ajax.send().then(() => {
      // 提交成功后刷新调度器事件列表
      this.loadScheduleEvents();
    });
    ajax.onFailure = err => {
      console.error('事件操作失败', err);
    };
  }
}

// 把你之前的拉取逻辑封装为公共方法，方便多处调用
loadScheduleEvents(start?: Date, end?: Date) {
  // 没有传入日期时默认取当前视图的时间范围
  const currentDates = this.scheduleObj.getCurrentViewDates();
  const startDate = start || currentDates[0];
  const endDate = end || currentDates[currentDates.length - 1];
  const ajax = new Ajax(
    `https://localhost:3486/api/CalendarEvents?StartDate=${startDate}&EndDate=${endDate}`,
    "GET",
    true
  );
  ajax.send().then();
  ajax.onSuccess = (data: string): void => {
    this.scheduler.eventSettings = {
      dataSource: JSON.parse(data).map((value, index) => ({
        // 建议不要用下标作为id，优先用API返回的事件唯一主键，避免编辑删除时匹配错误
        id: value.id || index,
        Subject: value.title,
        StartTime: value.startDate,
        // 你之前代码里EndTime写的是value.startDate，这里要修正，否则事件会显示为0时长
        EndTime: value.endDate
      }))
    };
  };
}

二、当前视图日期范围获取方案 #

你找到的实现逻辑已经可以正常使用，直接对接上面封装的拉取方法，就能实现切换视图、导航日期时自动拉取对应时间范围的事件：

onActionComplete(args: ActionEventArgs): void {
  if (args.requestType === "viewNavigate" || args.requestType === "dateNavigate") {
    const currentDates: Date[] = this.scheduleObj.getCurrentViewDates();
    const startDate = currentDates[0];
    const endDate = currentDates[currentDates.length - 1];
    // 拉取对应时间范围的事件
    this.loadScheduleEvents(startDate, endDate);
  }
}

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