如何通过 Syncfusion Angular Scheduler 上的 Ajax 将数据发布到自定义 API答案

【问题标题】：How to post data to custom API via Ajax on Synfusion Angular Scheduler如何通过 Syncfusion Angular Scheduler 上的 Ajax 将数据发布到自定义 API
【发布时间】：2021-11-29 19:36:42
【问题描述】：

我目前正试图弄清楚如何在使用编辑器窗口创建事件时将数据发布到我的 API。我已经使用 Ajax 来检索内容，如下所示；

const ajax: 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: index,
      Subject: value.title,
      StartTime: value.startDate,
      EndTime: value.startDate
    })),
    fields: {
    }
  };
};
ajax.onFailure = (): void  =>
{

};

此外，当用户通过视图或日期导航更改调度程序上的日期时，我如何获取当前选择的日期范围。

onActionComplete(args: ActionEventArgs): void {
    if (args.requestType == "dateNavigate") {
      // how to get current date range ?
    }
}

[更新] 找到了如何获取当前选择的日期范围：

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];
    }
  }

【问题讨论】：

标签： angular typescript syncfusion ej2-syncfusion

【解决方案1】：

我们已经验证了您报告的查询“如何在 Synfusion Angular Scheduler 上通过 Ajax 将数据发布到自定义 API”，并准备了带有服务的示例供您参考。

app.component.ts:  
  myClickFunction(args: any): void {
    let schObj = (document.querySelector('.e-schedule') as any)
      .ej2_instances[0];
    const ajax = new Ajax('http://localhost:54738/Home/GetData', 'GET', false);
    ajax.onSuccess = (data: any) => {
      schObj.eventSettings.dataSource = JSON.parse(data);
    };
    ajax.send();
  }
  onBegin(args: any): void {
    if (args.requestType === 'eventCreate') {
      this.temp = true;
      let schObj = (document.querySelector('.e-schedule') as any)
        .ej2_instances[0];
      const ajax = new Ajax(
        'http://localhost:54738/Home/Insert',
        'POST',
        false
      );
      ajax.data = JSON.stringify(args.data[0]);
      ajax.onSuccess = (data: any) => {
        schObj.eventSettings.dataSource = JSON.parse(data);
      };
      ajax.send();
    } else if (args.requestType === 'eventChange') {
      let schObj = (document.querySelector('.e-schedule') as any)
        .ej2_instances[0];
      const ajax = new Ajax(
        'http://localhost:54738/Home/Update',
        'POST',
        false
      );
      ajax.data = JSON.stringify(args.data);
      ajax.onSuccess = (data: any) => {
        schObj.eventSettings.dataSource = JSON.parse(data);
      };
      ajax.send();
    }
  }

示例：https://stackblitz.com/edit/angular-schedule-custom-adaptor?file=app.component.ts 服务：https://www.syncfusion.com/downloads/support/directtrac/344913/ze/Service-285380590

【讨论】：