diff --git a/front/core/components/color-legend/index.html b/front/core/components/color-legend/index.html
index 109aada7f..613fb2347 100644
--- a/front/core/components/color-legend/index.html
+++ b/front/core/components/color-legend/index.html
@@ -1,8 +1,7 @@
 <span
     ng-class="{'pointer': $ctrl.$attrs['onClick']}"
     class="mdl-chip mdl-chip--contact"
-    ng-repeat="legend in $ctrl.data"
-    vn-tooltip="{{legend.description}}"
+    ng-repeat="legend in $ctrl.data track by $index"
     ng-click="$ctrl.onClick(legend)">
     <span class="mdl-chip__contact" ng-style="{backgroundColor: legend.color}"></span>
     <span class="mdl-chip__text">{{legend.name}}</span>
diff --git a/modules/worker/front/calendar/index.html b/modules/worker/front/calendar/index.html
index 472ceab33..9952e1d81 100644
--- a/modules/worker/front/calendar/index.html
+++ b/modules/worker/front/calendar/index.html
@@ -1,14 +1,9 @@
-<vn-card pad-medium>
-    <vn-vertical>
-        <vn-horizontal class="header">
-            <vn-vertical class="totalBox">
-                <h6 translate>Holidays</h6>
-                <vn-auto>
-                    {{'Used' | translate}} {{$ctrl.calendar.holidaysEnjoyed}} 
-                    {{'of' | translate}} {{$ctrl.calendar.totalHolidays}} {{'days' | translate}}
-                </vn-auto>
-            </vn-vertical>
-        </vn-horizontal>
+<vn-crud-model
+    url="/api/AbsenceTypes"
+    data="$ctrl.absenceTypes" auto-load="true">
+</vn-crud-model>
+<div class="main-with-right-menu">
+    <vn-card compact pad-large>
         <vn-horizontal class="calendar-list">
             <section class="calendar" ng-repeat="month in $ctrl.months">
                 <vn-calendar
@@ -18,5 +13,17 @@
                 </vn-calendar>
             </section>
         </vn-horizontal>
-    </vn-vertical>
-</vn-card>
+    </vn-card>
+    <vn-side-menu side="right">
+        <vn-vertical pad-small>
+            <vn-vertical class="totalBox">
+                <h6 translate>Holidays</h6>
+                <vn-auto>
+                    {{'Used' | translate}} {{$ctrl.calendar.holidaysEnjoyed}} 
+                    {{'of' | translate}} {{$ctrl.calendar.totalHolidays}} {{'days' | translate}}
+                </vn-auto>
+            </vn-vertical>
+            <vn-color-legend data="$ctrl.legends"></vn-color-legend>
+        </vn-vertical>
+    </vn-side-menu>
+</div>
\ No newline at end of file
diff --git a/modules/worker/front/calendar/index.js b/modules/worker/front/calendar/index.js
index bfb313630..d855d97b6 100644
--- a/modules/worker/front/calendar/index.js
+++ b/modules/worker/front/calendar/index.js
@@ -106,6 +106,24 @@ class Controller {
 
         return months;
     }
+
+    get absenceTypes() {
+        return this._absenceTypes;
+    }
+
+    set absenceTypes(value) {
+        if (value) {
+            this._absenceTypes = value;
+            this.legends = [];
+            this._absenceTypes.forEach(absenceType => {
+                let legend = {};
+                legend.id = absenceType.id;
+                legend.color = absenceType.rgb;
+                legend.name = absenceType.name;
+                this.legends.push(legend);
+            });
+        }
+    }
 }
 
 Controller.$inject = ['$scope', '$http'];
diff --git a/modules/worker/front/calendar/index.spec.js b/modules/worker/front/calendar/index.spec.js
index d8f42f762..194ea8f8b 100644
--- a/modules/worker/front/calendar/index.spec.js
+++ b/modules/worker/front/calendar/index.spec.js
@@ -85,7 +85,7 @@ describe('Worker', () => {
         });
 
         describe('setHolidays()', () => {
-            it(`should `, () => {
+            it(`should set holidays`, () => {
                 const data = {holidays: [
                     {dated: new Date(), detail: {description: 'New year'}},
                     {dated: new Date(), detail: {description: 'Easter'}}
@@ -99,7 +99,7 @@ describe('Worker', () => {
         });
 
         describe('setWorkerCalendar()', () => {
-            it(`should `, () => {
+            it(`should set absences of differente types`, () => {
                 const data = {absences: [
                     {dated: new Date(), absenceType: {name: 'Holiday', rgb: '#000'}},
                     {dated: new Date(), absenceType: {name: 'Leave', rgb: '#000'}}
@@ -113,5 +113,35 @@ describe('Worker', () => {
                 expect(controller.events[1].style).toBeDefined();
             });
         });
+
+        describe('absenceTypes() setter', () => {
+            it(`should set the absence types in the controller`, () => {
+                const absenceTypes = [
+                    {id: 1, name: 'Holiday', rgb: '#000'},
+                    {id: 2, name: 'Leave', rgb: '#000'}
+                ];
+
+                expect(controller._absenceTypes).not.toBeDefined();
+
+                controller.absenceTypes = absenceTypes;
+
+                expect(controller._absenceTypes.length).toEqual(2);
+            });
+
+            it(`should set the absence types in the controller as formated legends`, () => {
+                const absenceTypes = [
+                    {id: 1, name: 'Holiday', rgb: '#000'},
+                    {id: 2, name: 'Leave', rgb: '#000'}
+                ];
+
+                expect(controller.legends).not.toBeDefined();
+
+                controller.absenceTypes = absenceTypes;
+
+                expect(controller.legends.length).toEqual(2);
+                expect(controller.legends[0].color).toBeDefined();
+                expect(controller.legends[1].color).toBeDefined();
+            });
+        });
     });
 });