Event is not show in the time block after change date in syncfusion scheduler library in Angular 9?

Question

I have implemented the event scheduler via syncfusion scheduler library.the problem is that i have received the event data from API and date is 2020-07-24.data is properly received from APi but its not visible in the dashboard.can anybody tell me whats the wrong in my code?

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>

Matched event array [{ 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"

}]

Your code is very badly formatted and difficult to interpret - please can you address that to help us decipher the issue? — Jake Stokes, Jul 26 '20 at 18:09
Could you post more of your code? We can't see how many properties are intiialized, or whether they are initialized. — Jake Stokes, Jul 26 '20 at 18:13
You are performing some asynchronous operations within the `getTimelineList` here: `this.service.getCalenderListViaTime(timelineData).subscribe( ...`. This could be related to the problem. — Jake Stokes, Jul 26 '20 at 18:14
@Jake Stokes- sir I will create stackbliz for that and then check the issue — Kapil Soni, Jul 26 '20 at 18:15
@Jake Stokes- actually sir I have called getTimelineList after user list is received.can you tell me sir any another way to manage above array. — Kapil Soni, Jul 26 '20 at 18:33
Sorry Kapil, I'm struggling to decipher it with the current formatting, and with some of your code missing. Is the data from the API call stored on `currentViewDates`? — Jake Stokes, Jul 26 '20 at 19:30
Your class is showing some, but not all of the code. For example, I can't tell whether variables such as `this.selectedDayId` and `this.eventSettings` are initialized or not. Is the data from the API call that you've mentioned stored on `currentViewDates`? — Jake Stokes, Jul 27 '20 at 14:43
Sir currentViewDates will be store only new date that is get after Change date.can you tell me sir any another way to pass date to new Date( 2020,2,27,5,30) this format. — Kapil Soni, Jul 28 '20 at 18:00
Hi Kapil, I thought from your original question was that when you receive data from an API call that it is not displayed on the dashboard? It sounds like the problem is in fact the format of the date? Can you confirm the issue? — Jake Stokes, Jul 28 '20 at 23:20
@JakeStokes:yes sir ur correct this is my original question but i have convert the date format at front end side.can you tell me its correctly formatted or not? — Kapil Soni, Jul 29 '20 at 05:13

score -1 · Answer 1 · edited Oct 15 '21 at 19:05

-1

We checked your shared code snippet and based on that we prepared the sample to validate the issue. But unfortunately, we are not able to replicate the problem and it working properly. We suspect that the field mapping for the resources is mismatched from the resource collection in the event array.

If the resource id is mapped properly, please refresh the events settings by making use of the below code snippet after assigning the events.

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

Please refer to the below sample for more reference.

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

edited Oct 15 '21 at 19:05

Dharman

30,962
25
85
135

answered Jul 28 '20 at 07:45

Vengatesh

49
3

I tried ur code it's not working.i will share nested array then you will check – Kapil Soni Jul 28 '20 at 18:28
Hi Kapil, Scheduler data source only support the array of object types. so we suggest you please convert the nested array into an array of object type. For more reference, please refer to the below link. https://ej2.syncfusion.com/angular/documentation/api/schedule/eventSettingsModel/#datasource If it is possible to replicate your problem in the below sample, we can resolve it and provide the solution. https://stackblitz.com/edit/scheduler-with-service-sdy4jc?file=app.component.ts – Vengatesh Jul 29 '20 at 05:36
:thanks for ur valuale infor sir.i will covert nested array to array of object type.sir DateTime.parse() is working in a php or not? – Kapil Soni Jul 29 '20 at 08:08
No. DateTime.parse() is not working in php. Because this the C# syntax to convert the date from string. – Vengatesh Jul 29 '20 at 08:15
Please refer to the below link to know more about the conversion of date in PHP. https://www.php.net/manual/en/function.strtotime.php – Vengatesh Aug 05 '20 at 06:15

Event is not show in the time block after change date in syncfusion scheduler library in Angular 9?

1 Answers1

Linked