2

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;
  }
...
Ever Dev
  • 1,882
  • 2
  • 14
  • 34

1 Answers1

3

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

<dx-calendar [firstDayOfWeek]="1"></dx-calendar>
Yew Hong Tat
  • 644
  • 6
  • 10
  • Oh, yeah, It works! thanks. And can you tell me the difference between the `firstDayOfWeek="1"` and `[firstDayOfWeek]="1"`? I know the main difference between them, but I think they are the same when I use them with constant numbers. – Ever Dev Sep 01 '19 at 15:06
  • To pass a variable to a component, you need to use [] so that angular recognizes this attribute is an input to pass into a component. You can read more here: https://angular.io/guide/template-syntax#in-the-parent – Yew Hong Tat Sep 01 '19 at 18:00