Search code examples
angularcalendardevextremedevextreme-angular

How to fix "showing the days of week incorrectly" in dx-calendar?


I have a trouble with a dx-calendar component from devExtreme. I tried to set the first day of week to 1 to set the Monday as the first day of the week. The dates of the components are working fine. But the problem is in the caption. I'm using Angular 7 and devExtreme 18.

Refer to this image here : (https://drive.google.com/open?id=11g3igXM1lNfC03xsGeAN173uDlkXgBNH)

  <dx-calendar
    firstDayOfWeek="1"
    (onInitialized)="onInitialized()"
    (onValueChanged)="onValueChanged($event)"
    cellTemplate="custom"
  >
    <span
      *dxTemplate="let cell of 'custom'"
      [ngClass]="getCellCssClass(cell.date)">
      {{ cell.text }}
    </span>
  </dx-calendar>
...
  onInitialized() {
    const today = new Date();
    setTimeout(() => {
      $('.dx-calendar-caption-button span.dx-button-text').html(this.getFormatedDateString(today));
    }, 100);
  }
...
  getCellCssClass(date: string) {
    let cssClass = 'date ';
    const today = new Date();
    const d = new Date(date);
    const matchCase = this.specialDates.find((item) => {
      return item.date.toUTCString().substr(0, 16) === d.toUTCString().substr(0, 16);
    });
    if (matchCase === undefined) {
      if (today.toUTCString().substr(0, 16) === d.toUTCString().substr(0, 16)) {
        cssClass += 'today';
      }
    } else {
      cssClass += 'type' + matchCase.type;
    }
    return cssClass;
  }
...

Solution

  • I just try using dx-calendar, your code is missing the [] for the option "firstDayOfWeek".

    <dx-calendar [firstDayOfWeek]="1"></dx-calendar>