salix/modules/worker/front/calendar/index.html

<vn-crud-model
    url="AbsenceTypes"
    data="absenceTypes"
    auto-load="true">
</vn-crud-model>
<div class="vn-w-lg">
    <vn-card class="vn-pa-sm calendars">
        <vn-icon ng-if="::$ctrl.isSubordinate" icon="info" color-marginal
            vn-tooltip="To start adding absences, click an absence type from the right menu and then on the day you want to add an absence">
        </vn-icon>
        <vn-calendar
            ng-repeat="month in $ctrl.months"
            data="$ctrl.events"
            default-date="month"
            format-day="$ctrl.formatDay($day, $element)"
            display-controls="false"
            hide-contiguous="true"
            hide-year="true"
            on-selection="$ctrl.onSelection($event, $days)">
        </vn-calendar>
    </vn-card>
</div>
<vn-side-menu side="right">
    <div class="vn-pa-md">
        <div class="totalBox" style="text-align: center;">
            <h6 translate>Holidays</h6>
            <div>
                {{'Used' | translate}} {{$ctrl.calendar.holidaysEnjoyed}} 
                {{'of' | translate}} {{$ctrl.calendar.totalHolidays}} {{'days' | translate}}
            </div>
        </div>
        <div class="vn-pt-md" style="overflow: hidden;">
            <vn-chip ng-repeat="absenceType in absenceTypes" ng-class="::{'selectable': $ctrl.isSubordinate}"
                ng-click="$ctrl.pick(absenceType)">
                <vn-avatar
                    ng-style="{backgroundColor: absenceType.rgb}">
                    <vn-icon icon="check" ng-if="absenceType.id == $ctrl.absenceType.id"></vn-icon>
                </vn-avatar>
                {{absenceType.name}}
            </vn-chip>
        </div>
    </div>
</vn-side-menu>
<vn-confirm 
    vn-id="confirm"
    message="This item will be deleted"
    question="Are you sure you want to continue?">
</vn-confirm>