如何通过 Syncfusion Angular 调度程序上的 Ajax post 数据自定义 API
How to post data to custom API via Ajax on Synfusion Angular Scheduler
我目前正在尝试弄清楚如何在使用编辑器 window 创建事件时 post 数据到我的 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];
}
}
我们已经验证了您报告的查询“如何通过 Ajax 在 Synfusion Angular Scheduler 上 post 数据自定义 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
我目前正在尝试弄清楚如何在使用编辑器 window 创建事件时 post 数据到我的 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];
}
}
我们已经验证了您报告的查询“如何通过 Ajax 在 Synfusion Angular Scheduler 上 post 数据自定义 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