We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Timeline View Header Row on Date and Hour cannot be template

Thread ID:

Created:

Updated:

Platform:

Replies:

151129 Jan 31,2020 02:21 PM UTC Feb 4,2020 05:59 AM UTC Angular - EJ 2 3
loading
Tags: Schedule
Cesar Smerling
Asked On January 31, 2020 02:21 PM UTC

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 [Syncfusion]
Replied On February 3, 2020 10:13 AM UTC

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. 


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)); 
    }  
  

Kindly check the above and revert us for further assistance. 

Regards, 
Vengatesh.  


Cesar Smerling
Replied On February 3, 2020 11:28 AM UTC

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 [Syncfusion]
Replied On February 4, 2020 05:59 AM UTC

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 


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 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon