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-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($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" class="selectable"
                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>