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 vn-mb-sm" style="text-align: center;">
            <h6>{{'Contract' | translate}} #{{$ctrl.businessId}}</h6>
            <div>
                {{'Used' | translate}} {{$ctrl.contractHolidays.holidaysEnjoyed}} 
                {{'of' | translate}} {{$ctrl.contractHolidays.totalHolidays || 0}} {{'days' | translate}}
            </div>
        </div>

        <div class="totalBox" style="text-align: center;">
            <h6>{{'Year' | translate}} {{$ctrl.year}}</h6>
            <div>
                {{'Used' | translate}} {{$ctrl.yearHolidays.holidaysEnjoyed}} 
                {{'of' | translate}} {{$ctrl.yearHolidays.totalHolidays || 0}} {{'days' | translate}}
            </div>
        </div>

        <div class="vn-pt-md">
            <vn-autocomplete label="Year"
                data="$ctrl.yearFilter"
                ng-model="$ctrl.year"
                show-field="year"
                value-field="year"
                order="DESC">
            </vn-autocomplete>
            <vn-autocomplete label="Contract"
                url="Workers/{{$ctrl.$params.id}}/contracts"
                fields="['started', 'ended']"
                ng-model="$ctrl.businessId"
                search-function="{businessFk: $search}"
                value-field="businessFk"
                order="businessFk DESC"
                limit="5">
                <tpl-item>
                    <div>#{{businessFk}}</div> 
                    <div class="text-caption text-secondary">
                        {{started | date: 'dd/MM/yyyy'}} - {{ended ? (ended | date: 'dd/MM/yyyy') : 'Indef.'}}
                    </div>
                </tpl-item>
            </vn-autocomplete>
        </div>
        <div name="absenceTypes" class="input vn-py-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 class="vn-py-md">
            <vn-chip>
                <vn-avatar class="festive">
                </vn-avatar>
                <span translate>Festive</span> 
            </vn-chip>
            <vn-chip>
                <vn-avatar class="today">
                </vn-avatar>
                <span translate>Current day</span> 
            </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>