Refreshing an Object (EventMarker) in interval

Question

In my project I use the hours/minutes timeline setting.

By using the EventMarker property, I let mark the current day and time. This works after rendering the data once.

In my case I want the EventMarker to refresh itself in an interval of two minutes. So the EventMarker should always show the current time every two minutes.

I have continued this on Stackblitz: https://stackblitz.com/edit/event-markers-gantt-c7snde?file=app.component.ts

The following has already been implemented:

[app.component.html]

<ejs-gantt

..

id="eventMarkers"

#gantt

height="430px"

..

</ejs-gantt>

[app.component.ts]

export class AppComponent {

@ViewChild("gantt")

public ganttObj: GanttComponent;

..

public ngOnInit(): void {

}

[...]

let pStartDate = this.projectStartDate;

let currentDateTime = new Date();
currentDateTime.getTime();
let diff = currentDateTime.getTime() - pStartDate.getTime();

let pEndDate = new Date(currentDateTime);
pEndDate.setTime(pEndDate.getTime() + diff);
this.eventMarkers = [

{

day: currentDateTime,
label: "Current Time"

}

];

[...]

public dataBound() {

let currentDateTime2 = new Date();

currentDateTime2.getTime();

setTimeout(this.ganttObj.eventMarkers[currentDateTime2], 120000);

}

As you can see in Stackblitz, the EventMarker is rendered correctly (with the current time) when the data is loaded for the first time,

but it does not refresh.

In index.html I have installed an htpp request that refreshes every 5 minutes.

 <meta http-equiv="refresh" content="300" />

With this I just wanted to visualize what exactly I mean. We can see how the EventMarker keeps moving every 5 minutes.

Via DataBound the same should be realized without refreshing the whole page. But unfortunately it does not work.

Monisha Sivanthilingam · Accepted Answer

Hi Ali, 
 
Thank you for contacting Syncfusion support. 
 
We have analyzed your query and have modified the sample you shared to update the event markers every two minutes. We have made use of the setInterval() method and updated the position of the event marker based on the current time every two minutes. The following code snippets demonstrate the solution. 
 
app.component.ts 




export class AppComponent { 
  @ViewChild("gantt") 
  public ganttObj: GanttComponent; 
  public data: object[]; 
  public taskSettings: object; 
  public labelSettings: object; 
  public projectStartDate: Date; 
  public projectEndDate: Date; 
  public timelineSettings: object; 
  public eventMarkers: object[]; 
  public id: any; 
 
  constructor(private datePipe: DatePipe) {} 
 
  public ngOnInit(): void { 
    this.data = projectNewData; 
    this.taskSettings = { 
      id: "TaskID", 
      name: "TaskName", 
      startDate: "StartDate", 
      endDate: "EndDate", 
      duration: "Duration", 
      progress: "Progress", 
      dependency: "Predecessor", 
      child: "subtasks" 
    }; 
    this.projectStartDate = new Date("1/19/2021 07:55"); 
    this.projectEndDate = new Date("01/31/2021"); 
    this.labelSettings = { 
      leftLabel: "TaskName" 
    }; 
    this.timelineSettings = { 
      timelineUnitSize: 50, 
      topTier: { 
        unit: "Hour", 
        count: 4, 
        format: "EEEE, MMMM d, y" 
      }, 
      bottomTier: { 
        unit: "Minutes", 
        count: 5, 
        format: "HH:mm" 
      } 
    }; 
    let pStartDate = this.projectStartDate; 
    let currentDateTime = new Date(); 
    currentDateTime.getTime(); 
    let diff = currentDateTime.getTime() - pStartDate.getTime(); 
 
    let pEndDate = new Date(currentDateTime); 
    pEndDate.setTime(pEndDate.getTime() + diff); 
    this.eventMarkers = [ 
      { 
        day: currentDateTime, 
        label: "Current Time" 
     } 
    ]; 
    this.id = setInterval(() => { 
      let currentDateTime2 = new Date(); 
      currentDateTime2.getTime(); 
      this.eventMarkers = [ 
        { 
          day: currentDateTime2, 
          label: "Current Time" 
        } 
      ]; 
    }, 120000); 
  } 
} 
 
We have prepared a sample demonstrating the solution. 
 
Please contact us if you require any further assistance. 
 
Regards, 
Monisha.