feat(calendar): add property [holidays] to display the holiday on cell

projects/truly-ui/src/components/calendar/calendar-theme.scss

@@ -69,5 +69,9 @@
       color: map-deep-get($primary, "default", "foreground") !important;
       border-radius: 20%;
     }
+
+    & .holiday {
+      color: map-deep-get($danger, "default", "background") !important;
+    }
   }
 }

projects/truly-ui/src/components/calendar/calendar.scss

@@ -96,8 +96,13 @@
   & .selected {
     font-weight: normal !important;
   }
+
+  & .holiday {
+    font-weight: 600;
+  }
 }
 
+
 .ui-status-wrapper {
   width: 20px;
   margin: 0 auto;

projects/truly-ui/src/components/calendar/calendar.ts

@@ -29,6 +29,7 @@ import { NavigatorService } from '../navigator/services/navigator.service';
 import { CalendarService } from './services/calendar.service';
 import { I18nService } from '../i18n/i18n.service';
 import { Subscription } from 'rxjs';
+import {TooltipService} from '../tooltip/tooltip.service';
 
 export interface CalendarStatus {
   id?: string;
@@ -37,6 +38,12 @@ export interface CalendarStatus {
   total: number;
 }
 
+export interface CalendarHolidays {
+  date: Date;
+  description: string;
+  tooltip: boolean;
+}
+
 @Component( {
   selector: 'tl-calendar',
   templateUrl: './calendar.html',
@@ -61,6 +68,8 @@ export class TlCalendar implements AfterViewInit, OnChanges, OnDestroy {
 
   @Input() typingDay = false;
 
+  @Input() holidays: Array<CalendarHolidays> = [];
+
   @Output() selectDay: EventEmitter<any> = new EventEmitter<any>();
 
   @Output() focusout: EventEmitter<any> = new EventEmitter<any>();
@@ -112,14 +121,14 @@ export class TlCalendar implements AfterViewInit, OnChanges, OnDestroy {
   constructor(
     public calendar: ElementRef,
     public renderer: Renderer2,
+    public tooltipService: TooltipService,
     private i18n: I18nService,
     private navigatorService: NavigatorService,
     private calendarService: CalendarService,
-    private view: ViewContainerRef) {
+    public view: ViewContainerRef) {
     this.dateNavigator = new Date();
   }
 
-
   ngAfterViewInit() {
     this.calendarService.setView( this.view );
     this.calendarService.setConfigCalendar( this );

projects/truly-ui/src/components/calendar/index.ts

@@ -8,12 +8,14 @@ import { TlCalendarYears } from './parts/calendar-years';
 
 import { MiscModule } from '../misc/index';
 import { NavigatorModule } from '../navigator/index';
+import { TooltipModule } from '../tooltip/index';
 
 @NgModule({
     imports: [
         CommonModule,
         MiscModule,
-        NavigatorModule
+        NavigatorModule,
+        TooltipModule
     ],
     declarations: [
         TlCalendar,

projects/truly-ui/src/components/calendar/parts/calendar-days.ts

@@ -126,9 +126,11 @@ export class TlCalendarDays {
       this.calendar.renderer.addClass( td.nativeElement, 'ui-table-cell' );
       td.nativeElement.innerHTML = this.dayOfMonth[ day ].day;
 
-      if ( this.calendar.status ) {
+      const date = new Date( this.calendar.year, this.calendar.month, day + 1 );
 
-        const date = new Date( this.calendar.year, this.calendar.month, day + 1 );
+      this.handleHolidayDays( date, td );
+
+      if ( this.calendar.status ) {
         this.calendar.status.forEach( ( value ) => {
           if ( value.date.getTime() === date.getTime() ) {
 
@@ -175,6 +177,37 @@ export class TlCalendarDays {
     }
   }
 
+  getHoliday( currentDate: Date ) {
+    return this.calendar.holidays.filter(value => {
+      return new Date(value.date.getFullYear(), value.date.getMonth(), value.date.getDate(),
+        0, 0, 0, 0).getTime() === currentDate.getTime();
+    });
+  }
+
+  handleHolidayDays( currentDate: Date, cell ) {
+    const holiday = this.getHoliday( currentDate );
+    if ( holiday.length > 0 ) {
+      this.calendar.renderer.addClass( cell.nativeElement, 'holiday' );
+      this.listenMouseHoverCell( holiday, cell );
+      this.listenMouseLeave( cell );
+    }
+  }
+
+  listenMouseHoverCell( holiday, cell ) {
+    this.calendar.renderer.listen( cell.nativeElement, 'mouseover', () => {
+      if ( holiday[0].tooltip ) {
+        this.calendar.tooltipService.create( { text: holiday[0].description, placement: 'top-center' },
+          this.calendar.view, cell.nativeElement );
+      }
+    });
+  }
+
+  listenMouseLeave( cell ) {
+    this.calendar.renderer.listen( cell.nativeElement, 'mouseleave', () => {
+      this.calendar.tooltipService.destroy();
+    });
+  }
+
   markToday( day, cell ) {
     if ( (day === new Date().getDate()) && (this.calendar.month === new Date().getMonth() )
       && (this.calendar.year === new Date().getFullYear()) ) {

projects/truly-ui/src/public_api.ts

@@ -68,7 +68,10 @@ export { ConfirmationOptions } from './components/dialog/dialog-confirmation/con
 export { ModalOptions, Modal } from './components/modal/interfaces/modal-options';
 export { ModalFormConfig } from './components/modal/interfaces/modal-smart-form-config';
 export { ToasterConfig } from './components/toaster/toaster-config';
+
 export { CalendarStatus } from './components/calendar/calendar';
+export { CalendarHolidays } from './components/calendar/calendar';
+
 export { IncrementalSteps } from './components/timepicker/timepicker';
 export { PermissionDataConfig } from './components/permissions/parts/interfaces/permission-dataconfig.interface';
 export { ShortcutConfig } from './components/shortcut/shortcut.config';