Set global firstdayofweek

[Michael Mairegger]

Hello,

I have several ejs-datepicker controls in my application and want to set the first day of week to Monday. Is it possible to define somwhere the first day of week on a global level without setting the property on every control?

All the Best,

Michael

[Berly Christopher]

Hi Michael, 

Greetings from Syncfusion support. 

We would like to inform you that, by default, our EJ2 DatePicker component will be displayed based on the en-US culture. In the en-US culture, firstDayOfWeek is Sunday. This can be changed by setting the required day with help of affecting the firstDayOfWeek property for every component. This is the default behaviour of the component.  

Else, we can load the culture with weekdata.json file which culture having the Monday as a firstDayOfWeek in the component (For ex. German culture having Monday as a first day of week). Please refer the below documentation to know more about culture loading.  

 

UG Link: https://ej2.syncfusion.com/angular/documentation/datepicker/globalization/  

For the requested scenario, we have prepared the work around solution by override the source method called createContentHeader as mentioned below. 

[app.component.html] 

<ejs-datepicker></ejs-datepicker> 

<ejs-datepicker (created)="onCreate($event)"></ejs-datepicker> 

[app.component.ts] 

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core'; 

import { isNullOrUndefined, detach, addClass } from "@syncfusion/ej2-base"; 

import { Calendar } from "@syncfusion/ej2-calendars"; 

 

@Component({ 

  selector: 'app-root', 

  templateUrl: './app.component.html', 

  styleUrls: ['./app.component.css'], 

  encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent { 

 

  public onCreate() { 

    (Calendar as any).prototype.createContentHeader = function () { 

      const WEEKHEADER: string = 'e-week-header'; 

      const WEEKNUMBER: string = 'e-week-number'; 

      if (this.getModuleName() === 'calendar') { 

        if (!isNullOrUndefined(this.element.querySelectorAll('.e-content .e-week-header')[0])) { 

          detach(this.element.querySelectorAll('.e-content .e-week-header')[0]); 

        } 

      } else { 

        if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content .e-week-header')[0])) { 

          detach(this.calendarElement.querySelectorAll('.e-content .e-week-header')[0]); 

        } 

      } 

      let daysCount: number = 6; 

      let html: string = ''; 

      let shortNames: string[]; 

      if (this.firstDayOfWeek > 6 || this.firstDayOfWeek <= 0) { 

        this.setProperties({ firstDayOfWeek: 1 }, true); 

      } 

      this.tableHeadElement = this.createElement('thead', { className: WEEKHEADER }); 

      if (this.weekNumber) { 

        html += '<th class="e-week-number"></th>'; 

        if (this.getModuleName() === 'calendar') { 

          addClass([this.element], '' + WEEKNUMBER); 

        } else { 

          addClass([this.calendarElement], '' + WEEKNUMBER); 

        } 

      } 

      shortNames = this.shiftArray(((this.getCultureValues().length > 0 && this.getCultureValues())), this.firstDayOfWeek); 

      for (let days: number = 0; days <= daysCount; days++) { 

        html += '<th  class="">' + this.toCapitalize(shortNames[days]) + '</th>'; 

      } 

      html = '<tr>' + html + '</tr>'; 

      this.tableHeadElement.innerHTML = html; 

      this.table.appendChild(this.tableHeadElement); 

 

    } 

  } 

} 

 

Sample Link: https://stackblitz.com/edit/angular-yepdsn-2qdgz1?file=app.component.ts  

Regards, 

Berly B.C