JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.0rc5/angular-1.0.0rc5.js"></script>


<html ng-app="calendar" >
<div ng-controller='WeekCalendarCtrl'>
    <table class="weekcalendar">
        <tr>
            <th>WeekCalendar</th>
            <th ng-repeat="day in days">{{day.name}}</th>
        </tr>
        <tr ng-repeat='slot in slots' ng-switch="slot.type">
            
              <td ng-switch-when="header" rowspan='2'>{{slot.name}}</td>
            
          
        </tr>
    </table>
</div>
</html>

CSS

body {
    font-family: sans-serif;
    font-size: small;
}

.weekcalendar {
    width: 100%;
}

.weekcalendar th {
    font-weight: normal;
    background-color: whitesmoke;
    border-bottom: thin solid lightgrey;
    text-align: center;
}

.weekcalendar td {
    height: 20px;
}

.weekcalendar th:nth-child(1) {
    width: 120px;
}

.weekcalendar tr:nth-child(2n+1){
    border-bottom: thin solid lightgrey;
}

.weekcalendar td:nth-child(1) {
    text-align: center;
}

.weekcalendar td:nth-child(2n+2) {
    background-color: #f8f8f8;
}

.weekcalendar td:nth-child(n+1):hover {
    background-color: #eef;
}

JavaScript

var app = angular.module('calendar', []);

function WeekCalendarCtrl($scope){
    
    $scope.days = [
        { name: "Monday" },
        { name: "Tuesday" },
        { name: "Wednesday" },
        { name: "Thursday" },
        { name: "Friday"},
        { name: "Saturday"},
        { name: "Sunday"}
    ];
    
    $scope.slots = [
        {name: '8:00', type:'header'},
        {name: '8:30', type:''},
        {name: '9:00', type:'header'},
        {name: '9:30', type:''},
        {name: '10:00', type:'header'},
        {name: '10:30', type:''},
        {name: '11:00', type:'header'},
        {name: '11:30', type:''},
        {name: '12:00', type:'header'},
        {name: '12:30', type:''},
        {name: '13:00', type:'header'},
        {name: '13:30', type:''},
        {name: '14:00', type:'header'},
        {name: '14:30', type:''},
        {name: '15:00', type:'header'},
        {name: '15:30', type:''},
        {name: '16:00', type:'header'},
        {name: '16:30', type:''},
        {name: '17:00', type:'header'},
        {name: '17:30', type:''}
    ];
}