bugfixes + get Date by click | v1.0.0

Author: evombau

README.md

@@ -43,7 +43,7 @@ and you are good to go ;)
 
 >If only a one-month layout is required, the following tag can also be used:
 >``` html
-><calendar-panel [placeholderDay]="placeholder" year="2020" month="5" [config]="calendarConfig">
+><calendar-panel [placeholderDay]="placeholder" year="2020" month="5" [config]="calendarConfig" (clickDate)="yourMethod($event)">
 ></calendar-panel>
 >```
 >.
@@ -59,7 +59,8 @@ All options are shown here:
 	month="3" 
 	monthsBefore="1"
 	monthsAfter="1"
-	[config]="calendarConfig">
+	[config]="calendarConfig"
+	(clickDate)="yourMethod($event)">
 </calendar-panels>
 <!--
 	default placeholderDay = false
@@ -112,6 +113,11 @@ calendarConfig: CalendarConfig = {
 
 and many more...
 
+## Features
+
+- generate a nice calendar in material design
+- get a date back with the annotation "clickDate" (see example)
+
 ## Code scaffolding
 
 For code scaffolding, the project can be checked out from the public repository and pull requests can be made.

projects/material-calendar/README.md

@@ -43,7 +43,7 @@ and you are good to go ;)
 
 >If only a one-month layout is required, the following tag can also be used:
 >``` html
-><calendar-panel [placeholderDay]="placeholder" year="2020" month="5" [config]="calendarConfig">
+><calendar-panel [placeholderDay]="placeholder" year="2020" month="5" [config]="calendarConfig" (clickDate)="yourMethod($event)">
 ></calendar-panel>
 >```
 >.
@@ -59,7 +59,8 @@ All options are shown here:
 	month="3" 
 	monthsBefore="1"
 	monthsAfter="1"
-	[config]="calendarConfig">
+	[config]="calendarConfig"
+	(clickDate)="yourMethod($event)">
 </calendar-panels>
 <!--
 	default placeholderDay = false
@@ -112,6 +113,11 @@ calendarConfig: CalendarConfig = {
 
 and many more...
 
+## Features
+
+- generate a nice calendar in material design
+- get a date back with the annotation "clickDate" (see example)
+
 ## Code scaffolding
 
 For code scaffolding, the project can be checked out from the public repository and pull requests can be made.

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

@@ -31,9 +31,9 @@ <h3 class="displayMonthName" *ngIf="config.displayYear">{{monat.name}} {{monat.y
                 <a>{{day.day}}</a>
             </mat-grid-tile>
 
-            <mat-grid-tile *ngIf="day.type === 'date'" colspan="1" rowspan="1" matTooltip="test" class="date"
+            <mat-grid-tile (click)="onClick(day)" *ngIf="day.type === 'date'" colspan="1" rowspan="1" matTooltip="test" class="date"
                 [ngClass]="[day.isWeekendDay? 'Weekend' : '', day.isHoliday && config.useHolidays ? 'Holiday' : '']">
-                <div (click)="onClick(day)" [ngClass]="day.date.setHours(0, 0, 0, 0) == today? 'today': ''">
+                <div [ngClass]="day.date.setHours(0, 0, 0, 0) == today? 'today': ''">
                     <a>{{day.day}}</a>
                 </div>
             </mat-grid-tile>

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

@@ -44,9 +44,9 @@ <h3 class="displayMonthName" *ngIf="config.displayYear">{{monat.name}} {{monat.y
                     <a>{{day.day}}</a>
                 </mat-grid-tile>
 
-                <mat-grid-tile *ngIf="day.type === 'date'" colspan="1" rowspan="1" matTooltip="test" class="date"
+                <mat-grid-tile (click)="onClick(day)" *ngIf="day.type === 'date'" colspan="1" rowspan="1" matTooltip="test" class="date"
                     [ngClass]="[day.isWeekendDay? 'Weekend' : '', day.isHoliday && config.useHolidays ? 'Holiday' : '']">
-                    <div (click)="onClick(day)" [ngClass]="day.date.setHours(0, 0, 0, 0) == today? 'today': ''">
+                    <div [ngClass]="day.date.setHours(0, 0, 0, 0) == today? 'today': ''">
                         <a>{{day.day}}</a>
                     </div>
                 </mat-grid-tile>