timetable.html

<div id="timetable>
    <div class='title'>
        <h2>{{ mainCtrl.name }}</h2>
        <button class='button small green'>Create New</button>
        <button class='button small'>Enter My Room Now</button>
    </div>
    <div class='date-bar'>
        <button class='first' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, -7)'>
            <i class='fa fa-angle-double-left'></i>
        </button>
        <button class='prev' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, -1)'>
            <i class='fa fa-angle-left'></i>
        </button>
        <button class='reset' ng-click='mainCtrl.resetDisplayDate()'>{{ mainCtrl.displayDate() }}</button>
        <button class='next' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, 1)'>
            <i class='fa fa-angle-right'></i>
        </button>
        <button class='last' 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 large red' ng-click='mainCtrl.joinMeetingService(occurrence.id)'>
                <i class='fa fa-clock-o'></i>
                    <timer countdown='mainCtrl.time_until(occurrence.start_datetime)' max-time-unit='hour' interval='1000'>
                        <span>{{hours}}:{{mminutes}}
                        </span>
                    </timer>
                <span class='join-now'>Join Now</span>
            </button>
            <div ng-if="occurrence.recording">
                <button class='button large red'ng-click="mainCtrl.launchRecording(occurrence.recording.url)">Watch Recording</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-repeate='participant in occurrence.participants'>
                    {{ participant.parcitipant }}
                </a>
            </div>
            <div class='action' ng-show'false'>
                <button  class="button normal blue">Edit</button>
                <button  class="button normal">Duplicate</button>
            </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 {
  font-size: 14px;
  font-weight: 400;

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

    &:hover {
      text-decoration: underline;
    }
  }

  .title {
    overflow: hidden;

    h2 {
      font-weight: 700px;
      font-size: 14px;
      margin: 0;
      float: left;
      display: block;
      margin-right: 10px;
    }

    .button {
      float: left;
      margin: 0;

      &.green {
        margin-right: 5px;
      }
    }
  }

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

    button {
      cursor: pointer;
      border: 0;
      margin: 0;
      background-color: #ccc;
      line-height: 20px;
      position: absolute;
      width: 30px;
      top: 0;
      text-align: center;
      font-size: 16px;
      outline: none;

      &:active {
        opacity: .8;
        outline: none;
      }
    }

    .first {
      .border-radius(3px 0 0 3px);
      left: 0;
      border-right: 1px solid #fff;
    }

    .prev {
      left: 30px;
    }

    .next {
      right: 30px;
    }

    .last {
      .border-radius(0 3px 3px 0);
      border-left: 1px solid #fff;
      right: 0;
    }

    .reset {
      text-transform: uppercase;
      font-size: 12px;
      background-color: #eee;
      position: static;
      width: 100%;
    }

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

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

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

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

  .meeting-body {

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

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

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

    .red {
      color: #fff;
      box-shadow: none;
      font-size: 14px;
      background-color: #cc0000;
      padding: 10px 20px;
      display: block;
      width: 100%;

      .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: 20px;

      .button {
        margin: 0;

        &:first-child {
          margin-right: 5px;
        }
      }
    }
  }
}
// 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;
}