Timeline View Header Row on Date and Hour cannot be template

[Cesar Smerling]

Hi im testing the header row funciontallity for the timeline, I want to template the Date format and the Hour format, so for example in the hour show the scale in minutes. But it's seem that the ng-template it's not working on this two options.

Another thing, there is a bug in the getWeekNumber (you can see in the example) the week 2 it's show as week1

[Vengatesh Maniraj]

Hi Cesar, 

Greetings from Syncfusion Support. 

Q1: Date format and hour format: 

We could be able to change the date format and hour format by making use of dateHeaderTemplate, timeScaleMajorSlotTemplat and timeScaleMinorSlotTemplate like below, 

<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> 

      <ng-template #dateHeaderTemplate let-data> 

        <div class="date-text">{{getDateHeaderText(data.date)}}</div> 

    </ng-template> 

And the same we have prepared in the below sample, kindly check the sample and below UG links. 

Sample: https://stackblitz.com/edit/angular-py9tg7?file=app.component.html 

Date format: https://ej2.syncfusion.com/angular/documentation/schedule/header-bar/#date-header-customization 

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

Q2: getWeekNumber method 

 

We have validated the reported issue at our end and we found the cause for this issue that we have missed to include the getWeekLastDate method to calculate the week number. We have prepared the sample with getWeekLastDate that can be available in below link and we have logged the defect report to modify this changed into online sample and it would be refreshed in Volume 1, 2020 release which is expected in end of march. 

getWeekDetails(value: CellTemplateArgs): string { 

        return 'Week ' + getWeekNumber(getWeekLastDate(value.date, 0)); 

    }  

  

https://www.syncfusion.com/feedback/11728/getweeknumber-is-not-working-properly 

Kindly check the above and revert us for further assistance. 

Regards, 

Vengatesh.  

[Cesar Smerling]

Hi! Thanks for the anwser, it's seems that in the snippet is not templating the "Hour" Header Row, I want to template the Hour header row with a scale (4, each 15 minutes) and show 00 15 30 45 for each column of time, but it's seems the ng-template not works for "Date" and "Hour" option on the header row. We want this in the TimelineView.

Another bug appears in the snippet, if you see December 2019, you will see week 1 in the last week of the month.

Thanks

[Vengatesh Maniraj]

Hi Cesar, 

Thanks for the update.  

We have modified the sample which is provided in our last update for Date and Hour row templates. Please find the below 

Sample: https://stackblitz.com/edit/angular-py9tg7?file=app.component.ts 

For Hour template:  

<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> 

 public timeScale: TimeScaleModel = { 

        enable: true, 

        slotCount: 4, 

        majorSlotTemplate: '#majorSlotTemplate', 

        minorSlotTemplate: '#minorSlotTemplate' 

    }; 

For Date template: 

<ng-template #dateHeaderTemplate let-data> 

        <div class="date-text">{{getDateHeaderText(data.date)}}</div> 

      </ng-template> 

To Set the interval for timescale, 

<ejs-schedule #scheduleObj width='100%' height='650px' [selectedDate]="selectedDate" 

      [eventSettings]="eventSettings" (eventRendered)="onEventRendered($event)" [timeScale]="timeScale"> 

 public timeScale: TimeScaleModel = { 

        enable: true, 

        slotCount: 4, 

        majorSlotTemplate: '#majorSlotTemplate', 

        minorSlotTemplate: '#minorSlotTemplate' 

    }; 

And the Hour’s row would not render in the TimelineMonth view so we should use except TimelineMonth view to show the hour rows. 

  <e-views> 

        <e-view displayName='TimelineViews' option='TimelineWeek'></e-view> 

      </e-views> 

Kindly try the above and check the week number too and revert us for further assistance. 

Regards, 

Vengatesh