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. Image for the cookie policy date

Custom date and time format

Hello, we would like to set the date and timeformat for the Schedule control.
The dateFormat and timeFormat properties only seem to be used by the calendar control that is part of the schedule control.

Our question is: how can we set a custom date and timeformat without specifying the locale? The date format should be visible in the header rows; the time format should be visible in the bar on the left.

Thank you very much in advance!

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team May 28, 2019 04:55 AM UTC

Hi Lon, 
Greetings from Syncfusion. 
Date format can be customized using dateFormat and kindly refer the below links. 
Time scale template can be used to customize the time format without locale option. 
  <ng-template #timeScaleMajorSlotTemplate let-data> 
        <div class="majorTime">{{getMajorTime(data.date)}}</div> 
public instance: Internationalization = new Internationalization(); 
  getMajorTime(date: Date): string { 
    return this.instance.formatDate(date, { skeleton: 'Hm' }); 

JR Jiri Richter January 16, 2020 02:27 PM UTC

When I include 

  <ng-template #timeScaleMajorSlotTemplate let-data> 
        <div class="majorTime">{{getMajorTime(data.date)}}</div> 

in Scheduler 17.3.28, I get an error

ERROR TypeError: str.match is not a function
    at evalExp (ej2-base.es2015.js:6806)
    at compile$1 (ej2-base.es2015.js:6793)
    at Object.compile (ej2-base.es2015.js:7073)
    at compile$$1 (ej2-base.es2015.js:6968)
    at ComponentBase.templateParser (ej2-schedule.es2015.js:11913)
    at ComponentBase.initializeTemplates (ej2-schedule.es2015.js:11486)
    at ComponentBase.initializeView (ej2-schedule.es2015.js:11479)
    at ComponentBase.renderElements (ej2-schedule.es2015.js:11331)
    at ComponentBase.initializeResources (ej2-schedule.es2015.js:11310)
    at ComponentBase.render (ej2-schedule.es2015.js:11200)

Could you advise?

HB Hareesh Balasubramanian Syncfusion Team January 17, 2020 12:43 PM UTC

Hi Jiri Richter, 

Thanks for your update. 

Based on your requirement we have prepared a sample using timescale property with 17.3.28 version and the sample can be viewed from the below link, 

And for further reference, kindly the below UG link and API links, 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 


Live Chat Icon For mobile
Up arrow icon