monatsansicht erster wurf

Author: evombau

projects/material-calendar/material-calendar_3.png

@@ -1,13 +1,34 @@
 <div class="divbox" *ngIf="!isLoading">
-    <button mat-raised-button *ngIf="config.switches && mode == 'monthly'" (click)="onMonthBackward()">
-        <mat-icon>
-            navigate_before
-        </mat-icon>
+    <button mat-flat-button class="slideButton"
+        *ngIf="config.switches && mode == 'monthly' && monthsBefore != 0 && monthsAfter != 0"
+        (click)="onMonthBackward()">
+        <span class="material-icons">
+            keyboard_arrow_left
+        </span>
     </button>
     <div class="month mat-elevation-z8" *ngFor="let monat of calendar.months">
         <mat-grid-list cols="{{config.calendarWeek? 8 : 7}}" rowHeight="30px">
             <mat-grid-tile colspan="{{config.calendarWeek? 8 : 7}}" rowspan="1">
-                <a>{{monat.name}}</a> <a style="margin-left: 5px;" *ngIf="config.displayYear"> {{monat.year}}</a>
+                <button mat-icon-button
+                    *ngIf="config.switches && mode == 'monthly' && monthsBefore == 0 && monthsAfter == 0"
+                    (click)="onMonthBackward()">
+                    <span class="material-icons">
+                        keyboard_arrow_left
+                    </span>
+                </button>
+                <span style="flex: 1 1 auto;"></span>
+                <div>
+                    <a>{{monat.name}}</a>
+                    <a style="margin-left: 5px;" *ngIf="config.displayYear">{{monat.year}}</a>
+                </div>
+                <span style="flex: 1 1 auto;"></span>
+                <button mat-icon-button
+                    *ngIf="config.switches && mode == 'monthly' && monthsBefore == 0 && monthsAfter == 0"
+                    (click)="onMonthForward()">
+                    <span class="material-icons">
+                        keyboard_arrow_right
+                    </span>
+                </button>
             </mat-grid-tile>
             <mat-grid-tile *ngIf="config.calendarWeek" colspan="1" rowspan="1"></mat-grid-tile>
             <mat-grid-tile class="weekdayPlaceholder" *ngFor="let dayNames of calendar.dayNames" colspan="1"
@@ -23,22 +44,24 @@
                 <mat-grid-tile *ngIf="day.type === 'leer'" colspan="1" rowspan="1"></mat-grid-tile>
 
                 <mat-grid-tile *ngIf="day.type === 'placeholderDay'" colspan="1" rowspan="1"
-                    [ngClass]="[day.isWeekendDay? 'Weekend' : '', placeholderDay ? 'weekdayPlaceholder':'placeholderFalse', day.isHoliday? 'Holiday' : '']">
+                    [ngClass]="[day.isWeekendDay? 'Weekend' : '', placeholderDay ? 'weekdayPlaceholder':'placeholderFalse', day.isHoliday && config.useHolidays? 'Holiday' : '']">
                     <a>{{day.day}}</a>
                 </mat-grid-tile>
 
                 <mat-grid-tile *ngIf="day.type === 'date'" colspan="1" rowspan="1" matTooltip="test"
-                    [ngClass]="[day.isWeekendDay? 'Weekend' : '', day.isHoliday && config.useHolidays ? 'Holiday' : '']">
+                    [ngClass]="[day.isWeekendDay? 'Weekend' : '', day.isHoliday && config.useHolidays ? 'Holiday' : '', day.date.setHours(0, 0, 0, 0) == today? 'today': '']">
                     {{day.day}}
                 </mat-grid-tile>
 
             </ng-container>
 
         </mat-grid-list>
     </div>
-    <button mat-raised-button  *ngIf="config.switches && mode == 'monthly'" (click)="onMonthForward()">
-        <mat-icon>
-            navigate_next
-        </mat-icon>
+    <button mat-flat-button class="slideButton"
+        *ngIf="config.switches && mode == 'monthly' && monthsBefore != 0 && monthsAfter != 0"
+        (click)="onMonthForward()">
+        <span class="material-icons">
+            keyboard_arrow_right
+        </span>
     </button>
 </div>

projects/material-calendar/src/lib/calendar-panels/calendar-panels.component.html

@@ -7,6 +7,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    align-items: center;
 }
 
 .month {
@@ -27,9 +28,9 @@ mat-grid-tile {
     color: var(--text-color);
 }
 
-.highlight {
+.today {
     box-sizing: border-box;
-    border: 2px solid rgba(0, 103, 127, 0.1);
+    border: 2px solid var(--today-color);
 }
 
 .Weekend {
@@ -57,3 +58,11 @@ mat-grid-tile {
 .placeholderFalse a {
     display: none;
 }
+
+.slideButton {
+    padding: 0;
+}
+
+.slideButton span {
+    font-size: 60px;
+}

projects/material-calendar/src/lib/calendar-panels/calendar-panels.component.scss

@@ -1,4 +1,4 @@
-import { Component, OnInit, HostBinding, Input } from '@angular/core';
+import { Component, OnInit, HostBinding, Input, Output } from '@angular/core';
 import { CalendarService } from '../service/calendar.service';
 import * as pSBC from '../service/pSBC';
 import { CalendarConfig } from '../service/models';
@@ -20,6 +20,7 @@ export class CalendarPanelsComponent implements OnInit {
     holidayTextColor: 'rgb(253, 173, 0)',
     displayYear: true,
     firstDayOfWeekMonday: true,
+    todayColor: '#fff',
     calendarWeek: true,
     switches: false,
   };
@@ -28,7 +29,9 @@ export class CalendarPanelsComponent implements OnInit {
   private _year: number = new Date().getFullYear()
   private _monthsBefore: number = 1;
   private _monthsAfter: number = 1;
+
   calendar = null
+  today = new Date().setHours(0, 0, 0, 0)
 
   get mode(): string {
     return this._mode;
@@ -65,32 +68,34 @@ export class CalendarPanelsComponent implements OnInit {
   @Input()
   set month(data: number) {
     this._month = data;
+    this.monthOverrride = false
     this.generateX()
   }
   @Input()
   set config(data: CalendarConfig) {
     this._config = data;
     this.generateX()
   }
-  @Input() 
-  set year(data: number){
+  @Input()
+  set year(data: number) {
     this._year = data;
     this.generateX()
   }
-  @Input() 
-  set monthsBefore(data: number){
+  @Input()
+  set monthsBefore(data: number) {
     this._monthsBefore = data;
     this.generateX()
   }
-  @Input() 
-  set monthsAfter(data: number){
+  @Input()
+  set monthsAfter(data: number) {
     this._monthsAfter = data;
     this.generateX()
   }
 
   @Input() placeholderDay: boolean = false;
 
   isLoading = true
+  monthOverrride = false
 
   @HostBinding("style.--panel-color")
   panelBgColor = this.config.panelBgColor;
@@ -104,6 +109,8 @@ export class CalendarPanelsComponent implements OnInit {
   panelBgColorHoliday = this.config.holidayColor;
   @HostBinding("style.--text-color-holiday")
   panelColorHoliday = this.lightOrDarkTextColor(this.config.holidayColor);
+  @HostBinding("style.--today-color")
+  todayColor = this.config.todayColor;
 
   constructor(private calendarService: CalendarService) {
     // colors
@@ -130,28 +137,34 @@ export class CalendarPanelsComponent implements OnInit {
   }
 
   onMonthForward() {
-    if (this.month >= 11) {
-      this._year = this.year + 1
-      this.month = 0
+    this.monthOverrride = true
+    if (this.month >= 11 || this._month >= 11) {
+      this._year = parseInt(this.year.toString(), 10) + 1
+      this._month = 0
     } else {
-      this.month = this.month + 1
+      this._month = parseInt(this._month.toString(), 10) + 1
     }
+    this.generateX()
   }
 
   onMonthBackward() {
-    if (this.month <= 0) {
-      this._year = this.year - 1
-      this.month = 11
+    this.monthOverrride = true
+    if (this.month <= 0 || this._month <= 0) {
+      this._year = parseInt(this.year.toString(), 10) - 1
+      this._month = 11
     } else {
-      this.month = this.month - 1
+      this._month = parseInt(this._month.toString(), 10) - 1
     }
+    this.generateX()
   }
 
   generateX() {
+    const usedYear = this.monthOverrride ? this._year : this.year
+    const usedMonth = this.monthOverrride ? this._month : this.month
     if (this.mode === 'annual') {
       this.calendar = this.calendarService.generateMatrix(this.mode, this.config.calendarWeek, null, this.year)
     } else if (this.mode === 'monthly') {
-      this.calendar = this.calendarService.generateMatrix(this.mode, this.config.calendarWeek, null, this.year, this.month, this.monthsBefore, this.monthsAfter)
+      this.calendar = this.calendarService.generateMatrix(this.mode, this.config.calendarWeek, null, usedYear, usedMonth, this.monthsBefore, this.monthsAfter)
     }
     // console.log(this.calendar)
   }

projects/material-calendar/src/lib/calendar-panels/calendar-panels.component.ts

@@ -47,13 +47,13 @@ export class CalendarService {
         months.push(this.generateMonth(currMonth, year))
         for (let index = 0; index < monthsBefore; index++) {
           const calculatedMonth = currMonth - monthsBefore + index
-          const actualYear = (calculatedMonth + 1 < 1) ? year-- : year
+          const actualYear = (calculatedMonth + 1 < 1) ? year - 1 : year
           const actualMonth = (calculatedMonth + 1 < 1) ? 12 + calculatedMonth : calculatedMonth
           months.splice(index, 0, this.generateMonth(actualMonth, actualYear))
         }
         for (let index = 0; index < monthsAfter; index++) {
           const calculatedMonth = currMonth + index + 1
-          const actualYear = (calculatedMonth > 11) ? year++ : year
+          const actualYear = (calculatedMonth > 11) ? year + 1 : year
           const actualMonth = (calculatedMonth > 11) ? calculatedMonth - 12 : calculatedMonth
           months.push(this.generateMonth(actualMonth, actualYear))
         }

projects/material-calendar/src/lib/service/calendar.service.ts

@@ -20,6 +20,7 @@ export interface CalendarConfig {
     panelBgColor?: string;
     textColor?: string;
     holidayColor?: string;
+    todayColor?: string;
     holidayTextColor?: string;
 }
 

projects/material-calendar/src/lib/service/models.ts

@@ -5,8 +5,8 @@
     [mode]="mode"
     [placeholderDay]="placeholder"
     year="2020"
-    month="3"
-    monthsBefore="0"
+    month="5"
+    monthsBefore="1"
     monthsAfter="1"
     [config]="calendarConfig">
 </calendar-panels>

projects/my-first-app/src/app/app.component.html

@@ -19,7 +19,7 @@ export class AppComponent {
     useHolidays: false,
     holidayColor: 'rgb(253, 173, 0)',
     holidayTextColor: 'rgb(253, 173, 0)',
-    displayYear: false,
+    displayYear: true,
     firstDayOfWeekMonday: true,
     calendarWeek: false,
     switches: true,

projects/my-first-app/src/app/app.component.ts

@@ -1 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";