Display time in scheduler block on hover.

Question

Hi,within the scheduler i have the requirement to show the time on each block on hover of the mouse, i tried using hover method but the method doesn't returns or works.i am sharing the requirement screenshots as well as implemented sections in scheduler.1) Time should be displayed on mouse hover of the scheduler block. 2) Method i have tried and implemented   <ejs-schedule  #scheduleObj  cssClass='schedule-cell-dimension' width='100%' height='550px' [selectedDate]='selectedDate'[(currentView)]="currentView" [eventSettings]='eventSettings'(actionBegin)="dragandDropEvent($event)"(created)="onCreated()"      (actionComplete)="onActionComplete($event)"[startHour]="startHour" [endHour]="endHour"[workHours]="workHours"[group]="group" (hover)="onHover($event)" >(hover)="onHover($event)"i have been stuck in this requirement, please consider this as top priority issue and get back to us as soon as possible

Balasubramanian Sattanathan · Accepted Answer

Hi Shubham, 

Greetings from Syncfusion Support. 

We have validated your requirement at our end and suspect that your need is to have the tooltip when hovering the scheduler work cells. We can achieve this by making use of the below code snippet. 





public onHover(args): void { 
  let hoverTarget: HTMLElement = closest((event.target as Element), '.e-work-cells') as HTMLElement; 
  if (hoverTarget) { 
    let ele: any = this.scheduleObj.getCellDetails(hoverTarget); 
    this.tooltipObj.content = "" + this.getTimeString(ele.startTime); 
    this.tooltipObj.open(hoverTarget); 
  } 
} 

Sample: https://stackblitz.com/edit/angular-tooltip-for-work-cells-cb41rw?file=app.component.ts 

Kindly try the above sample and let us know if you need further assistance. 

Regards, Balasubramanian S