Show the german dayname & right week number Angular

Question

I've build a scheduler with dxScheduler. In want to display the name of the day in the dx-scheduler-header-row in german language.

I have localiced my application in germany.

So far I have:

<div *dxTemplate="let data of 'dateCellTemplate' let dataIndex = index">
        <div [ngClass]="getClassName(data)">
             <span>{{[data.date | date :'EEEE dd.MM [w]'}}</span>
         </div>
</div>

This shows me

Monday 22.04 [17] ; Tuesday 23.04 [17]

and so on.

I want there

Montag 22.04 [17] ; Dienstag 23.04 [17]

EDIT:

With the solution I just solved the Monday => Montag issue. But with the week Number it does not work!

Format: Day Date [Weeknumber]

Mo 29.04 [18] ... Sa 04.05 [18] So 05.05 [19] <- ????

Why the weeknumber is here 19? It should be 18.

This is not `devextreme` related, but rather angular-related. You need to set the `date` pipe localization, as explained here: https://stackoverflow.com/questions/49850214/angular-5-date-language . Devextreme has its own localization service, but since you're parsing dates using the angular pipes, you should localize angular's provider instead. — briosheje, May 02 '19 at 12:17
This solve the day-issue. But my Weeknumbers are false. It increments at Sunday not on Monday — SeHen, May 03 '19 at 13:22
This is because you need the ISO standard, check this: https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php — briosheje, May 03 '19 at 13:33
Instead of {{[data.date | date :'EEEE dd.MM [w]'}} i have now : {{getWeekNumber(data.date)}} But this shows in each header cell the same week number (from the last date in my view).. Any ideas? I get an error: "Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: 19'. Current value: 'null: 21" So in Week 19 it shows 21 and week 20 it shows 21 in week 21 it shows 21. — SeHen, May 09 '19 at 08:41
`getWeekNumber(data.date)` <-- this will update (too often) the value Expression. Avoid using method directly, define a **custom pipe** instead dealing with it, otherwise angular will not be able to render it properly due to the expression (result of the function, in that case) changing too often. — briosheje, May 09 '19 at 08:44

SeHen · Accepted Answer · 2019-05-09T10:28:08.870

Thanks to @briosheje I've got the right way ToDO:

in myComponent.component.html I changed:

<div *dxTemplate="let data of 'dateCellTemplate' let dataIndex = index">
        <div [ngClass]="getClassName(data)">
             <span>{{[data.date | date :'EEEE dd.MM [w]'}}</span>
         </div>
</div>

TO

<div *dxTemplate="let data of 'dateCellTemplate' let dataIndex = index">
    <div [ngClass]="getClassName(data)">
        <span>{{[ data.date | date : '.MM' ]}}</span><br>
        <span>{{[ data.date | wochenNummer ]}}</span>
    </div>            
</div>

Where "wochenNummer" is the name of my Pipe.

Create the pipe

ng generate pipe WochenNummer

This create 2 Files

wochen-nummer.pipe.spec.ts wochen-nummer.pipe.ts

In wochen-nummer.pipe.ts i have:

 export class WochenNummerPipe implements PipeTransform {

  transform(value: Date): string {
    // Copy date so don't modify original
    value = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
    // Set to nearest Thursday: current date + 4 - current day number
    // Make Sunday's day number 7
    value.setUTCDate(value.getUTCDate() + 4 - (value.getUTCDay() || 7));
    // Get first day of year
    const yearStart = new Date(Date.UTC( value.getUTCFullYear(), 0, 1));
    // Calculate full weeks to nearest Thursday
    const weekNo = Math.ceil(( ( (+value - +yearStart) / 86400000) + 1) / 7);
    // Return array of year and week number
    const returner = '[' + weekNo + ']';
    return returner;
  }

}

here I have my week number calculation. @briosheje postet a link above

To make things Work I had to include the pipe in the myComponent.module.ts

@NgModule({
  imports: [
    ...
  ],
  providers: [WochenNummerPipe],
  declarations: [
    ...  ,
    WochenNummerPipe
  ]
})

All together I got this: picture of my header cell template with right week number and german daynames

I am happy :)

Show the german dayname & right week number Angular

1 Answers1