How to display the Time text on slots.

[Moiz]

I'm working with Angular Schedule. I've the following settings applied for timeScale:

  public timeScale: TimeScaleModel = {

    enable: true,

    interval: 60,

    slotCount: 4,

  };

and I get the following view:

Intervals of 15 minutes each.

My Question is, how can I get the time against each block? Something like the following:

Hope I've made the question understandable.

[Nevitha Ravi]

Hi Moiz, 

Greetings from Syncfusion Support. 

We can achieve your requirement using majorSlotTemplate and minorSlotTemplate, please refer to the following sample and UG. 

https://stackblitz.com/edit/angular-schedule-timescale-temaplate?file=app.component.ts  

 

  public instance: Internationalization = new Internationalization(); 

  getMajorTime(date: Date): string { 

    return this.instance.formatDate(date, { skeleton: "hm" }); 

  } 

  getMinorTime(date: Date): string { 

    return this.instance.formatDate(date, { skeleton: "hm" }); 

  } 

 

      <ng-template #timeScaleMajorSlotTemplate let-data> 

        <div class="majorTime">{{getMajorTime(data.date)}}</div> 

      </ng-template> 

      <ng-template #timeScaleMinorSlotTemplate let-data> 

        <div class="minorTime">{{getMinorTime(data.date)}}</div> 

      </ng-template> 

 

UG: https://ej2.syncfusion.com/documentation/schedule/timescale/#customizing-time-cells-using-template 

Please get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Moiz]

Thanks a lot! Solves my query. Thank you for your swift response. Have a great day. Cheers.

[Vengatesh Maniraj]

Hi Moiz, 

 

You are most welcome😊. 

 

We are happy that our solution has resolved your query. 

 

Please get in touch with us if you need any further assistance. 

 

Have a great day!!! 

 

Regards, 

Vengatesh