radialapps/xunk-calendar

<table class="xunk-calendar">

    <!-- Header for changing month -->
    <tr *ngIf="showHeader">
        <!-- Previous month button -->
        <th>
            <button mat-icon-button (click)="changeMonth(-1)">
                <mat-icon>keyboard_arrow_left</mat-icon>
            </button>
        </th>

        <!-- Month label -->
        <th colspan=5>{{monthNames[openPage.month]}} {{openPage.year}}</th>

        <!-- Next month button -->
        <th>
            <button mat-icon-button (click)="changeMonth(1)">
                <mat-icon>keyboard_arrow_right</mat-icon>
            </button>
        </th>
    </tr>

    <!-- Weekday headers -->
    <tr class="weekday">
        <th>M</th>
        <th>T</th>
        <th>W</th>
        <th>T</th>
        <th>F</th>
        <th>S</th>
        <th>S</th>
    </tr>

    <!-- The real calendar -->
    <tr *ngFor="let row of calendar">
        <td class="xunk-calendar-cell" *ngFor="let col of row">
            <button mat-icon-button
                    *ngIf="col" class="xunk-calendar-day"
                    [style.backgroundColor]="getHM(col)"
                    [style.color]="getForeground(col)"
                    (click)="selectDay(col)">
                <span [style.fontWeight]="isToday(col) ? 'bold' : null">{{col}}</span>
            </button>
        </td>
    </tr>
</table>