zwischenstand

Author: evombau

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

@@ -1,4 +1,9 @@
 <div class="divbox" *ngIf="!isLoading">
+    <button mat-raised-button *ngIf="config.switches && mode == 'monthly'" (click)="onMonthBackward()">
+        <mat-icon>
+            navigate_before
+        </mat-icon>
+    </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">
@@ -31,7 +36,9 @@
 
         </mat-grid-list>
     </div>
-    <!-- <mat-icon>
-        navigate_next
-    </mat-icon> -->
+    <button mat-raised-button  *ngIf="config.switches && mode == 'monthly'" (click)="onMonthForward()">
+        <mat-icon>
+            navigate_next
+        </mat-icon>
+    </button>
 </div>

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

@@ -10,16 +10,47 @@ import { CalendarConfig } from '../service/models';
 })
 export class CalendarPanelsComponent implements OnInit {
 
-  private _mode;
+  private _mode: string;
+  private _config: CalendarConfig = {
+    panelBgColor: '#00677f', // 00677f 006105
+    autoTextColor: true,
+    textColor: '#fff',
+    useHolidays: false,
+    holidayColor: 'rgb(253, 173, 0)',
+    holidayTextColor: 'rgb(253, 173, 0)',
+    displayYear: true,
+    firstDayOfWeekMonday: true,
+    calendarWeek: true,
+    switches: false,
+  };
   private _data = null;
+  private _month = new Date().getUTCMonth();
+  private _year: number = new Date().getFullYear()
+  private _monthsBefore: number = 1;
+  private _monthsAfter: number = 1;
   calendar = null
 
   get mode(): string {
     return this._mode;
   }
+  get config(): CalendarConfig {
+    return this._config;
+  }
   get data(): any {
     return this._data;
   }
+  get month(): number {
+    return this._month;
+  }
+  get year(): number {
+    return this._year;
+  }
+  get monthsBefore(): number {
+    return this._monthsBefore;
+  }
+  get monthsAfter(): number {
+    return this._monthsAfter;
+  }
 
   @Input()
   set mode(val: string) {
@@ -30,24 +61,34 @@ export class CalendarPanelsComponent implements OnInit {
   set data(data: any) {
     this._data = data;
     this.generateX()
-  };
+  }
+  @Input()
+  set month(data: number) {
+    this._month = data;
+    this.generateX()
+  }
+  @Input()
+  set config(data: CalendarConfig) {
+    this._config = data;
+    this.generateX()
+  }
+  @Input() 
+  set year(data: number){
+    this._year = data;
+    this.generateX()
+  }
+  @Input() 
+  set monthsBefore(data: number){
+    this._monthsBefore = data;
+    this.generateX()
+  }
+  @Input() 
+  set monthsAfter(data: number){
+    this._monthsAfter = data;
+    this.generateX()
+  }
 
   @Input() placeholderDay: boolean = false;
-  @Input() year: number = new Date().getFullYear()
-  @Input() month: number = new Date().getUTCMonth();
-  @Input() monthsBefore: number = 1;
-  @Input() monthsAfter: number = 1;
-  @Input() config: CalendarConfig = {
-    panelBgColor: '#00677f', // 00677f 006105
-    autoTextColor: true,
-    textColor: '#fff',
-    useHolidays: false,
-    holidayColor: 'rgb(253, 173, 0)',
-    holidayTextColor: 'rgb(253, 173, 0)',
-    displayYear: true,
-    calendarWeek: true,
-    switches: false,
-  }
 
   isLoading = true
 
@@ -88,14 +129,31 @@ export class CalendarPanelsComponent implements OnInit {
     this.isLoading = false
   }
 
+  onMonthForward() {
+    if (this.month >= 11) {
+      this._year = this.year + 1
+      this.month = 0
+    } else {
+      this.month = this.month + 1
+    }
+  }
+
+  onMonthBackward() {
+    if (this.month <= 0) {
+      this._year = this.year - 1
+      this.month = 11
+    } else {
+      this.month = this.month - 1
+    }
+  }
+
   generateX() {
     if (this.mode === 'annual') {
       this.calendar = this.calendarService.generateMatrix(this.mode, this.config.calendarWeek, null, this.year)
     } else if (this.mode === 'monthly') {
-      console.log(this.month)
       this.calendar = this.calendarService.generateMatrix(this.mode, this.config.calendarWeek, null, this.year, this.month, this.monthsBefore, this.monthsAfter)
     }
-    console.log(this.calendar)
+    // console.log(this.calendar)
   }
 
   lightOrDarkTextColor(color) {

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

@@ -1,18 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CalendarPanelsComponent } from './calendar-panels/calendar-panels.component';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-
-
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   declarations: [CalendarPanelsComponent],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     MatGridListModule,
-    MatIconModule
+    MatIconModule,
+    MatButtonModule
   ],
   exports: [CalendarPanelsComponent]
 })

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

@@ -18,6 +18,9 @@ export class CalendarService {
     }
   });
   monthNames = this.momentLoc.monthsShort()
+  dayNamesEn = this.momentLoc.weekdaysShort()
+  dayNamesDeVor = JSON.parse(JSON.stringify(this.dayNamesEn))
+  dayNamesDe = this.dayNamesDeVor.push(this.dayNamesDeVor.shift())
 
   /**
    * @param {String}   mode             calendar mode (monthly|annual)
@@ -56,7 +59,7 @@ export class CalendarService {
         }
         cal = {
           months: months,
-          dayNames: this.momentLoc.weekdaysShort(),
+          dayNames: this.dayNamesDeVor,
           year: year
         }
       } else {
@@ -134,14 +137,13 @@ export class CalendarService {
   }
 
   generateCal(year: number): Calendar {
-    //if ()
     const months = []
     for (let index = 0; index < this.monthNames.length; index++) {
       months.push(this.generateMonth(index, year))
     }
     return {
       year: year,
-      dayNames: this.momentLoc.weekdaysShort(),
+      dayNames: this.dayNamesDeVor,
       months: months
     }
   }

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

@@ -16,6 +16,7 @@ export interface CalendarConfig {
     useHolidays: boolean;
     displayYear: boolean;
     switches: boolean;
+    firstDayOfWeekMonday: boolean;
     panelBgColor?: string;
     textColor?: string;
     holidayColor?: string;

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

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

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

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

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

@@ -3,13 +3,15 @@ import { NgModule, LOCALE_ID } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { MaterialCalendarModule } from 'projects/material-calendar/src/public-api';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     MaterialCalendarModule
   ],
   providers: [