- updated style

resources/js/Shared/Widgets/Calendar/DayComponent.vue

@@ -1,6 +1,20 @@
 <template>
   <div
-    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
+    class="box-border"
+    :class="[
+      day.isCurrentMonth ? {
+        'bg-red-100': day.isWeekend,
+        'bg-white hover:bg-blumilk-25': !day.isWeekend && !day.isHoliday,
+        'bg-red-100 text-red-800': day.isHoliday || day.isWeekend
+      } : [
+        'bg-gray-50 text-gray-500',
+        {
+          'bg-red-50': day.isWeekend
+        }
+      ],
+      day.isHoliday && 'font-bold cursor-default',
+      (day.isVacation || day.isPendingVacation) && `border-b-4 border-dashed ${getVacationBorder(day)}`
+    ]"
   >
     <Popper
       v-if="day.isHoliday"
@@ -13,7 +27,7 @@
     >
       <time
         :datetime="day.date"
-        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white', 'text-red-600' ]"
+        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
       >
         {{ day.dayNumber }}
       </time>
@@ -44,9 +58,11 @@
     </Popper>
     <div
       v-else-if="day.isWeekend"
+      class="text-red-800"
     >
       <time
         :datetime="day.date"
+        class="cursor-default"
         :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
       >
         {{ day.dayNumber }}

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -131,7 +131,7 @@
             :key="index"
             :day="day"
             class="flex flex-col relative py-2 px-3"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
+            :class="{ 'day': calendarState.viewMode.isWeek }"
             :get-holiday-description="getHolidayDescription"
             :get-vacation-border="getVacationBorder"
             :get-vacation-info="getVacationInfo"