angular - Angular 9 中同步融合调度程序库中更改日期后的时间块中未显示事件?
问题描述
我已经通过 syncfusion 调度程序库实现了事件调度程序。问题是我从 API 接收到事件数据,日期是 2020-07-24。数据已从 APi 正确接收,但在仪表板中不可见。谁能告诉我我的代码有什么问题?
ngOnInit(){
//Modify below date via library wise.....
const formattedDate = this.datePipe.transform(new Date(), "yyyy-MM-dd").replace(/-0+/g, '-').replace(/-/g, " ");
this.selectedDate = new Date(formattedDate);
}
//onActionComplete execute after change date from date picker
onActionComplete(args): void {
if(args.requestType === "dateNavigate") {
var currentViewDates = this.scheduleObj.getCurrentViewDates();
var startDate = <any>currentViewDates[0];
//now we we get current day after select the new date...
this.selectedDayId = startDate.getDay();
this.currentDate = this.datePipe.transform(startDate, "yyyy-MM-dd");
this.getTimelineList(this.currentDate);
}
//getTimelineList for get list of events..
getTimelineList(date){
var timelineData = {
"search_type" : "1",
"search_date" : date,
"day_id" : this.selectedDayId
}
this.service.getCalenderListViaTime(timelineData).subscribe(data={
for(let j=0;j<data.data.length;j++){
//use below code for remove 0 from date string..
const stime = data.data[j].StartTime.replace(/\b0/g,'');
let etime = data.data[j].EndTime.replace(/\b0/g, '');
var stimeData = <any>stime.split(",");
var etimeData = <any>etime.split(",");
stimeData[1] -= 1;
if(stimeData[1] < 1){
stimeData[1] = 12;
stimeData[0] -= 1;
}
var etimeData = <any>etime.split(",");
etimeData[1] -= 1;
if(etimeData[1] < 1){
etimeData[1] = 12;
etimeData[0] -= 1;
}
let startTime = <any>new Date(stimeData[0],stimeData[1],stimeData[2],stimeData[3],stimeData[4]);
let endTime = <any>new Date(etimeData[0],etimeData[1],etimeData[2],etimeData[3],etimeData[4]);
data.data[j].StartTime = startTime;
data.data[j].EndTime = endTime;
}
let data = <Object[]>extend([], data.data,null,true);
this.eventSettings = {
dataSource: data
};
});
}
<!-- HTML Section-->
<div class="control-section">
<div class="drag-sample-wrapper">
<div class="schedule-container">
<ejs-schedule #scheduleObj cssClass='schedule-block-events' width='100%' [readonly]=true
height='950px' [group]="group" [timeScale]="timeScale" (actionComplete)='onActionComplete($event)'
[currentView]="currentView" [selectedDate]="selectedDate" [eventSettings]="eventSettings">
<e-resources>
<e-resource field='EmployeeId' title='Employees' name='Employee' [dataSource]='employeeDataSource'
[allowMultiple]='allowMultiple' textField='Text' idField='Id' groupIDField="GroupId" colorField='Color'>
</e-resource>
</e-resources>
<e-views>
<e-view option="TimelineDay"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
EndTime: Fri Jul 24 2020 11:20:00 GMT+0530 (India Standard Time) {}
Id: "8"
StartTime: Fri Jul 24 2020 11:00:00 GMT+0530 (India Standard Time) {}
Subject: "Class B"
}]
解决方案
我们检查了您共享的代码片段,并在此基础上准备了示例来验证问题。但不幸的是,我们无法复制问题并且它正常工作。我们怀疑资源的字段映射与事件数组中的资源集合不匹配。
如果资源 id 映射正确,请在分配事件后使用以下代码片段刷新事件设置。
this.eventSettings = {
dataSource: data
};
this.scheduleObj.refreshEvents();
请参阅以下示例以获取更多参考。
示例:https ://stackblitz.com/edit/scheduler-with-service-sdy4jc?file=app.component.ts
推荐阅读
- python - 如何使用 beautifulsoup 和 pandas 从带有日期过滤器的数据框中抓取数据?
- django - 如何在代码中为权限创建用户组(不在管理员中)
- javascript - 当每个元素都有一个单独的提交按钮时,提交列表中单个元素的正确方法是什么
- c++ - 为什么我的vscode报错,但是cmake可以编译代码
- javascript - 将多个 Refs 从子组件传递给父组件-Reactjs
- c++ - 反向链表导致循环
- json - 使用 json 复制 @id
- windows - 使用 WMIC 获取用户配置文件列表时的问题
- ios - React 应用程序似乎在 Safari 上崩溃并禁用 JavaScript 控制台
- konvajs - 加载时显示黑色的 Konva 图像