chronos-front/app/views/home.html

<div layout="column" layout-fill layout-align="top center">

    <p ng-show="DataShareBusiness.CurrentGroups.length == 0" class="welcome-message">
        Welcome to Chronos !
    </p>

    <p ng-show="getSheetCount() > 5">
        Too many elements to display, please select a sub group.
    </p>

    <div lu-busy="coursesView" class="col-xs-12 seven-cols">

        <div class="col-xs-12">
            <div class="col-xs-offset-4 col-xs-1">
                <md-button class="md-primary md-group-button" ng-click="goToRelativeWeek(-1)">
                    <
                </md-button>
            </div>
            <div class="col-xs-2">
                <md-datepicker ng-model="selectedDate" md-placeholder="Enter date"></md-datepicker>
            </div>
            <div class="col-xs-1">
                <md-button class="md-primary md-group-button col-xs-1" ng-click="goToRelativeWeek(1)">
                    >
                </md-button>
            </div>
        </div>

        <div class="col-xs-1 hour-column">
            <div class="day-column-hours">
                <div class="day-column-hour" ng-hide="$first" ng-repeat="hour in hours" ng-style="{'top': ($index / hours.length * 100) + '%'}">
                    {{hour | date : hourFormat}} -
                </div>
            </div>
        </div>
        <div class="col-xs-11 days-container">
            <div ng-repeat="day in days" class="col-sm-1 day-column"
                ng-style="{'border-right': $last ? 'solid #505050 1px' : ''}">
                <div class="day-column-header day-column-header-day"
                     ng-class="{'day-column-header-current': !isToday(day.date) && selectedDate.getTime() == day.date.getTime(),
                                'day-column-header-today': isToday(day.date)}">
                    {{ day.day }}
                </div>
                <div class="day-column-header day-column-header-date"
                     ng-class="{'day-column-header-current': !isToday(day.date) && selectedDate.getTime() == day.date.getTime(),
                                'day-column-header-today': isToday(day.date)}">
                    {{ day.date | date : dateFormat }}
                </div>
                <div class="day-column-courses">
                    <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)" ng-click="showCourse(course)"
                         ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',
                         'top' : course.BeginPercent + '%', 'width': (100 / course.ParallelCoursesCount)+'%',
                         'left': (course.ParallelCoursesPosition * (100 / course.ParallelCoursesCount)) + '%',
                         'border-left': (course.ParallelCoursesPosition != 0) ? 'solid #505050 1px' : ''}">
                        <span class="day-column-course-name">{{ course.Name }}</span>
                        <div ng-repeat="room in course.RoomList">
                            <span class="day-column-room-name">{{room.Name}}</span>
                        </div>
                        <div ng-repeat="staff in course.StaffList">
                            <span class="day-column-staff-name">{{staff.Name}}</span>
                        </div>
                        <span class="day-column-course-hour">{{course.BeginDate | date : hourFormat}} - {{course.EndDate | date : hourFormat}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>