From c042a24ce39c82196c2a2fe0d36bb60f5e7ace7c Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:14 +0000
Subject: [PATCH] fix: weekend highlight in spanning records

---
 .../smartsheet/calendar/DateTimeSpanningContainer.vue | 11 +++++++++--
 .../components/smartsheet/calendar/MonthView.vue      |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index adc3c28df8..a2860eb206 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -474,7 +474,7 @@ defineExpose({
     <div
       ref="container"
       :style="{
-        width: `calc(100% - 66px)`,
+        width: `calc(100% - ${activeCalendarView === 'week' ? '64' : '66'}px)`,
       }"
       :class="{
         'border-gray-100': activeCalendarView === 'day',
@@ -484,7 +484,14 @@ defineExpose({
       }"
       class="relative border-l-1 transition-all overflow-y-scroll z-30"
     >
-      <div class="pointer-events-none inset-y-0 relative">
+      <div class="pointer-events-none h-full inset-y-0 relative">
+        <div
+          v-if="maxVisibleDays === 7"
+          class="absolute !right-0 h-full bg-gray-100 inset-y-0"
+          :style="{
+            width: `${(containerWidth / 7) * 2}px`,
+          }"
+        ></div>
         <template v-for="(record, id) in calendarData" :key="id">
           <div
             v-if="record.rowMeta.style?.display !== 'none'"
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 9f86042c31..2acf8094e7 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -107,7 +107,7 @@ const calendarData = computed(() => {
   const firstDayToDisplay = startOfMonth.startOf('week').add(firstDayOffset, 'day')
   const today = dayjs()
 
-  const daysInView = Math.max(
+  const daysInView = Math.min(
     35,
     Math.ceil((startOfMonth.daysInMonth() + startOfMonth.day() + (isMondayFirst.value ? 0 : 1)) / 7) * 7,
   )