fix: calendar panels value binding (#46)

eksrha · web-flow · commit eacce9067ad1 · 2023-03-01T11:01:24.000+01:00
diff --git a/projects/lib-workspace/src/app/app.module.ts b/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],
diff --git a/projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.html b/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>
diff --git a/projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.ts b/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: {
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.html b/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">
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.scss b/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;
-}
+}
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts b/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 {
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.html b/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 }}
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.scss b/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;
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.ts b/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) {}
 
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar.models.ts b/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;
   };
 }
diff --git a/projects/ng-mat-components/src/fs-calendar/services/fs-calendar.service.ts b/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),
         },
       };
diff --git a/projects/ng-mat-components/styles/fs-calendar/_theming.scss b/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);
   }
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`justify-content: space-between;`
`18`	`18`	`}`
`19`	`19`
`20`		`-.fs-calendar-table {`
	`20`	`+.fs-calendar-panels-table {`
`21`	`21`	`border-spacing: 0;`
`22`	`22`	`border-collapse: collapse;`
`23`	`23`	`width: 100%;`
`@@ -37,7 +37,7 @@`
`37`	`37`	`min-height: 10px;`
`38`	`38`	`}`
`39`	`39`
`40`		`-.fs-calendar-table-header th {`
	`40`	`+.fs-calendar-panels-table-header th {`
`41`	`41`	`text-align: center;`
`42`	`42`	`padding: 0 0 8px 0;`
`43`	`43`	`font-size: 13px;`
`@@ -49,15 +49,15 @@`
`49`	`49`	`font-size: 13px;`
`50`	`50`	`}`
`51`	`51`
`52`		`-.fs-calendar-table thead tr td button {`
	`52`	`+.fs-calendar-panels-table thead tr td button {`
`53`	`53`	`visibility: hidden;`
`54`	`54`	`}`
`55`	`55`
`56`		`-.fs-calendar-table:first-child thead tr td:first-child button {`
	`56`	`+.fs-calendar-panels-table:first-child thead tr td:first-child button {`
`57`	`57`	`visibility: visible;`
`58`	`58`	`}`
`59`	`59`
`60`		`-.fs-calendar-table:last-child thead tr td:last-child button {`
	`60`	`+.fs-calendar-panels-table:last-child thead tr td:last-child button {`
`61`	`61`	`visibility: visible;`
`62`	`62`	`}`
`63`	`63`
`@@ -147,4 +147,4 @@`
`147`	`147`
`148`	`148`	`.tooltip .tooltiptext {`
`149`	`149`	`padding: 16px;`
`150`		`-}`
	`150`	`+}`