Custom date and time format

[Lon Hofman]

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]

Hi Lon, 

 

Greetings from Syncfusion. 

 

Date format can be customized using dateFormat and kindly refer the below links. 

https://ej2.syncfusion.com/angular/documentation/schedule/localization/#setting-date-format 

https://ej2.syncfusion.com/angular/documentation/api/schedule/#dateformat 

 

Time scale template can be used to customize the time format without locale option. 

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

https://ej2.syncfusion.com/angular/demos/#/material/schedule/time-scale 

 

  <ng-template #timeScaleMajorSlotTemplate let-data> 

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

      </ng-template> 

 

public instance: Internationalization = new Internationalization(); 

  getMajorTime(date: Date): string { 

    return this.instance.formatDate(date, { skeleton: 'Hm' }); 

  } 

 

Regards, 

Karthi 

[Jiri Richter]

When I include 

  <ng-template #timeScaleMajorSlotTemplate let-data> 

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

      </ng-template> 

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]

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, 

Sample: https://stackblitz.com/edit/angular-nyrjwm-ognxy2?file=package.json 

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

UG link: https://ej2.syncfusion.com/angular/documentation/schedule/timescale/?no-cache=1#customizing-time-cells-using-template 

API Link: https://ej2.syncfusion.com/angular/documentation/api/schedule/#timescale 

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

Regards, 

Hareesh