fix: calendar panels value binding

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

@@ -4,7 +4,6 @@ import { BrowserModule } from '@angular/platform-browser';
 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';
 
@@ -16,12 +15,15 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as dateFnsLocales from 'date-fns/locale';
 import { FsCalendarModule, FsCalendarService, FsNavFrameModule } from 'projects/ng-mat-components/src/public-api';
 import { HomeComponent } from './content/home/home.component';
 import { ShowcaseCalendarPanelsComponent } from './content/showcase-calendar-panels/showcase-calendar-panels.component';
 import { ShowcaseCalendarTableComponent } from './content/showcase-calendar-table/showcase-calendar-table.component';
 import { ShowcaseNavFrameComponent } from './content/showcase-nav-frame/showcase-nav-frame.component';
 
+const locales: any = dateFnsLocales;
+
 @NgModule({
   declarations: [AppComponent, HomeComponent, ShowcaseCalendarPanelsComponent, ShowcaseCalendarTableComponent, ShowcaseNavFrameComponent],
   imports: [
@@ -52,7 +54,7 @@ import { ShowcaseNavFrameComponent } from './content/showcase-nav-frame/showcase
     {
       provide: 'FS_DATE_LOCALE',
       useClass: FsCalendarService,
-      useValue: de,
+      useValue: locales[navigator.language],
     },
   ],
   bootstrap: [AppComponent],

projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.html

@@ -1,3 +1,9 @@
-<fs-calendar-table class="mat-elevation-z4" [dataSource]="calTableData">
+<mat-card class="flex-row-wrap" style="margin-bottom: 0.25rem">
+  <div>
+    <p>Selected month: {{ month + 1 }}, Selected year: {{ year }}</p>
+  </div>
+</mat-card>
+
+<fs-calendar-table class="mat-elevation-z2" [(month)]="month" [(year)]="year" [dataSource]="calTableData">
   <fs-calendar-table-name>Persons</fs-calendar-table-name>
 </fs-calendar-table>

projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.ts

@@ -8,6 +8,8 @@ import { CalendarTableEntry } from 'projects/ng-mat-components/src/public-api';
 })
 export class ShowcaseCalendarTableComponent implements OnInit {
   today = new Date();
+  month: number = this.today.getMonth();
+  year: number = this.today.getFullYear();
 
   calTableData: CalendarTableEntry[] = [
     {
@@ -37,7 +39,7 @@ export class ShowcaseCalendarTableComponent implements OnInit {
           },
         },
         {
-          date: new Date(this.today.getFullYear(), this.today.getMonth(), 10),
+          date: new Date(this.today.getFullYear(), this.today.getMonth(), 11),
           toolTip: 'Some text',
           char: 'U',
           colors: {

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

@@ -33,8 +33,8 @@
           <div style="width: 40px"></div>
         </ng-template>
       </div>
-      <table class="fs-calendar-table" [style.width]="dataSource.config.panelWidth">
-        <thead class="fs-calendar-table-header">
+      <table class="fs-calendar-panels-table" [style.width]="dataSource.config.panelWidth">
+        <thead class="fs-calendar-panels-table-header">
           <tr>
             <th scope="col" *ngIf="dataSource.config.calendarWeek"></th>
             <th *ngFor="let dayname of calendar.dayNames" scope="col">

projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.scss

@@ -17,7 +17,7 @@
   justify-content: space-between;
 }
 
-.fs-calendar-table {
+.fs-calendar-panels-table {
   border-spacing: 0;
   border-collapse: collapse;
   width: 100%;
@@ -37,7 +37,7 @@
   min-height: 10px;
 }
 
-.fs-calendar-table-header th {
+.fs-calendar-panels-table-header th {
   text-align: center;
   padding: 0 0 8px 0;
   font-size: 13px;
@@ -49,15 +49,15 @@
   font-size: 13px;
 }
 
-.fs-calendar-table thead tr td button {
+.fs-calendar-panels-table thead tr td button {
   visibility: hidden;
 }
 
-.fs-calendar-table:first-child thead tr td:first-child button {
+.fs-calendar-panels-table:first-child thead tr td:first-child button {
   visibility: visible;
 }
 
-.fs-calendar-table:last-child thead tr td:last-child button {
+.fs-calendar-panels-table:last-child thead tr td:last-child button {
   visibility: visible;
 }
 
@@ -147,4 +147,4 @@
 
 .tooltip .tooltiptext {
   padding: 16px;
-}
+}

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

@@ -116,10 +116,22 @@ export class FsCalendarPanelsComponent implements OnInit {
         this.selectedDayStart = day.date;
       } else {
         this.selectedDayEnd = day.date;
+
+        let daysBetween: number = dateFns.differenceInDays(this.selectedDayStart, this.selectedDayEnd);
+        let daysAffected: Date[] = [];
+
+        daysAffected.push(this.selectedDayStart);
+        if (daysBetween < 0) {
+          for (let index = 1; index < daysBetween * -1 + 1; index++) {
+            daysAffected.push(dateFns.addDays(this.selectedDayStart, index));
+          }
+        }
+
         this.selection.emit({
           type: 'range',
           start: this.selectedDayStart,
           end: this.selectedDayEnd,
+          affectedDays: daysAffected,
         });
       }
     } else {

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

@@ -13,10 +13,13 @@
             </svg>
           </button>
         </th>
-        <th *ngFor="let day of currentMonth.days" [class.date-today]="isToday(day.date)">
+        <th
+          *ngFor="let day of currentMonth.days"
+          [class.date-today]="isToday(day.date)"
+          [class.weekend]="day._meta?.isWeekendDay && !isToday(day.date) && markWeekend">
           {{ day._meta?.dayNumber }}
           <br />
-          {{ day.date | date : 'EEEEEE' }}
+          {{ currentMonth.dayNames[day._meta!.dayOfWeek - 1] }}
         </th>
         <th>
           <button mat-icon-button class="fs-calendar-switches" (click)="onMonthForward()">
@@ -32,7 +35,7 @@
     <tbody role="rowgroup">
       <tr *ngFor="let entry of tableData">
         <td colspan="2">{{ entry.name }}</td>
-        <td *ngFor="let day of entry.data" [class.tooltip]="day.toolTip">
+        <td *ngFor="let day of entry.data" [class.tooltip]="day.toolTip" [class.weekend]="day._meta?.isWeekendDay && markWeekend">
           <span class="tooltiptext" *ngIf="day.toolTip">{{ day.toolTip }}</span>
           <div class="box box-base" [style.backgroundColor]="day.colors?.backgroundColor" [style.color]="day.colors?.color">
             {{ day.char }}

projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.scss

@@ -1,6 +1,9 @@
-.fs-calendar-table-helper {
+:host {
+  display: block;
+  position: relative;
   padding: 1rem;
   border-radius: 4px;
+  // margin: .25rem;
 }
 
 table {
@@ -46,7 +49,6 @@ table tr td:not(:first-child) {
 .box {
   width: 24px;
   height: 24px;
-  // background: lightblue;
   border-radius: 4px;
   margin: 4px;
   font-size: 16px;

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import * as dateFns from 'date-fns';
 import { CalendarMonth, CalendarTableEntry } from '../calendar.models';
 import { FsCalendarService } from '../services/fs-calendar.service';
@@ -21,13 +21,17 @@ export class FsCalendarTableComponent implements OnInit {
   currentMonth: CalendarMonth = this.calendarService.generateMonth(this._yearNumber, this._monthNumber, []);
   tableData: CalendarTableEntry[] = [];
 
+  markWeekend = true;
+
   get dataSource(): CalendarTableEntry[] {
     return this._dataSource;
   }
   get month(): number {
+    this.monthChange.emit(this._monthNumber);
     return this._monthNumber;
   }
   get year(): number {
+    this.yearChange.emit(this._yearNumber);
     return this._yearNumber;
   }
 
@@ -42,11 +46,14 @@ export class FsCalendarTableComponent implements OnInit {
     this._monthNumber = data;
     this.genMonthData();
   }
+  @Output() monthChange = new EventEmitter<number>();
+
   @Input()
   set year(data: number) {
     this._yearNumber = data;
     this.genMonthData();
   }
+  @Output() yearChange = new EventEmitter<number>();
 
   constructor(private calendarService: FsCalendarService) {}
 

projects/ng-mat-components/src/fs-calendar/calendar.models.ts

@@ -17,6 +17,7 @@ export interface CalendarMonth {
   name: string;
   year: number;
   days: CalendarExtendedDay[];
+  dayNames: String[];
 }
 
 /**
@@ -29,6 +30,7 @@ export interface CalendarSelectedRange {
   type: 'range';
   start: Date;
   end: Date;
+  affectedDays: Date[];
 }
 
 /**
@@ -140,6 +142,7 @@ export interface CalendarExtendedDay {
     kw: number;
     type: 'cw' | 'plHolder' | 'day';
     dayNumber: string;
+    dayOfWeek: number;
     isWeekendDay: boolean;
   };
 }

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

@@ -140,6 +140,7 @@ export class FsCalendarService {
         dayNumber: dateFns.format(date, 'd', {
           locale: this.appLocale,
         }),
+        dayOfWeek: dateFns.getISODay(date),
         isWeekendDay: dateFns.isWeekend(date),
       },
     };
@@ -154,6 +155,7 @@ export class FsCalendarService {
         dayNumber: dateFns.format(date, 'd', {
           locale: this.appLocale,
         }),
+        dayOfWeek: dateFns.getISODay(date),
         isWeekendDay: dateFns.isWeekend(date),
       },
     };
@@ -176,6 +178,7 @@ export class FsCalendarService {
       name: dateFns.format(days[0].date, 'MMMM', { locale: this.appLocale }),
       year: year,
       days: days,
+      dayNames: this.dayNames,
     };
   }
 
@@ -189,6 +192,7 @@ export class FsCalendarService {
           dayNumber: dateFns.format(dateToGenerate, 'd', {
             locale: this.appLocale,
           }),
+          dayOfWeek: dateFns.getISODay(dateToGenerate),
           isWeekendDay: dateFns.isWeekend(dateToGenerate),
         },
       };
@@ -239,6 +243,7 @@ export class FsCalendarService {
           dayNumber: dateFns.format(dateToGenerate, 'd', {
             locale: this.appLocale,
           }),
+          dayOfWeek: dateFns.getISODay(dateToGenerate),
           isWeekendDay: dateFns.isWeekend(dateToGenerate),
         },
       };

projects/ng-mat-components/styles/fs-calendar/_theming.scss

@@ -18,7 +18,7 @@
     color: map-get($foreground, 'hint-text');
   }
 
-  .fs-calendar-table-header tr:first-child {
+  .fs-calendar-panels-table-header tr:first-child {
     border-bottom: solid 1px map-get($foreground, 'divider');
     color: map-get($foreground, 'secondary-text');
   }
@@ -33,7 +33,7 @@
   }
 
   .weekend {
-    background-color: map-get($foreground, 'divider');
+    background-color: map-get($foreground, 'divider') !important;
   }
 
   .date-between::after,
@@ -65,20 +65,18 @@
 
   .blured-days::after {
     content: '';
-    background: radial-gradient(
-      circle at center,
-      map-get($background, 'background') 0,
-      map-get($background, 'background') 12px,
-      transparent 14px,
-      transparent 100%
-    );
+    background: radial-gradient(circle at center,
+        map-get($background, 'background') 0,
+        map-get($background, 'background') 12px,
+        transparent 14px,
+        transparent 100%);
   }
 
-  .fs-calendar-table table thead tr th {
+  .fs-calendar-panels-table table thead tr th {
     border-bottom: solid 1px map-get($foreground, 'divider');
   }
 
-  .fs-calendar-table-helper,
+  .fs-calendar-table,
   .fs-calendar-month {
     background-color: map-get($background, 'card');
   }
@@ -92,4 +90,4 @@
     border-radius: 4px;
     color: map-get($primary, default-contrast);
   }
-}
+}