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;
}
...
I just try using dx-calendar, your code is missing the [] for the option "firstDayOfWeek".
<dx-calendar [firstDayOfWeek]="1"></dx-calendar>