@oveasoft/planning/demo/appointment/appointment.template.html

An AngularJS planning component

<!-- Appointment template -->
<div flex class="appointment" >
    <div flex layout="row">
        <div flex="20">
            <strong>{{ $ctrl.event.date.format('HH:mm') }}</strong>
        </div>
        <div flex layout="row" layout-align="end center" class="key">
            <strong>{{ $ctrl.event.id }}</strong>
        </div>
    </div>
    <div flex class="label">
        <md-truncate>{{ $ctrl.event.label }}</md-truncate>
    </div>
    <div flex layout="row">
        <div layout="row" layout-align="center center" class="preparation-indicator" ng-class="{active: $ctrl.event.preparationStates.a}">A</div>
        <div layout="row" layout-align="center center" class="preparation-indicator" ng-class="{active: $ctrl.event.preparationStates.b}">B</div>
        <div layout="row" layout-align="center center" class="preparation-indicator" ng-class="{active: $ctrl.event.preparationStates.c}">C</div>
        <div layout="row" layout-align="center center" class="preparation-indicator" ng-class="{active: $ctrl.event.preparationStates.d}">D</div>
        <div layout="row" layout-align="center center" class="preparation-indicator" ng-class="{active: $ctrl.event.preparationStates.e}">E</div>
        <div layout="row" layout-align="center center" class="preparation-indicator" ng-class="{active: $ctrl.event.preparationStates.f}">F</div>
    </div>
</div>
<!---->