<div>
    <div class="dayview-allday-table">
        <div class="dayview-allday-label">
            all day
        </div>
        <div class="dayview-allday-content-wrapper">
            <table class="table table-bordered" style="height: 100%; margin-bottom: 0px">
                <tbody>
                <tr>
                    <td class="calendar-cell" ng-class="{'calendar-event-wrap':allDayEvents}">
                        <div ng-repeat="displayEvent in allDayEvents" class="calendar-event"
                             ng-click="eventSelected({event:displayEvent.event})"
                             ng-style="{top: 25*$index+'px',width: '100%',height:'25px'}">
                            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
                        </div>
                    </td>
                    <td ng-if="allDayEventGutterWidth>0" ng-style="{width:allDayEventGutterWidth+'px'}"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="scrollable" style="height: 400px">
        <table class="table table-bordered table-fixed">
            <tbody>
            <tr ng-repeat="tm in rows track by $index">
                <td class="calendar-hour-column text-center">
                    {{$index<12?($index === 0?12:$index)+'am':($index === 12?$index:$index-12)+'pm'}}
                </td>
                <td class="calendar-cell" >
                    <div ng-class="{'calendar-event-wrap': tm.events}" ng-if="tm.events">
                        <div ng-repeat="displayEvent in tm.events" class="calendar-event"
                             ng-click="eventSelected({event:displayEvent.event})"
                             ng-style="{left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex-displayEvent.startIndex)+'px'}">
                            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>