fix: WorkerCalendarItem

src/pages/Worker/Card/WorkerCalendar.vue

@@ -82,6 +82,7 @@ const onFetchAbsences = (data) => {
                 type: type.code,
                 absenceId: absence.id,
                 isFestive: false,
+                isHoliday: false,
             });
         });
     }

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -126,7 +126,7 @@ const handleEventSelected = (event, { year, month, day }) => {
     }
 
     const date = new Date(year, month - 1, day);
-    if (!event.absenceId) createEvent(date);
+    if (!event?.absenceId) createEvent(date);
     else if (event.type == props.absenceType.code) deleteEvent(event, date);
     else editEvent(event);
 };
@@ -136,24 +136,37 @@ const getEventByTimestamp = ({ year, month, day }) => {
     return props.events[stamp] || null;
 };
 
+const isFestive = (timestamp) => {
+    const event = getEventByTimestamp(timestamp);
+    if (!event) return false;
+
+    const { isFestive } = event;
+    return isFestive;
+};
 const getEventAttrs = (timestamp) => {
     const event = getEventByTimestamp(timestamp);
     if (!event) return {};
 
-    const { name, color, isFestive } = event;
+    const { name, color, isFestive, type } = event;
 
     // Atributos a asignar a cada slot que representa un evento en el calendario
 
     const attrs = {
         title: name,
-        style: color ? `background-color: ${color};` : '',
+        style:
+            color && type !== 'holiday'
+                ? `background-color: ${color};`
+                : 'background-color:#3d3d3d;',
         label: timestamp.day,
     };
 
     if (isFestive) {
         attrs.class = '--festive';
         attrs.label = event.absenceId ? timestamp.day : '';
+        // attrs.style = 'color: red';
     }
+    // if(type === 'holiday')
+    else attrs.class = `--${type}`;
 
     return attrs;
 };
@@ -203,7 +216,6 @@ watch(_year, (newValue) => {
                 <template #day="{ scope: { timestamp } }">
                     <!-- Este slot representa cada día del calendario y muestra un botón representando el correspondiente evento -->
                     <QBtn
-                        v-if="getEventByTimestamp(timestamp)"
                         v-bind="{ ...getEventAttrs(timestamp) }"
                         @click="
                             handleEventSelected(getEventByTimestamp(timestamp), timestamp)
@@ -239,6 +251,11 @@ watch(_year, (newValue) => {
     &.--festive {
         border: 2px solid $negative;
     }
+    &.--holiday {
+        & > span:nth-child(2) .block {
+            color: $negative;
+        }
+    }
 
     &:hover {
         opacity: 0.8;