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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom date and time format

Thread ID:





144877 May 27,2019 11:57 AM UTC Jan 17,2020 12:43 PM UTC Angular - EJ 2 3
Tags: Schedule
Lon Hofman
Asked On May 27, 2019 11:57 AM UTC

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!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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' }); 

Jiri Richter
Replied On 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?

Hareesh Balasubramanian [Syncfusion]
Replied On 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. 



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