How to post data to custom API via Ajax on Synfusion Angular Scheduler

Question

I'm currently trying to figure out how to post data to my API when an event is created using the editor window. I use Ajax to retrieve content already as shown below;

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  =>
{

};

Furthermore, how do I get the currently selected date range when the user changes the date on the scheduler via view or date navigation.

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

[UPDATE] Found how to get the currently selected 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];
    }
  }

score 1 · Accepted Answer · answered Oct 12 '21 at 12:11

We have validated your reported query "How to post data to custom API via Ajax on Synfusion Angular Scheduler" and prepared sample with service for your reference.

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();
    }
  }

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

How to post data to custom API via Ajax on Synfusion Angular Scheduler

1 Answers1