martinmicunda/employee-scheduling-ui

<div class="container-fluid">
    <div class="panel panel-inverse">
        <div class="panel-heading">
            <h4 class="panel-title">Availability</h4>
        </div>
        <div class="panel-body">
            <alert-danger has-error="vm.hasError" error-message="vm.errorMessage"></alert-danger>
            <div class="row mb15" mm-access-level="$root.ACCESS_LEVELS.manager">
                <div class="col-md-3">
                    <select name="calendarViews" ng-model="vm.calendarView" ng-change="vm.toggleView(vm.calendarView)" class="form-control" ng-options="calendarView.id as calendarView.label for calendarView in vm.calendarViews"></select>
                </div>
                <a href="javascript:;" onclick="window.print()" class="btn btn-sm btn-success pull-right mr15"><i class="fa fa-print mr5"></i> Print</a>
            </div>

            <h6 class="mt0 pull-left hidden-xs legend">
                <span class="btn btn-success btn-icon btn-lg"></span> Available&nbsp;
                <span class="btn btn-danger btn-icon btn-lg"></span> Unavailable&nbsp;
                <span class="btn btn-warning btn-icon btn-lg"></span> If Necessary&nbsp;
                <span class="btn btn-calendar btn-icon btn-lg"></span> Event
            </h6>

            <div class="fade" ng-class="{'in': vm.calendarConfig.isLoading(), 'hidden': !vm.calendarConfig.isLoading()}"><span class="spinner"></span></div>
            <div id="calendar" ui-calendar="vm.calendarConfig" calendar="availability" ng-model="vm.calendarData" ng-class="{'disable': vm.calendarConfig.isLoading()}"></div>
        </div>
    </div>
</div>