Merge pull request #14 from fullstack-devops/bugfix/add-date-locale

add locale to calendar

Author: eksrha

.vscode/settings.json

@@ -14,6 +14,7 @@
   "javascript.updateImportsOnFileMove.enabled": "always",
   "typescript.updateImportsOnFileMove.enabled": "always",
   "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "source.organizeImports": true
     }

angular.json

@@ -12,6 +12,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
+            "tsConfig": "projects/ng-mat-components/tsconfig.lib.json",
             "project": "projects/ng-mat-components/ng-package.json"
           },
           "configurations": {

projects/lib-workspace/src/app/app-routing.module.ts

@@ -1,49 +1,56 @@
-import { CalenderShowcaseComponent } from './content/calender-showcase/calender-showcase.component';
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule } from '@angular/router';
 import { FrameRoutes } from 'projects/ng-mat-components/src/public-api';
+import { CalenderShowcaseComponent } from './content/calender-showcase/calender-showcase.component';
 import { HomeComponent } from './content/home/home.component';
 import { SubComponent } from './content/home/sub/sub.component';
 import { TestComponent } from './content/test/test.component';
 
-
 export const routes: FrameRoutes = [
   {
-    path: '', redirectTo: 'home', pathMatch: 'full',
-  },
-  {
-    path: 'home', component: HomeComponent,
+    path: 'home',
+    component: HomeComponent,
     data: {
       displaySidemenu: true,
       sidenavIcon: 'home',
-      sidenavText: 'Home'
+      sidenavText: 'Home',
     },
     children: [
       {
-        path: 'sub', component: SubComponent,
-      }
-    ]
+        path: 'sub',
+        component: SubComponent,
+      },
+    ],
   },
   {
-    path: 'test', component: TestComponent,
+    path: 'test',
+    component: TestComponent,
     data: {
       displaySidemenu: true,
       sidenavIcon: 'dashboard',
-      sidenavText: 'Dashboard'
+      sidenavText: 'Dashboard',
     },
   },
   {
-    path: 'calendar-showcase', component: CalenderShowcaseComponent,
+    path: 'calendar-showcase',
+    component: CalenderShowcaseComponent,
     data: {
       displaySidemenu: true,
       sidenavIcon: 'calendar_month',
-      sidenavText: 'Calendar'
+      sidenavText: 'Calendar',
     },
   },
+  {
+    path: '**',
+    redirectTo: 'home',
+    pathMatch: 'full',
+  },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
-  exports: [RouterModule]
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
+  ],
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

projects/lib-workspace/src/app/app.module.ts

@@ -1,18 +1,20 @@
-import { CalenderShowcaseComponent } from './content/calender-showcase/calender-showcase.component';
 import { LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { CalenderShowcaseComponent } from './content/calender-showcase/calender-showcase.component';
 
 import { APP_BASE_HREF } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { de } from 'date-fns/locale';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from './material.module';
 
 import {
   FsCalendarModule,
-  FsUiFrameModule,
+  FsCalendarService,
   FsUiFrameContentModule,
+  FsUiFrameModule,
   FsUiFrameToolbarModule,
 } from 'projects/ng-mat-components/src/public-api';
 import { HomeComponent } from './content/home/home.component';
@@ -46,6 +48,11 @@ import { TestComponent } from './content/test/test.component';
       useValue: '.',
     },
     { provide: LOCALE_ID, useValue: 'de-DE' },
+    {
+      provide: 'FS_DATE_LOCALE',
+      useClass: FsCalendarService,
+      useValue: de,
+    },
   ],
   bootstrap: [AppComponent],
 })

projects/ng-mat-components/package.json

@@ -5,8 +5,8 @@
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0",
-    "moment": "^2.29.0",
-    "@angular/material": "^13.0.0"
+    "@angular/material": "^13.0.0",
+    "date-fns": "^2.29.3"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.html

@@ -27,7 +27,7 @@
           <div style="width: 40px"></div>
         </ng-template>
         <div>
-          {{ month.name | uppercase }}
+          {{ month.name }}
           {{ config.displayYear ? month.year : "" }}
         </div>
         <button

projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.ts

@@ -6,13 +6,14 @@ import {
   OnInit,
   Output,
 } from '@angular/core';
+import * as dateFns from 'date-fns';
 import {
   Calendar,
   CalendarConfig,
   calendarSelected,
   Day,
 } from './calendar.models';
-import { dateFns, FsCalendarService } from './fs-calendar.service';
+import { FsCalendarService } from './fs-calendar.service';
 
 @Component({
   selector: 'fs-calendar',
@@ -168,10 +169,11 @@ export class FsCalendarComponent implements OnInit {
       this.selectedDayStart != undefined &&
       this.selectedDayEnd == undefined
     ) {
+      console.log(this.selectedDayStart, dateComp);
       this.selectedDayBetween = this.calendar.daysAbsolute.filter((date) => {
         return (
-          dateFns.isBefore(date, this.selectedDayStart as Date) &&
-          dateFns.isAfter(date, dateComp)
+          dateFns.isAfter(date, this.selectedDayStart as Date) &&
+          dateFns.isBefore(date, dateComp)
         );
       });
     }

projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.service.ts

@@ -1,20 +1,16 @@
-import { Inject, Injectable, LOCALE_ID } from '@angular/core';
-import * as dateFns_ from 'date-fns';
+import { Inject, Injectable } from '@angular/core';
+import * as dateFns from 'date-fns';
 import { Calendar, Day, Month } from './calendar.models';
 
-export const dateFns = dateFns_;
-
 @Injectable({
   providedIn: 'root',
 })
 export class FsCalendarService {
-  dayNamesDeVor: any;
-  dayNamesDe: any;
-
+  dayNames: string[] = this.getWeekDayNames();
   dataSourceCustom: Day[] = [];
   daysAbsolute: Date[] = [];
 
-  constructor(@Inject(LOCALE_ID) private appLocale: string) {}
+  constructor(@Inject('FS_DATE_LOCALE') private appLocale: dateFns.Locale) {}
 
   /**
    * @param {String}     mode             calendar mode (monthly|annual)
@@ -65,7 +61,7 @@ export class FsCalendarService {
       }
       cal = {
         months: months,
-        dayNames: this.dayNamesDeVor,
+        dayNames: this.dayNames,
         year: year,
         daysAbsolute: this.daysAbsolute,
       };
@@ -145,7 +141,7 @@ export class FsCalendarService {
         break;
       case 'placeholderDay':
         newDay = {
-          dayNumber: dateFns.format(date, 'd'),
+          dayNumber: dateFns.format(date, 'd', { locale: this.appLocale }),
           date: date,
           kw: dateFns.getWeek(date, { weekStartsOn: 4 }),
           type: 'placeholderDay',
@@ -163,7 +159,7 @@ export class FsCalendarService {
     }
     return {
       year: year,
-      dayNames: [],
+      dayNames: this.dayNames,
       months: months,
       daysAbsolute: this.daysAbsolute,
     };
@@ -180,7 +176,7 @@ export class FsCalendarService {
     }
 
     return {
-      name: dateFns.format(days[0].date, 'LLLL'),
+      name: dateFns.format(days[0].date, 'MMMM', { locale: this.appLocale }),
       year: year,
       days: days,
       render: [[]],
@@ -235,25 +231,44 @@ export class FsCalendarService {
         day.toolTip = toolTip;
         day['kw'] = dateFns.getWeek(dateToGenerate);
         day.date = dateToGenerate;
-        day.dayNumber = dateFns.format(dateToGenerate, 'd');
+        day.dayNumber = dateFns.format(dateToGenerate, 'd', {
+          locale: this.appLocale,
+        });
         day['isWeekendDay'] = dateFns.isWeekend(dateToGenerate);
       } else {
         day = {
           kw: dateFns.getWeek(dateToGenerate),
-          dayNumber: dateFns.format(dateToGenerate, 'd'),
+          dayNumber: dateFns.format(dateToGenerate, 'd', {
+            locale: this.appLocale,
+          }),
           date: dateToGenerate,
           isWeekendDay: dateFns.isWeekend(dateToGenerate),
         };
       }
     } else {
       day = {
         kw: dateFns.getWeek(dateToGenerate),
-        dayNumber: dateFns.format(dateToGenerate, 'd'),
+        dayNumber: dateFns.format(dateToGenerate, 'd', {
+          locale: this.appLocale,
+        }),
         date: dateToGenerate,
         isWeekendDay: dateFns.isWeekend(dateToGenerate),
       };
     }
     this.daysAbsolute.push(dateToGenerate);
     return day;
   }
+
+  getWeekDayNames(): string[] {
+    let now = new Date();
+    let arr = dateFns.eachDayOfInterval({
+      start: dateFns.startOfWeek(now, { weekStartsOn: 1 }),
+      end: dateFns.endOfWeek(now, { weekStartsOn: 1 }),
+    });
+    let arrOfDays: string[] = [];
+    arr.map((a) =>
+      arrOfDays.push(dateFns.format(a, 'EEEEEE', { locale: this.appLocale }))
+    );
+    return arrOfDays;
+  }
 }

projects/ng-mat-components/src/lib/fs-calendar/public-api.ts

@@ -2,6 +2,7 @@
  * Public API Surface of ng-mat-components
  */
 
-export { FsCalendarModule } from './fs-calendar.module';
-export { FsCalendarComponent } from './fs-calendar.component';
 export * from './calendar.models';
+export { FsCalendarComponent } from './fs-calendar.component';
+export { FsCalendarModule } from './fs-calendar.module';
+export { FsCalendarService } from './fs-calendar.service';