fab-manager/app/assets/templates/admin/calendar/calendar.html.erb

<section class="heading b-b">
  <div class="row no-gutter">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
      </section>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-8 b-l b-r-md">
      <section class="heading-title">
        <h1 translate>{{ 'admin_calendar.calendar_management' }}</h1>
      </section>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md">
      <section class="heading-actions wrapper" ng-class="{'p-s': !fablabWithoutSpaces}">
        <span class="badge text-sm bg-formation" ng-class="{'m-t-sm': fablabWithoutSpaces}" translate>{{ 'admin_calendar.trainings' }}</span><br>
        <span class="badge text-sm bg-machine" translate>{{ 'admin_calendar.machines' }}</span><br>
        <span class="badge text-sm bg-space" ng-hide="fablabWithoutSpaces" translate>{{ 'admin_calendar.spaces' }}</span>
      </section>
    </div>

  </div>
</section>


<section class="row no-gutter">

  <div class="col-sm-12 col-md-12 col-lg-9">
    <div ui-calendar="calendarConfig" ng-model="eventSources" calendar="calendar" class="wrapper-lg"></div>
  </div>

  <div class="col-sm-12 col-md-12 col-lg-3">
    <div class="m text-center">
      <a class="btn btn-default"
         ng-href="api/availabilities/export_index.xlsx"
         target="export-frame"
         ng-click="alertExport('index')"
         uib-popover="{{ 'admin_calendar.availabilities_notice' | translate}}"
         popover-trigger="mouseenter"
         popover-placement="bottom">
        <i class="fa fa-file-excel-o"></i> {{ 'admin_calendar.availabilities' | translate }}
      </a>
      <iframe name="export-frame" height="0" width="0" class="none"></iframe>
    </div>

    <div class="widget panel b-a m m-t-lg" ng-if="availability">
      <div class="panel-heading b-b small">
        <h3 translate>{{ 'admin_calendar.ongoing_reservations' }}</h3>
      </div>
      <div class="widget-content no-bg auto wrapper" ng-class="{'reservations-locked': availability.lock}">
        <ul class="list-unstyled" ng-if="reservations.length > 0">
          <li ng-repeat="r in reservations" class="m-b-xs" ng-class="{'reservation-canceled':r.canceled_at}">
            {{r.user.name}}
              - <span class="label reservation-time">{{ r.start_at | amDateFormat:'LLL' }} - {{ r.end_at | amDateFormat:'LT' }}</span>
              - <span class="label label-success text-white">{{r.reservable.name}}</span>
              <span class="btn btn-warning btn-xs" ng-click="cancelBooking(r)" ng-if="!r.canceled_at"><i class="fa fa-times red"></i></span>
          </li>
        </ul>
        <div ng-show="reservations.length == 0" translate>{{ 'admin_calendar.no_reservations' }}</div>
        <div class="m-t" ng-show="availability.lock"><i class="fa fa-ban"/> <span class="m-l-xs" translate>{{ 'admin_calendar.reservations_locked' }}</span></div>
      </div>
    </div>

    <div class="widget panel b-a m m-t-lg" ng-if="availability.machine_ids.length > 0">
      <div class="panel-heading b-b small">
        <h3 translate>{{ 'admin_calendar.machines' }}</h3>
      </div>
      <div class="widget-content no-bg auto wrapper">
        <ul class="list-unstyled">
          <li ng-repeat="m in machines" class="m-b-xs" ng-show="availability.machine_ids.indexOf(m.id) > -1">
            {{m.name}}
            <span class="btn btn-warning btn-xs" ng-click="removeMachine(m)" ng-if="availability.machine_ids.length > 1"><i class="fa fa-times red"></i></span>
          </li>
        </ul>
      </div>
    </div>

    <div class="widget panel b-a m m-t-lg" ng-if="availability">
      <div class="panel-heading b-b small">
        <h3 translate>{{ 'admin_calendar.actions' }}</h3>
      </div>
      <div class="widget-content no-bg auto wrapper">
        <button class="btn btn-default" ng-click="toggleLockReservations()">
          <span ng-hide="availability.lock">
            <i class="fa fa-stop" />
            <span class="m-l-xs" translate>{{ 'admin_calendar.block_reservations' }}</span>
          </span>
          <span ng-show="availability.lock">
            <i class="fa fa-play" />
            <span class="m-l-xs" translate>{{ 'admin_calendar.allow_reservations' }}</span>
          </span>
        </button>
        <button class="btn btn-default m-t" ng-click="removeSlot()">
          <span>
            <i class="fa fa-trash" />
            <span class="m-l-xs" translate>{{ 'admin_calendar.delete_slot' }}</span>
          </span>
        </button>
      </div>
    </div>
  </div>

</section>