click feedback

Author: evombau

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

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

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

@@ -25,6 +25,7 @@ mat-grid-tile {
 
 .date {
     border-radius: 4px;
+    cursor: pointer;
 }
 
 .today {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, HostBinding, Input, Output } from '@angular/core';
+import { Component, OnInit, HostBinding, Input, Output, EventEmitter } from '@angular/core';
 import { CalendarService } from '../service/calendar.service';
 import * as pSBC from '../service/pSBC';
 import { CalendarConfig } from '../service/models';
@@ -89,6 +89,12 @@ export class CalendarPanelComponent implements OnInit {
   todayColor;
   panelWidth = '100%';
 
+  @Output() public clickDate = new EventEmitter<Object>();
+  
+  onClick(event){
+    this.clickDate.emit(event);
+  }
+
   constructor(private calendarService: CalendarService,
     private sharedFunctions: SharedFunctions) { }
 

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

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

@@ -36,6 +36,7 @@ mat-grid-tile {
 
 .date {
     border-radius: 4px;
+    cursor: pointer;
 }
 
 .today {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, HostBinding, Input, Output } from '@angular/core';
+import { Component, OnInit, HostBinding, Input, Output, EventEmitter } from '@angular/core';
 import { CalendarService } from '../service/calendar.service';
 import * as pSBC from '../service/pSBC';
 import { CalendarConfig } from '../service/models';
@@ -117,6 +117,11 @@ export class CalendarPanelsComponent implements OnInit {
   todayColor;
   panelWidth = '100%';
 
+  @Output() public clickDate = new EventEmitter<Object>();
+  onClick(event){
+    this.clickDate.emit(event);
+  }
+
   constructor(private calendarService: CalendarService,
     private sharedFunctions: SharedFunctions) { }
 

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

@@ -31,8 +31,10 @@
 </div>
 
 <calendar-panels [mode]="mode" [placeholderDay]="placeholder" year="2020" month="5" [monthsBefore]="monthsBefore"
-    [monthsAfter]="monthsAfter" [config]="calendarConfig">
+    [monthsAfter]="monthsAfter" [config]="calendarConfig" (clickDate)="testMethod($event)">
 </calendar-panels>
 
-<!-- <calendar-panel [placeholderDay]="placeholder" year="2020" month="5" [config]="calendarConfig">
-</calendar-panel> -->
+<!-- <div style="width: 600px;">
+    <calendar-panel [placeholderDay]="placeholder" year="2020" month="5" [config]="calendarConfig" (clickDate)="testMethod($event)">
+    </calendar-panel>
+</div> -->

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

@@ -31,9 +31,16 @@ export class AppComponent implements OnInit {
     switches: true,
   }
 
+  constructor() {
+  }
+
   ngOnInit() {
   }
 
+  testMethod(event) {
+    console.log(event)
+  }
+
   switchMode() {
     this.mode = (this.mode === 'monthly') ? 'annual' : 'monthly'
   }