<table aria-describedby="table" role="none">

    <thead>
        <tr>
            <td [attr.colspan]="headers.length">
                <table aria-describedby="table1" role="none">

                    <tr #headerRow>
                        <td class="calendar-header-items calendar-user-active-timeslot" style="width:50px;"> &nbsp;</td>
                        <td class="calendar-header-items" style="cursor: pointer;" (click)="onHeaderClick(header)" *ngFor="let header of headers">
                            <span tabindex="1" attr.aria-label="{{header | date : 'EEEE, MMMM d, y'}}">
                                <span>{{header | date : 'EE'}}</span>
                                <br />
                                <strong style="font-size:20px;">{{header | date : 'd'}}</strong>
                            </span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="calendar-mainbox" [attr.colspan]="headers.length">
                <div class="calendar-scroller">
                    <div style="width: 100%; position: relative;">
                        <div class="calendar-bg">
                            <table aria-describedby="table2" role="none">
                                <tr *ngFor="let calendarRow of calendaryData">

                                    <td class="calendar-header-items calendar-week-timeslot" style="width:50px;">
                                        <div style="min-height: 50px;" *ngIf="(calendarRow.time==null)">
                                            {{calendarRow.title}}
                                        </div>
                                        <div class="calendar-week-timeslotseries-div" *ngIf="(calendarRow.time && calendarRow.time!=null)">
                                            {{ calendarRow.time | date:'hh:mm a' }}
                                        </div>
                                    </td>

                                    <td style="padding-bottom: 0px;" [ngStyle]="{'padding-top': (day.isEvent && day.eventDetails && day.eventDetails.diffwithslot) ? day.eventDetails.diffwithslot+'px' : '0px'}"
                                        class="calendar-box-items" *ngFor="let day of calendarRow.daywiseevent">

                                        <div (click)="eventClicked($event,day)" [class]="'calendar-week-day-timeslot' + '  '+((day.eventDetails.details && day.eventDetails.details.eventclass) ? day.eventDetails.details.eventclass:'') "
                                            [ngClass]="{'calendar-week-active-timeslot': day.isEvent}" [ngStyle]="{'height': (day.isEvent && day.eventDetails && day.eventDetails.diff) ? day.eventDetails.diff+'px' : null}">

                                            <span [attr.tabindex]="(day.isEvent ? 1 : -1)" (keyup.enter)="eventClicked($event,day)" attr.aria-label="{{day.eventdatetime | date : 'EEEE, MMMM d, y'}} {{day.eventDetails.details.title}} {{day.eventDetails.details.start |  date: 'shortTime'}} to {{day.eventDetails.details.end |  date: 'shortTime'}}"
                                                *ngIf="day.isEvent" class="calendar-user-active">
                                                {{day.eventDetails.details.title}}
                                                <br />
                                                <span class="calendar-user-active-timeslot" *ngIf="(day.eventDetails.details && day.eventDetails.details.hasTimeSlot)">
                                                    {{day.eventDetails.details.start | date: "shortTime"}}
                                                    <ng-container *ngIf="(day.eventDetails.details && day.eventDetails.details.end)">
                                                        - {{day.eventDetails.details.end | date: "shortTime"}}
                                                    </ng-container>
                                                </span>
                                            </span>

                                        </div>
                                    </td>

                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>