timetable.html

<div id='timetable'>
    <div class='title'>
        <h2>{{ mainCtrl.name }}</h2>
        <div class="actions">
            <a meeting-form ng-click="mainCtrl.openModal()">Create New</a>
            <span>|</span>
            <a>Enter My Room Now</a>
        </div>
    </div>
    <div class='date-bar'>
        <button class="today button normal"  ng-click='mainCtrl.resetDisplayDate()'>Today</button>
        <button class='first button normal' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, -7)'>
            <i class='fa fa-angle-double-left'></i>
        </button>
        <button class='prev button normal' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, -1)'>
            <i class='fa fa-angle-left'></i>
        </button>
        <button class='reset button normal'>{{ mainCtrl.displayDate() }}</button>
        <button class='next button normal' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, 1)'>
            <i class='fa fa-angle-right'></i>
        </button>
        <button class='last button normal' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, 7)'>
            <i class='fa fa-angle-double-right'></i>
        </button>
    </div>
    <div class='occurrence' ng-repeat='occurrence in mainCtrl.meetings.meetings.occurrences'>
        <div class='meeting-time'> {{ occurrence.start_time }}<br><span>{{ occurrence.am_pm }}</span></div>
        <div class='meeting-body'>
            <h3><a ng-click='showDetails = ! showDetails'>{{ occurrence.type }}: {{ occurrence.name }}</a></h3>
            <div class='hosts'>
                <span class='host'>Host:</span>
                <a ng-href='#'>{{ occurrence.host }}, </a>
                <span ng-switch='occurrence.access'>
                    <a ng-href='#' ng-switch-when='My Section Only'>, {{ occurrence.section_name }}</a>
                    <a ng-href='#' ng-switch-when='All Course Sections'>{{ occurrence.enrolled_section }}</a>
                    <a ng-href='#' ng-switch-when='The Group'>{{ occurrence.group_name }}</a>
                </span>
            </div>
            <button ng-if='mainCtrl.show_join_button(occurrence.start_datetime, occurrence.duration)' class='button normal green' ng-click='mainCtrl.joinMeetingService(occurrence.live_session_id)'>
                <i class='fa fa-clock-o'></i>
                    <timer countdown='mainCtrl.time_until(occurrence.start_datetime)' max-time-unit='hour' interval='1000'>
                        <span>{{mminutes}}
                        </span>
                    </timer>
                <span class='join-now'>Join Now</span>
            </button>
            <div class="actions" ng-if="occurrence.recording">
                <button class='button normal blue' ng-click="mainCtrl.launchRecording(occurrence.recording.url)">Watch</button>
            </div>
            <div class='details' ng-if='showDetails'>
                <p>{{ occurrence.details }}</p>
                <label>Invited:</label>
                <a ng-href='#' ng-if='occurrence.access'>{{ occurrence.access }}</a>
                <a ng-href='#' ng-if='occurrence.participants' ng-repeat='participant in occurrence.participants'>
                    {{ participant.parcitipant }}
                </a>
            </div>
            <div class='actions' ng-show='false'>
                <a>Edit</a>
                <span>|</span>
                <a>Duplicate</a>
            </div>
        </div>
    </div>
</div>

timetable.less

@import "../../libs/font-awesome/less/font-awesome.less";
@fa-font-path: "fonts";

@blue: #569ed4;

.button.blue {
  background-color: @blue;
  border-color: darken(@blue, 10%);
  box-shadow: inset 0 0 5px 10px @blue, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 5px 10px @blue, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 5px 10px @blue, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  color: #fff;
  margin-left: 35px;
}

.border-radius(@radius) {
  border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}

#timetable {
  background-color: #fff;
  padding: 20px;

  a {
    color: @blue;
    cursor: pointer;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
  
  .title {
    overflow: hidden;

    h2 {
      font-weight: 700;
      font-size: 20px;
      margin: 0;
      float: left;
      display: block;
      margin-right: 10px;
      width: 80px;
      line-height: 26px;
    }

    .actions {
      overflow: hidden;
      float: right;

      a, span {
        float: left;
        line-height: 26px;
      }

      span {
        color: #999;
        margin: 0 10px;
      }
    }
  }

  .date-bar {
    position: relative;
    padding: 0 60px 0 150px;
    margin-top: 20px;

    button {
      margin: 0;
      position: absolute;
      width: 30px;
      top: 0;
      text-align: center;
    }

    .today {
      width: 80px;
      left: 0;
    }

    .first {
      left: 90px;
    }

    .prev {
      left: 120px;
    }

    .next {
      right: 30px;
    }

    .last {
      right: 0;
    }

    .reset {
      position: static;
      width: 100%;
    }

    .inactive {
      opacity: .5;
      cursor: default;
    }
  }

  .occurrence {
    padding-left: 90px;
    position: relative;
    margin-top: 20px;
  }

  .meeting-time {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;

    span {
      text-transform: uppercase;
      font-size: 12px;
    }
  }

  .meeting-body {

    h3 {
      font-size: 20px;
      font-weight: 700;
      margin: 0 0 5px;
    }

    .hosts {
      font-size: 14px;
      margin-bottom: 15px;

      .host {
        color: #333;
        font-weight: 700;
      }
    }

    .green {
      font-size: 16px;
      display: block;
      width: 100%;
      margin: 0;

      .join-now {
        font-weight: 700;
      }

    }

    .details {

      p {
        margin: 0 0 20px;
        line-height: 1.4;
      }

      ul {
        list-style: n
      }
      
      label {
        font-weight: 700;
        display: block;
      }

      .access {
        font-weight: 700;
      }

      a {
        display: block;
        line-height: 1.4;
      }
    }

    .actions {
      margin-top: 10px;
      overflow: hidden;

      a, span {
        float: left;
        line-height: 26px;
      }

      span {
        color: #999;
        margin: 0 10px;
      }
    }
  }
}
// Buttons from input-form.less

.button {
  background-color: #ebebeb;
  border: solid 1px #c5c5c5;
  margin-right: 25px;
  background-clip: padding-box;
  -mox-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  color: #333;
  cursor: pointer;
  display: inline-block;
  letter-spacing: 0.3px;
  outline: none;
  text-decoration: none;
}
.button.small {
  background-clip: padding-box;
  -mox-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px 4px;
}
.button.normal {
  font-size: 12px;
  font-weight: 300;
  padding: 7px 12px 6px;
}
.button.large {
  background-clip: padding-box;
  -mox-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 25px 9px;
}
.button.green {
  background-color: #289F00;
  border-color: #155300;
  box-shadow: inset 0 0 5px 10px #259500, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 5px 10px #259500, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 5px 10px #259500, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  color: #fff;
  margin-left: 35px;
}
.button.gray {
  background-color: #ededed;
  border-color: #c7c7c7;
  box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  color: #333;
}
.button:active {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@x)";
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}