24 Hour mode without AM and PM

[chevron]

Hello,

by default my scheduler is displayed in 24 hour format with the AM and PM tag.

I'd like to display it without the AM and PM from 00:00 to 23:00.

I've searched in documentation online and tried with locale = 'fr-FR' but not succesfull..

Can you tell me how to do it ?

Thanks by avance !

[Karthigeyan Krishnamurthi]

Hi Chevron, 

 

Syncfusion greetings. 

 

In 24hr format AM/PM will not be displayed like below. Kindly refer the below links and share your code example to proceed further. 

https://stackblitz.com/edit/angular-y4rarr-vh2cwy?file=views.html 

https://www.syncfusion.com/forums/144502/changle-locale-calendar 

https://ej2.syncfusion.com/angular/documentation/schedule/localization/#globalization 

 

 

 

Regards, 

Karthi 

[chevron]

Thanks for your answer, but i only need the part where it's specified that the hours should be displayed from 00:00 to 23:00 without AM/PM..

Is there a simplified version of you example ? and with the english or french version ?

Thanks again !

[Hareesh Balasubramanian]

Hi Chevron, 

 

Thanks for your update. 

 

We need to load the respective culture files using loadCldr method from base package like below code snippet. 

 

import * as numberingSystems from './numberingSystems.json'; 

import * as gregorian from './ca-gregorian.json'; 

import * as numbers from './numbers.json'; 

import * as timeZoneNames from './timeZoneNames.json'; 

import * as currencies from './currencies.json'; 

 

loadCldr(numberingSystems, gregorian, numbers, timeZoneNames); 

 

Kindly check the sample which provided in previous update and revert us if you need any further assistance. 

 

Regards, 

Hareesh 

[chevron]

I have another questions, 

I can see in this example:

https://ej2.syncfusion.com/angular/documentation/schedule/localization/?_ga=2.209373525.678560646.1567086243-2010885583.1557845045#globalization

that used file is fr-CH, but where can i get these files ? and is there the fr-FR file ?

Thanks !

LoadCldr(
    require('cldr-data/supplemental/numberingSystems.json'),
    require('cldr-data/main/fr-CH/ca-gregorian.json'),
    require('cldr-data/main/fr-CH/numbers.json'),
    require('cldr-data/main/fr-CH/timeZoneNames.json'));

[chevron]

And also where can i get these files ????

loadCldr(
    require('cldr-data/supplemental/numberingSystems.json'),
    require('cldr-data/main/fr-CH/ca-gregorian.json'),
    require('cldr-data/main/fr-CH/numbers.json'),
    require('cldr-data/main/fr-CH/timeZoneNames.json'));

[Vinitha Devi Murugan]

 

Hi chevron, 

 

Thanks for your update. 

 

By installing the following commend npm install cldr-data --save, you can get the required culture files in your project and the same can be documented in the link below. Please follow the documentation steps below and let us know if you need any further assistance on this. 

 

https://ej2.syncfusion.com/angular/documentation/schedule/localization/?_ga=2.209373525.678560646.1567086243-2010885583.1557845045#globalization  

 

Regards, 

M.Vinitha devi 

[chevron]

Hi,

After trying to include example code provided in my project, i have the same error than TRAN:

I don't know why ? i've copied every files of your example without modifiyng them ???

And Also, when i run  npm install cldr-data --save,  i have an error and so the node_modules/cldr-data is not created, can you tell me where i could download directly files ??

Thanks again...

[Hareesh Balasubramanian]

Hi Chevron, 

 

Thanks for your update. 

 

We have prepared a sample based on your requirement using locale property as fr culture, which can be viewed from the following link, 

https://stackblitz.com/edit/angular-y4rarr-yvdez4?file=views.html 

 

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

Regards, 

Hareesh 

[chevron]

I still have the same error:

[Karthigeyan Krishnamurthi]

Hi Chevron,  

  

Thanks for your update. 

 

We have checked the case in the below Angular 8 sample and Schedule is render correctly in fr locale. 

https://www.syncfusion.com/downloads/support/directtrac/146942/ze/sample805964684  

 

Kindly try the sample and if the issue persists, try to reproduce the error in a sample and revert else share your build version, code example/runnable sample (if possible) to serve you better. 

 

Regards, 

Karthi 

 

 

[chevron]

Hi,

First thing: It seems that you've missed json files and folder cldr-data/ because i can't find it ???

I've used my own files and imported and launch your project but have exactly the same error:

I've only changed the require by import because i had errors with require:

Do you think it could be the cause of the error ?

Replaced this:

loadCldr(

  require('numberingSystems.json'),

  require('ca-gregorian.json'),

  require('numbers.json'),

  require('timeZoneNames.json'));

BY:

import * as numberingSystems from './numberingSystems.json';

import * as gregorian from './ca-gregorian.json';

import * as numbers from './numbers.json';

import * as timeZoneNames from './timeZoneNames.json';

loadCldr(numberingSystems, gregorian, numbers, timeZoneNames);

[Vinitha Devi Murugan]

  

Hi Chevron, 

 

We are able to reproduce the reported issue and kindly use below code to overcome the reported issue and same can be available in below link. 

 

loadCldr(numberingSystems['default'], gregorian['default'], numbers['default'], timeZoneNames['default']);  

 

   

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ng-sample1948242838  

 

Regards, 

M.Vinitha devi. 

[chevron]

Hello,

I've finally succeeded and it's well working in a virgin project. But when integrating it to my angular project i have again the same error: cannot trim value of undefined..

When debugging, it appears in node_modules/@syncfusion/ej2-schedule/dist/es6/ej2/ej2-schedule.es2015.js

Line 15001... 

if (this.parent.locale === 'en' || this.parent.locale === 'en-US') {

  longDateFormat = getValue('dateFormats.long', getDefaultDateObject(this.parent.getCalendarMode()));

}

else {

  longDateFormat = getValue('main.' + '' + this.parent.locale + '.dates.calendars.' + this.parent.getCalendarMode() + '.dateFormats.long', cldrData);

    

 // AT THIS LINE cldrData is empty.... whereas it should contains values downloaded in loadCldr ?????????????

}

if (!endDate) {

  return globalize.formatDate(startDate, { format: longDateFormat, calendar: this.parent.getCalendarMode() });

}

let dateFormat = longDateFormat.trim().toLocaleLowerCase();  //SO at this time there is the error

Can you see why cldrData is empty at this time and how to force its value ???

Thanks !

[Hareesh Balasubramanian]

Hi Chevron, 

Thanks for your update. 

We would like to inform that provided information is not sufficient and kindly share more details like schedular code snippet / image of your project, to serve you better. 

Regards, 

Hareesh 

[Balasubramanian]

Hi Karthi,

Is it possible to show 24 hours format in timeline header view, instead of changing the locale?

Thanks

Bala

Wisdom IT Solutions

Attachment: schdule01_c8031010.zip

[Praveenkumar Narasimhanaidu]

Hi Balasubramanian, 

Greetings from Syncfusion support..! 

Yes, it’s possible to show 24 hours format in timeline header view without changing the locale. We can achieve this requirement with the help of minorSlotTemplate and majorSlotTemplate of scheduler. We have prepared sample for your reference which can be viewed from following link. 

 public timeScale: TimeScaleModel = { 

    enable: true, 

    interval: 60, 

    slotCount: 4, 

    majorSlotTemplate: "#majorSlotTemplate", 

    minorSlotTemplate: "#minorSlotTemplate" 

  }; 

  public instance: Internationalization = new Internationalization(); 

  getMajorTime(date: Date): string { 

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

  } 

  getMinorTime(date: Date): string { 

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

  } 

Sample: https://stackblitz.com/edit/angular-scheduler-24-hour-format?file=app.component.ts 

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

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Praveenkumar.