【问题标题】:Event is not show in the time block after change date in syncfusion scheduler library in Angular 9?Angular 9 中同步融合调度程序库中更改日期后的时间块中未显示事件?
【发布时间】:2025-12-08 23:40:02
【问题描述】:

我已经通过 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"

}]

【问题讨论】:

  • 您的代码格式错误且难以解释 - 请您解决这个问题以帮助我们破译问题?
  • 你能发布更多你的代码吗?我们看不到有多少属性被初始化,或者它们是否被初始化。
  • 您正在getTimelineList 中执行一些异步操作:this.service.getCalenderListViaTime(timelineData).subscribe( ...。这可能与问题有关。
  • @Jake Stokes-先生,我将为此创建 stackbliz,然后检查问题
  • @Jake Stokes-实际上先生,我在收到用户列表后调用了 getTimelineList。先生您能告诉我管理上述数组的其他方法吗?

标签: angular ejs-schedule angular-scheduler


【解决方案1】:

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

如果资源ID映射正确,请在分配事件后使用以下代码sn-p刷新事件设置。

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

请参考以下示例以获得更多参考。

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

【讨论】:

  • 我试过你的代码它不起作用。我将共享嵌套数组然后你会检查
  • 您好 Kapil,Scheduler 数据源仅支持对象类型数组。所以我们建议您将嵌套数组转换为对象类型的数组。如需更多参考,请参阅以下链接。 ej2.syncfusion.com/angular/documentation/api/schedule/…如果可以在下面的示例中复制您的问题,我们可以解决它并提供解决方案。 stackblitz.com/edit/…
  • :感谢您的宝贵信息,sir.i 将嵌套数组转换为对象类型数组。sir DateTime.parse() 是否在 php 中工作?
  • 没有。 DateTime.parse() 在 php 中不起作用。因为这是从字符串转换日期的 C# 语法。
  • 请参考以下链接了解更多关于PHP中日期转换的信息。 php.net/manual/en/function.strtotime.php