首页 > 解决方案 > 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>
匹配的事件数组 [{ EmployeeId: "S7MyslIyNFCyBgA="

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"

}]

标签: angularejs-scheduleangular-scheduler

解决方案


我们检查了您共享的代码片段,并在此基础上准备了示例来验证问题。但不幸的是,我们无法复制问题并且它正常工作。我们怀疑资源的字段映射与事件数组中的资源集合不匹配。

如果资源 id 映射正确,请在分配事件后使用以下代码片段刷新事件设置。

this.eventSettings  = {
   dataSource: data
}; 
this.scheduleObj.refreshEvents();

请参阅以下示例以获取更多参考。

示例:https ://stackblitz.com/edit/scheduler-with-service-sdy4jc?file=app.component.ts


推荐阅读