dump moment.js and use date-fns

.vscode/settings.json

@@ -0,0 +1,28 @@
+{
+  "editor.formatOnSave": true,
+  "editor.renderWhitespace": "all",
+  "prettier.arrowParens": "avoid",
+  "prettier.printWidth": 120,
+  "editor.tabSize": 2,
+  "files.trimTrailingWhitespace": true,
+  "files.trimFinalNewlines": true,
+  "workbench.iconTheme": "material-icon-theme",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "[typescript]": {
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": true
+    }
+  },
+  "angular.enable-strict-mode-prompt": false,
+  "files.associations": {
+    ".env*": "shell"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

package.json

@@ -27,7 +27,7 @@
     "@angular/platform-browser": "~13.3.11",
     "@angular/platform-browser-dynamic": "~13.3.11",
     "@angular/router": "~13.3.11",
-    "moment": "^2.29.4",
+    "date-fns": "^2.29.3",
     "rxjs": "~7.5.6",
     "tslib": "^2.4.0",
     "zone.js": "~0.11.7"

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

@@ -1,4 +1,4 @@
-<div style="display: flex; justify-content: space-around;">
+<div style="display: flex; justify-content: space-around">
   <mat-slide-toggle [(ngModel)]="placeholder">
     Days placeholder
   </mat-slide-toggle>
@@ -8,23 +8,34 @@
   <mat-form-field>
     <mat-label>Months before</mat-label>
     <mat-select [(ngModel)]="monthsBefore">
-      <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
+      <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{
+        num
+      }}</mat-option>
     </mat-select>
   </mat-form-field>
   <mat-form-field>
     <mat-label>Months after</mat-label>
     <mat-select [(ngModel)]="monthsAfter">
-      <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
+      <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{
+        num
+      }}</mat-option>
     </mat-select>
   </mat-form-field>
   <div>
-    <p>Selected range: {{range | json}}</p>
+    <p>Selected range: {{ range | json }}</p>
   </div>
 </div>
 
-<div style="height: 80%;">
-  <fs-calendar [placeholderDay]="placeholder" [dataSource]="dataSource" [year]="2022" [month]="3"
-    [monthsBefore]="monthsBefore" [monthsAfter]="monthsAfter" [config]="calendarConfig"
-    (selectedDate)="testMethod($event)">
+<div style="height: 80%">
+  <fs-calendar
+    [placeholderDay]="placeholder"
+    [dataSource]="dataSource"
+    [year]="todayYear"
+    [month]="todayMonth"
+    [monthsBefore]="monthsBefore"
+    [monthsAfter]="monthsAfter"
+    [config]="calendarConfig"
+    (selectedDate)="testMethod($event)"
+  >
   </fs-calendar>
 </div>

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

@@ -1,76 +1,86 @@
-import { CalendarConfig, Day, calendarSelected } from 'projects/ng-mat-components/src/public-api';
 import { Component, OnInit } from '@angular/core';
+import {
+  CalendarConfig,
+  calendarSelected,
+  Day,
+} from 'projects/ng-mat-components/src/public-api';
 
 @Component({
   selector: 'lib-calender-showcase',
   templateUrl: './calender-showcase.component.html',
-  styleUrls: ['./calender-showcase.component.scss']
+  styleUrls: ['./calender-showcase.component.scss'],
 })
 export class CalenderShowcaseComponent implements OnInit {
-  docsApi = "./assets/docs/calendar/api.md"
-  range: any
+  docsApi = './assets/docs/calendar/api.md';
+  range: any;
 
-  placeholder = false // boolean
-  isLoading = true
-  latestEvent: Object | undefined
+  placeholder = false; // boolean
+  isLoading = true;
+  latestEvent: Object | undefined;
 
-  monthsAfterBefore = Array(5).fill(0).map((x, i) => i);
-  monthsBefore = 2;
-  monthsAfter = 0;
+  today = new Date();
+  todayMonth = this.today.getMonth();
+  todayYear = this.today.getFullYear();
+
+  monthsAfterBefore = Array(5)
+    .fill(0)
+    .map((x, i) => i);
+  monthsBefore = 1;
+  monthsAfter = 1;
 
   calendarConfig: CalendarConfig = {
     renderMode: 'monthly', // 'annual' | 'monthly'
-    selectMode: 'range',  // 'click' | 'range'
+    selectMode: 'range', // 'click' | 'range'
     displayYear: true,
     firstDayOfWeekMonday: true,
-    calendarWeek: false,
+    calendarWeek: true,
     switches: true,
     panelWidth: '300px',
     bluredDays: false, // default: false
-    markWeekend: true // default: true
-  }
+    markWeekend: true, // default: true
+  };
 
   dataSource: Day[] = [
     {
       date: new Date(1634594400000),
       backgroundColor: '#0167c7',
       toolTip: 'Test ToolTip First',
-      dayNumber: ''
+      dayNumber: '',
     },
     {
       date: new Date(1634594400000),
       backgroundColor: 'rgb(6, 182, 0)',
       toolTip: 'Test ToolTip Second',
-      dayNumber: ''
+      dayNumber: '',
     },
     {
       date: new Date(1634853600000),
       backgroundColor: 'rgb(6, 182, 0)',
       toolTip: 'Test ToolTip 2',
-      dayNumber: ''
+      dayNumber: '',
     },
     {
       date: new Date(1635544800000),
       backgroundColor: 'lightblue',
-      dayNumber: ''
-    }
-  ]
+      dayNumber: '',
+    },
+  ];
 
-  constructor() { }
+  constructor() {}
   ngOnInit(): void {
-    console.log(this.dataSource)
-    this.isLoading = false
+    console.log(this.dataSource);
+    this.isLoading = false;
   }
 
   testMethod(event: calendarSelected) {
     switch (event.type) {
-      case "range":
+      case 'range':
         this.range = event;
         break;
-      case "date":
+      case 'date':
         this.range = event;
         break;
     }
-    console.log(event)
+    console.log(event);
   }
 }

projects/ng-mat-components/_theming.scss

@@ -125,4 +125,9 @@
       transparent 100%
     );
   }
+
+  .month-header button {
+    border: 1px solid mat-color($foreground, "divider");
+    border-radius: 4px;
+  }
 }

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

@@ -10,28 +10,28 @@
  * @param {string}    panelWidth              set a with for an single panel
  */
 export interface CalendarConfig {
-    renderMode: string;
-    selectMode: string;
-    calendarWeek: boolean;
-    displayYear?: boolean;
-    switches?: boolean;
-    bluredDays?: boolean;
-    markWeekend?: boolean;
-    firstDayOfWeekMonday?: boolean;
-    panelWidth?: string;
+  renderMode: 'monthly' | 'annual';
+  selectMode: string;
+  calendarWeek: boolean;
+  displayYear?: boolean;
+  switches?: boolean;
+  bluredDays?: boolean;
+  markWeekend?: boolean;
+  firstDayOfWeekMonday?: boolean;
+  panelWidth?: string;
 }
 
 export class Calendar {
-    year: number = 2022;
-    dayNames: String[] = [''];
-    months: Month[] = [];
-    daysAbsolute: Date[] = []
+  year: number = 2022;
+  dayNames: String[] = [''];
+  months: Month[] = [];
+  daysAbsolute: Date[] = [];
 }
 export interface Month {
-    name: string;
-    days: Day[];
-    year: number;
-    render: [Day[]];
+  name: string;
+  days: Day[];
+  year: number;
+  render: [Day[]];
 }
 
 export interface selectedRange {
@@ -46,30 +46,30 @@ export interface selectedDate {
 export type calendarSelected = selectedRange | selectedDate;
 
 /**
-   * Use this to customize your data in the calendar
-   * @param {number}   day              number of day (override not allowed)
-   * @param {Date}     date             Date to match
-   * @param {number}   kw               calendar week (override not allowed)
-   * @param {boolean}  isWeekendDay     Boolean if day weekend (override not allowed)
-   * @param {string}   color            set a custom color (hex, string, or var)
-   * @param {string}   backgroundColor  set a custom Background Color (hex, string, or var)
-   * @param {boolean}  badge            if you want to use a Badge
-   * @param {string}   badgeMode        badgeMode options: 'Int' or 'Icon'
-   * @param {number}   badgeInt         if badgeMode == 'Int', set our Number here
-   * @param {string}   badgeIcon        if badgeMode == 'Icon', set Icon (Matireal-Icons)
-   * @param {string}   toolTip          if set, this displays a mat-tooltip
-  */
+ * Use this to customize your data in the calendar
+ * @param {number}   day              number of day (override not allowed)
+ * @param {Date}     date             Date to match
+ * @param {number}   kw               calendar week (override not allowed)
+ * @param {boolean}  isWeekendDay     Boolean if day weekend (override not allowed)
+ * @param {string}   color            set a custom color (hex, string, or var)
+ * @param {string}   backgroundColor  set a custom Background Color (hex, string, or var)
+ * @param {boolean}  badge            if you want to use a Badge
+ * @param {string}   badgeMode        badgeMode options: 'Int' or 'Icon'
+ * @param {number}   badgeInt         if badgeMode == 'Int', set our Number here
+ * @param {string}   badgeIcon        if badgeMode == 'Icon', set Icon (Matireal-Icons)
+ * @param {string}   toolTip          if set, this displays a mat-tooltip
+ */
 export interface Day {
-    dayNumber: string;
-    date: Date;
-    kw?: number;
-    isWeekendDay?: boolean;
-    type?: string;
-    color?: string;
-    backgroundColor?: string;
-    badge?: boolean;
-    badgeMode?: string;
-    badgeInt?: number;
-    badgeIcon?: string;
-    toolTip?: string;
+  dayNumber: string;
+  date: Date;
+  kw?: number;
+  isWeekendDay?: boolean;
+  type?: string;
+  color?: string;
+  backgroundColor?: string;
+  badge?: boolean;
+  badgeMode?: string;
+  badgeInt?: number;
+  badgeIcon?: string;
+  toolTip?: string;
 }