Show date and time indicator as line in timeline view

Question

Hello,I would like to display a line which represent the current date on a timeline view, just like the red line I drew (artificially) on the image below.I tried to play with the showTimeIndicator property but nothing changed, is there any solution to solve that ?Thanks for your advicesRegards,Julien MARQUE

Ravikumar Venkatesan · Accepted Answer

Hi Julien, 

Greetings from Syncfusion support. 

We have validated your requirement at our end and achieved it with the help of the dataBound event of the Schedule and for the same, we have prepared a sample that can be available from the below link. 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-current-date-indicator-for-timeline-f1ksn4?file=app.component.ts 
 
[app.component.ts] 




  onDatabound(args) { 
    let currentDateTd: HTMLElement = this.scheduleObj.element.querySelector(".e-current-date"); 
    let indicator: HTMLElement = this.scheduleObj.element.querySelector(".e-current-day-indicator"); 
    if (currentDateTd && !indicator) { 
      indicator = this.scheduleObj.createElement("div", { className: "e-current-day-indicator" }); 
      currentDateTd.appendChild(indicator); 
    } 
  } 
 
[app.component.css] 




.e-current-day-indicator { 
  background: #e3165b; 
  margin: auto; 
  height: 100%; 
  width: 2px; 
} 

API(dataBound event): https://ej2.syncfusion.com/angular/documentation/api/schedule/#databound 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan

Julien Marque · Answer

Thank you that works well for the timeline month view !I would have another request : is there possible to do that in week cells (they don't have the css class .e-current-date)Regards,Julien

Ravikumar Venkatesan · Answer

Hi Julien, 

Thanks for the update. 

We have validated your query at our end and achieved it with the help of the dataBound event, getWeekNumber, and getWeekLastDate methods of the Schedule and for the same, we have prepared a sample which can be available from the below link. 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-current-date-indicator-for-timeline-ndeeul?file=app.component.ts 
 
[app.component.ts] 




  onDatabound(args) { 
    let indicator: HTMLElement = this.scheduleObj.element.querySelector(".e-current-day-indicator"); 
    var currentViewDates = this.scheduleObj.getCurrentViewDates() as Date[]; 
    var currentDate = new Date(); 
    var count = currentViewDates.length; 
    var isCurrentYear = currentViewDates[0].getFullYear() >= currentDate.getFullYear() && currentViewDates[count - 1].getFullYear() <= currentDate.getFullYear(); 
 
    if (isCurrentYear && !indicator) { 
      var cells: any = document.querySelectorAll(".e-work-cells"); 
      var weekNumber = getWeekNumber(getWeekLastDate(new Date(), this.scheduleObj.firstDayOfWeek)); 
      for (let i = 0; i < cells.length; i++) { 
        var currentWeekNumber = getWeekNumber(getWeekLastDate(new Date(+cells[i].dataset.date), this.scheduleObj.firstDayOfWeek)); 
        if (currentWeekNumber === weekNumber) { 
          indicator = this.scheduleObj.createElement("div", { className: "e-current-day-indicator" }); 
          cells[i].appendChild(indicator); 
          break; 
        } 
      } 
    } 
  } 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan

Julien Marque · Answer

Thanks a lot for your fast answer, that works perfectly !Regards,Julien

Nevitha Ravi · Answer

Hi Julien, 

You are most welcome..! please get back to us if you need any further assistance. 

Regards, 
Nevitha