angular-6-calendar-week-hours-view/src/app/modules/calendar-week-hours-view/calendar-week-hours-view-header.component.ts

This project supports on Angular 6.0+. and aims to provide an alternative view to those already provided on [Angular Calendar](https://github.com/mattlewis92/angular-calendar) v0.25.2. based out of [Angular Calendar Week Hours View](https://github.com/Inn

import {Component, EventEmitter, Input, Output, TemplateRef} from '@angular/core';
import {CalendarEvent, WeekDay} from 'calendar-utils';

@Component({
    selector: 'iq-calendar-week-hours-view-header',
    template: `
        <ng-template
            #defaultTemplate
            let-days="days"
            let-locale="locale"
            let-dayHeaderClicked="dayHeaderClicked"
            let-eventDropped="eventDropped">
            <div class="cal-day-headers">
                <div class="cal-header">
                </div>
                <div
                    class="cal-header"
                    *ngFor="let day of days"
                    [class.cal-past]="day.isPast"
                    [class.cal-today]="day.isToday"
                    [class.cal-future]="day.isFuture"
                    [class.cal-weekend]="day.isWeekend"
                    [class.cal-drag-over]="day.dragOver"
                    [ngClass]="day.cssClass"
                    (mwlClick)="dayHeaderClicked.emit({day: day})"
                    mwlDroppable
                    (dragEnter)="day.dragOver = true"
                    (dragLeave)="day.dragOver = false"
                    (drop)="day.dragOver = false; eventDropped.emit({event: $event.dropData.event, newStart: day.date})">
                    <b>{{ day.date | calendarDate:'weekViewColumnHeader':locale }}</b><br>
                    <span>{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span>
                </div>
            </div>
        </ng-template>
        <ng-template
            [ngTemplateOutlet]="customTemplate || defaultTemplate"
            [ngTemplateOutletContext]="{days: days, locale: locale, dayHeaderClicked: dayHeaderClicked, eventDropped: eventDropped}">
        </ng-template>
    `
})
export class CalendarWeekHoursViewHeaderComponent {
    @Input() days: WeekDay[];

    @Input() locale: string;

    @Input() customTemplate: TemplateRef<any>;

    @Output()
    dayHeaderClicked: EventEmitter<{ day: WeekDay }> = new EventEmitter<{
        day: WeekDay;
    }>();

    @Output()
    eventDropped: EventEmitter<{
        event: CalendarEvent;
        newStart: Date;
    }> = new EventEmitter<{ event: CalendarEvent; newStart: Date }>();
}