salix/front/core/components/calendar/index.html

<div>
    <vn-horizontal class="header">
        <vn-auto>
            <vn-icon
                icon="keyboard_arrow_left"
                class="pointer"
                ng-click="$ctrl.movePrevious($ctrl.skip)"
                ng-show="$ctrl.displayControls"/>
            </vn-icon>
        </vn-auto>
        <vn-one>
            <strong>
                <span translate>{{$ctrl.defaultDate | date: 'MMMM'}}</span>
                <span>{{$ctrl.defaultDate | date: 'yyyy'}}</span>
            </strong>
        </vn-one>
        <vn-auto>
            <vn-icon
                icon="keyboard_arrow_right"
                class="pointer"
                ng-click="$ctrl.moveNext($ctrl.skip)"
                ng-show="$ctrl.displayControls">
            </vn-icon>
        </vn-auto>
    </vn-horizontal>

    <vn-vertical class="body">
        <vn-horizontal class="weekdays">
            <section title="{{'Monday' | translate}}" 
                ng-click="$ctrl.selectAll(1)">
                <span>L</span>
            </section>
            <section title="{{'Tuesday' | translate}}" 
                ng-click="$ctrl.selectAll(2)">
                <span>M</span>
            </section>
            <section title="{{'Wednesday' | translate}}" 
                ng-click="$ctrl.selectAll(3)">
                <span>X</span>
            </section>
            <section title="{{'Thursday' | translate}}" 
                ng-click="$ctrl.selectAll(4)">
                <span>J</span>
            </section>
            <section title="{{'Friday' | translate}}" 
                ng-click="$ctrl.selectAll(5)">
                <span>V</span>
            </section>
            <section title="{{'Saturday' | translate}}" 
                ng-click="$ctrl.selectAll(6)">
                <span>S</span>
            </section>
            <section title="{{'Sunday' | translate}}" 
                ng-click="$ctrl.selectAll(0)">
                <span>D</span>
            </section>
        </vn-horizontal>
        <vn-horizontal class="days">
            <section ng-repeat="day in $ctrl.days" class="day"
                ng-class="{'primary': day.events.length > 0}">
                <div class="content">
                    <div class="day-number" 
                        title="{{(day.events[0].description || day.events[0].name) | translate}}"
                        ng-style="$ctrl.renderStyle(day.style || day.events[0].style)" 
                        ng-click="$ctrl.select($index)">
                        {{::day.dated | date: 'd'}}
                    </div>
                    <div ng-if="day.events" class="events">
                        <div ng-repeat="event in day.events" class="event" 
                            title="{{(event.description || event.name) | translate}}">
                            <span class="chip ellipsize"
                                ng-style="::$ctrl.renderStyle(event.style)">
                                {{::event.name}}
                            </span>
                        </div>
                    </div>
                </div>
            </section>
        </vn-horizontal>
    </vn-vertical>
</div>