From 3ccad671ccfd161824fe64756af62256bb34f6cb Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:10 +0000
Subject: [PATCH 01/50] feat: enable calendar end date

---
 packages/nc-gui/components/dlg/ViewCreate.vue | 124 +++++++++---------
 .../smartsheet/toolbar/Calendar/Range.vue     |   8 +-
 2 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index d34d373bf2..da86e7a463 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -1017,71 +1017,77 @@ const getPluralName = (name: string) => {
                   </div>
                 </a-select-option>
               </NcSelect>
-              <!--            <div
-              v-if="range.fk_to_column_id === null && isEeUI"
-              class="cursor-pointer flex items-center text-gray-800 gap-1"
-              @click="range.fk_to_column_id = undefined"
-            >
-              <component :is="iconMap.plus" class="h-4 w-4" />
-              {{ $t('activity.addEndDate') }}
-            </div>
-            <template v-else-if="isEeUI">
-              <span>
-                {{ $t('activity.withEndDate') }}
-              </span>
-
-              <div class="flex">
-                <NcSelect
-                  v-model:value="range.fk_to_column_id"
-                  :disabled="isMetaLoading"
-                  :loading="isMetaLoading"
-                  :placeholder="$t('placenc-to-seleholder.notSelected')"
-                  class="!rounded-r-none ct"
-                >
-                  <a-select-option
-                    v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
-                      // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
-                      // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
-
-                      const firstRange = viewSelectFieldOptions.find((f) => f.value === form.calendar_range[0].fk_from_column_id)
-                      return firstRange?.uidt === f.uidt
-                    })"
-                    :key="id"
-                    :value="option.value"
+              <div
+                v-if="range.fk_to_column_id === null && isEeUI"
+                class="cursor-pointer flex items-center text-gray-800 gap-1"
+                @click="range.fk_to_column_id = undefined"
+              >
+                <component :is="iconMap.plus" class="h-4 w-4" />
+                {{ $t('activity.addEndDate') }}
+              </div>
+              <template v-else-if="isEeUI">
+                <span>
+                  {{ $t('activity.withEndDate') }}
+                </span>
+
+                <div class="flex">
+                  <NcSelect
+                    v-model:value="range.fk_to_column_id"
+                    :disabled="isMetaLoading"
+                    :loading="isMetaLoading"
+                    :placeholder="$t('placeholder.notSelected')"
+                    class="!rounded-r-none ct"
                   >
-                    <div class="flex items-center">
-                      <SmartsheetHeaderIcon :column="option" />
-                      <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                        <template #title>{{ option.label }}</template>
-                        {{ option.label }}
-                      </NcTooltip>
-                    </div>
-                  </a-select-option>
-                </NcSelect>
-                <NcButton class="!rounded-l-none !border-l-0" size="small" type="secondary" @click="range.fk_to_column_id = null">
-                  <component :is="iconMap.delete" class="h-4 w-4" />
+                    <a-select-option
+                      v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
+                        // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
+                        // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
+
+                        const firstRange = viewSelectFieldOptions.find(
+                          (f) => f.value === form.calendar_range[0].fk_from_column_id,
+                        )
+                        return firstRange?.uidt === f.uidt
+                      })"
+                      :key="id"
+                      :value="option.value"
+                    >
+                      <div class="flex items-center">
+                        <SmartsheetHeaderIcon :column="option" />
+                        <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
+                          <template #title>{{ option.label }}</template>
+                          {{ option.label }}
+                        </NcTooltip>
+                      </div>
+                    </a-select-option>
+                  </NcSelect>
+                  <NcButton
+                    class="!rounded-l-none !border-l-0"
+                    size="small"
+                    type="secondary"
+                    @click="range.fk_to_column_id = null"
+                  >
+                    <component :is="iconMap.delete" class="h-4 w-4" />
+                  </NcButton>
+                </div>
+                <NcButton
+                  v-if="index !== 0"
+                  size="small"
+                  type="secondary"
+                  @click="
+                    () => {
+                      form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
+                    }
+                  "
+                >
+                  <component :is="iconMap.close" />
                 </NcButton>
-              </div>
-              <NcButton
-                v-if="index !== 0"
-                size="small"
-                type="secondary"
-                @click="
-                  () => {
-                    form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
-                  }
-                "
-              >
-                <component :is="iconMap.close" />
-              </NcButton>
-            </template>
-          </div> -->
+              </template>
+            </div>
 
-              <!--          <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
+            <!--          <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
             <component :is="iconMap.plus" />
             Add another date field
           </NcButton> -->
-            </div>
 
             <div
               v-if="isCalendarReadonly(form.calendar_range)"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
index 9c6f9e979b..36029db49c 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -134,12 +134,11 @@ const saveCalendarRanges = async () => {
   }
 }
 
-/*
 const removeRange = async (id: number) => {
   _calendar_ranges.value = _calendar_ranges.value.filter((_, i) => i !== id)
   await saveCalendarRanges()
 }
-
+/*
 const saveCalendarRange = async (range: CalendarRangeType, value?) => {
   range.fk_to_column_id = value
   await saveCalendarRanges()
@@ -177,7 +176,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
     </NcTooltip>
 
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="w-98 space-y-6 rounded-2xl p-4" data-testid="nc-calendar-range-menu" @click.stop>
+      <div v-if="calendarRangeDropdown" class="w-138 space-y-6 rounded-2xl p-6" data-testid="nc-calendar-range-menu" @click.stop>
         <div
           v-for="(range, id) in _calendar_ranges"
           :key="id"
@@ -223,7 +222,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             </a-select-option>
           </NcSelect>
 
-          <!--          <div
+          <div
             v-if="range.fk_to_column_id === null && isEeUI"
             class="flex cursor-pointer flex text-gray-800 items-center gap-1"
             data-testid="nc-calendar-range-add-end-date"
@@ -271,7 +270,6 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
           <NcButton v-if="id !== 0" size="small" type="secondary" @click="removeRange(id)">
             <component :is="iconMap.close" />
           </NcButton>
-            -->
         </div>
 
         <div v-if="!isSetup" class="flex items-center gap-2 !mt-2">

From c13cb010480e3e30d8e3383de4216134c15e0d16 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:10 +0000
Subject: [PATCH 02/50] fix: update dialog

---
 packages/nc-gui/components/dlg/ViewCreate.vue | 47 ++++++++++---------
 .../smartsheet/toolbar/Calendar/Range.vue     | 27 ++++++-----
 2 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index da86e7a463..6dec350d69 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -977,10 +977,10 @@ const getPluralName = (name: string) => {
             />
           </a-form-item>
           <template v-if="form.type === ViewTypes.CALENDAR && !form.copy_from_id">
-            <div v-for="(range, index) in form.calendar_range" :key="`range-${index}`" class="flex w-full items-center gap-2">
-              <span class="text-gray-800">
+            <div v-for="(range, index) in form.calendar_range" :key="`range-${index}`" class="flex flex-col w-full gap-2">
+              <div class="text-gray-800">
                 {{ $t('labels.organiseBy') }}
-              </span>
+              </div>
               <NcSelect
                 v-model:value="range.fk_from_column_id"
                 :disabled="isMetaLoading"
@@ -1017,14 +1017,19 @@ const getPluralName = (name: string) => {
                   </div>
                 </a-select-option>
               </NcSelect>
-              <div
-                v-if="range.fk_to_column_id === null && isEeUI"
-                class="cursor-pointer flex items-center text-gray-800 gap-1"
+
+              <NcButton
+                v-if="range.fk_to_column_id === null"
+                size="small"
+                class="!border-none w-28"
+                type="secondary"
+                :disabled="!isEeUI"
                 @click="range.fk_to_column_id = undefined"
               >
                 <component :is="iconMap.plus" class="h-4 w-4" />
                 {{ $t('activity.addEndDate') }}
-              </div>
+              </NcButton>
+
               <template v-else-if="isEeUI">
                 <span>
                   {{ $t('activity.withEndDate') }}
@@ -1036,7 +1041,7 @@ const getPluralName = (name: string) => {
                     :disabled="isMetaLoading"
                     :loading="isMetaLoading"
                     :placeholder="$t('placeholder.notSelected')"
-                    class="!rounded-r-none ct"
+                    class="nc-to-select flex-1"
                   >
                     <a-select-option
                       v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
@@ -1046,7 +1051,7 @@ const getPluralName = (name: string) => {
                         const firstRange = viewSelectFieldOptions.find(
                           (f) => f.value === form.calendar_range[0].fk_from_column_id,
                         )
-                        return firstRange?.uidt === f.uidt
+                        return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
                       })"
                       :key="id"
                       :value="option.value"
@@ -1435,7 +1440,6 @@ const getPluralName = (name: string) => {
 .nc-input-text-area {
   padding-block: 8px !important;
 }
-
 .ant-form-item-required {
   @apply !text-gray-800 font-medium;
   &:before {
@@ -1443,14 +1447,6 @@ const getPluralName = (name: string) => {
   }
 }
 
-.nc-from-select .ant-select-selector {
-  @apply !mr-2;
-}
-
-.nc-to-select .ant-select-selector {
-  @apply !rounded-r-none;
-}
-
 .ant-form-item {
   @apply !mb-0;
 }
@@ -1471,9 +1467,11 @@ const getPluralName = (name: string) => {
     @apply content-[''] m-0;
   }
 }
-:deep(.ant-select) {
-  .ant-select-selector {
-    @apply !rounded-lg;
+:not(.nc-to-select) {
+  :deep(.ant-select) {
+    .ant-select-selector {
+      @apply !rounded-lg;
+    }
   }
 }
 
@@ -1510,4 +1508,11 @@ const getPluralName = (name: string) => {
     @apply !rounded-5;
   }
 }
+
+:deep(.nc-to-select) {
+  .ant-select-selector {
+    @apply !rounded-r-none;
+    border-radius-right: 0rem !important;
+  }
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
index 36029db49c..1f6512ac15 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -138,11 +138,11 @@ const removeRange = async (id: number) => {
   _calendar_ranges.value = _calendar_ranges.value.filter((_, i) => i !== id)
   await saveCalendarRanges()
 }
-/*
+
 const saveCalendarRange = async (range: CalendarRangeType, value?) => {
   range.fk_to_column_id = value
   await saveCalendarRanges()
-} */
+}
 </script>
 
 <template>
@@ -176,11 +176,11 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
     </NcTooltip>
 
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="w-138 space-y-6 rounded-2xl p-6" data-testid="nc-calendar-range-menu" @click.stop>
+      <div v-if="calendarRangeDropdown" class="w-108 space-y-6 rounded-2xl p-6" data-testid="nc-calendar-range-menu" @click.stop>
         <div
           v-for="(range, id) in _calendar_ranges"
           :key="id"
-          class="flex w-full gap-2 mb-2 items-center"
+          class="flex flex-col w-full gap-2 mb-2"
           data-testid="nc-calendar-range-option"
         >
           <span>
@@ -222,15 +222,18 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             </a-select-option>
           </NcSelect>
 
-          <div
-            v-if="range.fk_to_column_id === null && isEeUI"
-            class="flex cursor-pointer flex text-gray-800 items-center gap-1"
+          <NcButton
+            v-if="range.fk_to_column_id === null"
+            size="small"
             data-testid="nc-calendar-range-add-end-date"
-            @click="saveCalendarRange(range, undefined)"
+            class="!border-none w-28"
+            type="secondary"
+            :disabled="!isEeUI"
+            @click="range.fk_to_column_id = undefined"
           >
             <component :is="iconMap.plus" class="h-4 w-4" />
             {{ $t('activity.addEndDate') }}
-          </div>
+          </NcButton>
           <template v-else-if="isEeUI">
             <span>
               {{ $t('activity.withEndDate') }}
@@ -240,14 +243,14 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
                 v-model:value="range.fk_to_column_id"
                 :disabled="!range.fk_from_column_id"
                 :placeholder="$t('placeholder.notSelected')"
-                class="!rounded-r-none nc-to-select"
+                class="!rounded-r-none flex-1 nc-to-select"
                 data-testid="nc-calendar-range-to-field-select"
                 @change="saveCalendarRanges"
               >
                 <a-select-option
                   v-for="(option, opId) in [...dateFieldOptions].filter((f) => {
                     const firstRange = dateFieldOptions.find((f) => f.value === calendarRange[0].fk_from_column_id)
-                    return firstRange?.uidt === f.uidt
+                    return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
                   })"
                   :key="opId"
                   :value="option.value"
@@ -294,7 +297,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
   </NcDropdown>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .nc-to-select .ant-select-selector {
   @apply !rounded-r-none;
 }

From da049dafb1c5ae0b44c17c6eec66dd302f4afc59 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:10 +0000
Subject: [PATCH 03/50] fix: month view fix range with hide weekends

---
 .../components/smartsheet/calendar/MonthView.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 39cec46048..33725c2cd7 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -241,10 +241,24 @@ const recordsToDisplay = computed<{
         ) {
           // We update the record start to currentWeekStart if it is before the start date
           // and record end to currentWeekEnd if it is after the end date
-          const currentWeekEnd = currentWeekStart.endOf('week')
+          let currentWeekEnd = currentWeekStart.endOf('week')
+
+          // If the maxVisibleDays is 5, we skip the weekends
+          if (maxVisibleDays.value === 5) {
+            currentWeekEnd = currentWeekEnd.subtract(2, 'day')
+          }
+
           const recordStart = currentWeekStart.isBefore(startDate) ? startDate : currentWeekStart
           const recordEnd = currentWeekEnd.isAfter(endDate) ? endDate : currentWeekEnd
 
+          const dayIndex = recordStart.day()
+
+          // If the record spans multiple weeks and the maxVisibleDays is 5 and startDate is weekedend, we skip the weekends
+          if (maxVisibleDays.value === 5 && (dayIndex === 0 || dayIndex === 6)) {
+            currentWeekStart = currentWeekStart.add(1, 'week')
+            continue
+          }
+
           if (recordEnd.isBefore(dates.value[0][0])) {
             currentWeekStart = currentWeekStart.add(1, 'week')
             continue

From 493bde5c07c2c2d7db35de09abcf57b8700ed311 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:10 +0000
Subject: [PATCH 04/50] fix: month view fix range with hide weekends

---
 .../components/smartsheet/PlainCell.vue       |   2 +-
 .../smartsheet/calendar/MonthView.vue         | 191 +++++++-----------
 2 files changed, 75 insertions(+), 118 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/PlainCell.vue b/packages/nc-gui/components/smartsheet/PlainCell.vue
index 04f751d588..a8ff3407fd 100644
--- a/packages/nc-gui/components/smartsheet/PlainCell.vue
+++ b/packages/nc-gui/components/smartsheet/PlainCell.vue
@@ -361,7 +361,7 @@ const parseValue = (value: any, col: ColumnType): string => {
     class="plain-cell before:px-1"
     :class="{
       '!font-bold': bold,
-      'italic': italic,
+      '!italic': italic,
       'underline': underline,
     }"
     data-testid="nc-plain-cell"
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 33725c2cd7..5edb76602f 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -127,26 +127,61 @@ const recordsToDisplay = computed<{
   records: Row[]
   count: { [p: string]: { overflow: boolean; count: number; overflowCount: number } }
 }>(() => {
-  if (!dates.value || !calendarRange.value) return []
+  if (!dates.value || !calendarRange.value) return { records: [], count: {} }
 
   const perWidth = gridContainerWidth.value / maxVisibleDays.value
   const perHeight = gridContainerHeight.value / dates.value.length
   const perRecordHeight = 24
 
   const spaceBetweenRecords = 27
+  const maxLanes = Math.floor((perHeight - spaceBetweenRecords) / (perRecordHeight + 4))
 
-  // This object is used to keep track of the number of records in a day
-  // The key is the date in the format YYYY-MM-DD
+  // Track records and lanes for each day
   const recordsInDay: {
     [key: string]: {
       overflow: boolean
       count: number
       overflowCount: number
+      lanes: boolean[]
     }
   } = {}
-  if (!calendarRange.value) return []
+
+  const findAvailableLane = (dateKey: string, duration: number = 1): number => {
+    if (!recordsInDay[dateKey]) {
+      recordsInDay[dateKey] = { overflow: false, count: 0, overflowCount: 0, lanes: [] }
+    }
+
+    const { lanes } = recordsInDay[dateKey]
+    for (let i = 0; i < maxLanes; i++) {
+      if (!lanes[i]) {
+        // Check if the lane is available for the entire duration
+        let isAvailable = true
+        for (let j = 0; j < duration; j++) {
+          const checkDate = dayjs(dateKey).add(j, 'day').format('YYYY-MM-DD')
+          if (recordsInDay[checkDate]?.lanes[i]) {
+            isAvailable = false
+            break
+          }
+        }
+        if (isAvailable) return i
+      }
+    }
+    return -1 // No available lane
+  }
+
+  const occupyLane = (dateKey: string, lane: number, duration: number = 1) => {
+    for (let i = 0; i < duration; i++) {
+      const occupyDate = dayjs(dateKey).add(i, 'day').format('YYYY-MM-DD')
+      if (!recordsInDay[occupyDate]) {
+        recordsInDay[occupyDate] = { overflow: false, count: 0, overflowCount: 0, lanes: [] }
+      }
+      recordsInDay[occupyDate].lanes[lane] = true
+      recordsInDay[occupyDate].count++
+    }
+  }
 
   const recordsToDisplay: Array<Row> = []
+
   calendarRange.value.forEach((range) => {
     const startCol = range.fk_from_col
     const endCol = range.fk_to_col
@@ -170,49 +205,30 @@ const recordsToDisplay = computed<{
         const startDate = dayjs(record.row[startCol.title!])
         const dateKey = startDate.format('YYYY-MM-DD')
 
-        if (!recordsInDay[dateKey]) {
-          recordsInDay[dateKey] = { overflow: false, count: 0, overflowCount: 0 }
+        const lane = findAvailableLane(dateKey)
+        if (lane === -1) {
+          recordsInDay[dateKey].overflow = true
+          recordsInDay[dateKey].overflowCount++
+          return // Skip this record as there's no available lane
         }
-        recordsInDay[dateKey].count++
-        const id = record.rowMeta.id ?? generateRandomNumber()
 
-        // Find the index of the week from the dates array
-        const weekIndex = dates.value.findIndex((week) => week.some((day) => dayjs(day).isSame(startDate, 'day')))
+        occupyLane(dateKey, lane)
 
-        // Find the index of the day from the dates array
-        const dayIndex = (dates.value[weekIndex] ?? []).findIndex((day) => {
-          return dayjs(day).isSame(startDate, 'day')
-        })
+        const weekIndex = dates.value.findIndex((week) => week.some((day) => dayjs(day).isSame(startDate, 'day')))
+        const dayIndex = (dates.value[weekIndex] ?? []).findIndex((day) => dayjs(day).isSame(startDate, 'day'))
 
         const style: Partial<CSSStyleDeclaration> = {
           left: `${dayIndex * perWidth}px`,
           width: `${perWidth}px`,
+          top: `${weekIndex * perHeight + (spaceBetweenRecords + lane * (perRecordHeight + 4))}px`,
         }
 
-        if (maxVisibleDays.value === 5) {
-          if (dayIndex === 5 || dayIndex === 6) {
-            style.display = 'none'
-          }
-        }
-
-        // Number of records in that day
-        const recordIndex = recordsInDay[dateKey].count
-
-        // The top is calculated from the week index and the record index
-        // If the record in 1st week and no record in that date them the top will be 0
-        const top = weekIndex * perHeight + spaceBetweenRecords + (recordIndex - 1) * (perRecordHeight + 4)
-
-        // The 25 is obtained from the trial and error
-        const heightRequired = perRecordHeight * recordIndex + spaceBetweenRecords + 12
-
-        if (heightRequired > perHeight) {
+        if (maxVisibleDays.value === 5 && (dayIndex === 5 || dayIndex === 6)) {
           style.display = 'none'
-          recordsInDay[dateKey].overflow = true
-          recordsInDay[dateKey].overflowCount++
-        } else {
-          style.top = `${top}px`
         }
 
+        const id = record.rowMeta.id ?? Math.random().toString(36).substr(2, 9)
+
         recordsToDisplay.push({
           ...record,
           rowMeta: {
@@ -224,7 +240,7 @@ const recordsToDisplay = computed<{
           },
         })
       } else if (startCol && endCol) {
-        // If the range specifies fromCol and endCol
+        // Multi-day event logic
         const startDate = dayjs(record.row[startCol.title!])
         const endDate = dayjs(record.row[endCol.title!])
 
@@ -250,89 +266,46 @@ const recordsToDisplay = computed<{
 
           const recordStart = currentWeekStart.isBefore(startDate) ? startDate : currentWeekStart
           const recordEnd = currentWeekEnd.isAfter(endDate) ? endDate : currentWeekEnd
+          const duration = recordEnd.diff(recordStart, 'day') + 1
 
-          const dayIndex = recordStart.day()
-
-          // If the record spans multiple weeks and the maxVisibleDays is 5 and startDate is weekedend, we skip the weekends
-          if (maxVisibleDays.value === 5 && (dayIndex === 0 || dayIndex === 6)) {
-            currentWeekStart = currentWeekStart.add(1, 'week')
-            continue
-          }
+          const dateKey = recordStart.format('YYYY-MM-DD')
+          const lane = findAvailableLane(dateKey, duration)
 
-          if (recordEnd.isBefore(dates.value[0][0])) {
+          if (lane === -1) {
+            for (let i = 0; i < duration; i++) {
+              const overflowDate = recordStart.add(i, 'day').format('YYYY-MM-DD')
+              if (recordsInDay[overflowDate]) {
+                recordsInDay[overflowDate].overflow = true
+                recordsInDay[overflowDate].overflowCount++
+              }
+            }
             currentWeekStart = currentWeekStart.add(1, 'week')
             continue
           }
 
-          // Update the recordsInDay object to keep track of the number of records in a day
-          let day = recordStart.clone()
-          while (day.isSameOrBefore(recordEnd)) {
-            const dateKey = day.format('YYYY-MM-DD')
+          occupyLane(dateKey, lane, duration)
 
-            if (!recordsInDay[dateKey]) {
-              recordsInDay[dateKey] = { overflow: false, count: 0, overflowCount: 0 }
-            }
-            recordsInDay[dateKey].count++
-            day = day.add(1, 'day')
-          }
+          const weekIndex = dates.value.findIndex((week) => week.some((day) => dayjs(day).isSame(recordStart, 'day')))
+          const startDayIndex = (dates.value[weekIndex] ?? []).findIndex((day) => dayjs(day).isSame(recordStart, 'day'))
+          const endDayIndex = (dates.value[weekIndex] ?? []).findIndex((day) => dayjs(day).isSame(recordEnd, 'day'))
 
-          // Find the index of the week from the dates array
-          const weekIndex = Math.max(
-            dates.value.findIndex((week) => {
-              return (
-                week.findIndex((day) => {
-                  return dayjs(day).isSame(recordStart, 'day')
-                }) !== -1
-              )
-            }),
-            0,
-          )
-
-          let maxRecordCount = 0
-
-          // Find the maximum number of records in a day in that week
-          for (let i = 0; i < (dates.value[weekIndex] ?? []).length; i++) {
-            const day = dates.value[weekIndex][i]
-
-            const dateKey = dayjs(day).format('YYYY-MM-DD')
-            if (!recordsInDay[dateKey]) {
-              recordsInDay[dateKey] = {
-                count: 0,
-                overflow: false,
-                overflowCount: 0,
-              }
-            }
-            maxRecordCount = Math.max(maxRecordCount, recordsInDay[dateKey].count)
-          }
-
-          const startDayIndex = Math.max(
-            (dates.value[weekIndex] ?? []).findIndex((day) => dayjs(day).isSame(recordStart, 'day')),
-            0,
-          )
-          const endDayIndex = Math.max(
-            (dates.value[weekIndex] ?? []).findIndex((day) => dayjs(day).isSame(recordEnd, 'day')),
-            0,
-          )
-
-          // The left and width of the record is calculated based on the start and end day index
           const style: Partial<CSSStyleDeclaration> = {
             left: `${startDayIndex * perWidth}px`,
             width: `${(endDayIndex - startDayIndex + 1) * perWidth}px`,
+            top: `${weekIndex * perHeight + (spaceBetweenRecords + lane * (perRecordHeight + 4))}px`,
           }
 
-          // The top is calculated from the week index and the record index
-          // If the record in 1st week and no record in that date them the top will be 0
-          // If the record in 1st week and 1 record in that date then the top will be perRecordHeight + spaceBetweenRecords
-          const top = weekIndex * perHeight + spaceBetweenRecords + Math.max(maxRecordCount - 1, 0) * (perRecordHeight + 4)
-          const heightRequired = perRecordHeight * Math.max(maxRecordCount, 0) + spaceBetweenRecords + 12
-
           let position = 'rounded'
           // Here we are checking if the startDay is before all the dates shown in UI rather that the current month
           const isStartMonthBeforeCurrentWeek = dates.value[weekIndex - 1]
             ? dayjs(dates.value[weekIndex - 1][0]).isBefore(startDate, 'month')
             : false
 
-          if (startDate.isSame(currentWeekStart, 'week') && endDate.isSame(currentWeekEnd, 'week')) {
+          if (
+            startDate.isSame(currentWeekStart, 'week') &&
+            endDate.isSame(currentWeekEnd, 'week') &&
+            endDate.isSameOrBefore(currentWeekEnd) // Weekend check
+          ) {
             position = 'rounded'
           } else if (startDate.isSame(recordStart, 'week')) {
             if (isStartMonthBeforeCurrentWeek) {
@@ -346,23 +319,6 @@ const recordsToDisplay = computed<{
             position = 'none'
           }
 
-          // If the height required is more than the height of the week, we hide the record
-          // and update the recordsInDay object for all the spanned days
-          if (heightRequired > perHeight) {
-            style.display = 'none'
-            for (let i = startDayIndex; i <= endDayIndex; i++) {
-              const week = dates.value[weekIndex]
-              if (!week) continue
-              const day = week[i]
-              const dateKey = dayjs(day).format('YYYY-MM-DD')
-              if (!recordsInDay[dateKey]) continue
-              recordsInDay[dateKey].overflow = true
-              recordsInDay[dateKey].overflowCount++
-            }
-          } else {
-            style.top = `${top}px`
-          }
-
           recordsToDisplay.push({
             ...record,
             rowMeta: {
@@ -373,6 +329,7 @@ const recordsToDisplay = computed<{
               id,
             },
           })
+
           currentWeekStart = currentWeekStart.add(1, 'week')
         }
       }

From fb548b29d08727f0bd4d5db79f81c267233cd977 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:10 +0000
Subject: [PATCH 05/50] fix: month view fix range with hide weekends

---
 .../components/smartsheet/calendar/MonthView.vue       | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 5edb76602f..7403935a3e 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -705,8 +705,7 @@ const addRecord = (date: dayjs.Dayjs) => {
             v-if="maxVisibleDays === 5 ? day.get('day') !== 0 && day.get('day') !== 6 : true"
             :key="`${weekIndex}-${dateIndex}`"
             :class="{
-              'border-brand-500 border-1 !border-r-1 border-b-1':
-                isDateSelected(day) || (focusedDate && dayjs(day).isSame(focusedDate, 'day')),
+              'selected-date': isDateSelected(day) || (focusedDate && dayjs(day).isSame(focusedDate, 'day')),
               '!text-gray-400': !isDayInPagedMonth(day),
               '!bg-gray-50 !hover:bg-gray-100': day.get('day') === 0 || day.get('day') === 6,
               'border-t-1': weekIndex === 0,
@@ -813,7 +812,7 @@ const addRecord = (date: dayjs.Dayjs) => {
         </template>
       </div>
     </div>
-    <div class="absolute inset-0 pointer-events-none mt-8 pb-7.5" data-testid="nc-calendar-month-record-container">
+    <div class="absolute inset-0 z-2 pointer-events-none mt-8 pb-7.5" data-testid="nc-calendar-month-record-container">
       <template v-for="(record, recordIndex) in recordsToDisplay.records" :key="recordIndex">
         <div
           v-if="record.rowMeta.style?.display !== 'none'"
@@ -871,4 +870,9 @@ const addRecord = (date: dayjs.Dayjs) => {
 .grid-cols-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
+
+.selected-date {
+  z-index: 2;
+  box-shadow: 0 0 0 2px #3366ff !important;
+}
 </style>

From d76bb0f3c4dcf352ba21fcee168d3225d55afcec Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:10 +0000
Subject: [PATCH 06/50] fix: week view date view

---
 .../calendar/WeekView/DateField.vue           | 215 +++++-------------
 1 file changed, 63 insertions(+), 152 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index 224310c55d..de11f58c2c 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -98,170 +98,81 @@ const findFirstSuitableRow = (recordsInDay: any, startDayIndex: number, spanDays
 }
 
 const isInRange = (date: dayjs.Dayjs) => {
+  const rangeEndDate =
+    maxVisibleDays.value === 5 ? dayjs(selectedDateRange.value.end).subtract(2, 'day') : dayjs(selectedDateRange.value.end)
+
   return (
-    date &&
-    date.isBetween(
-      dayjs(selectedDateRange.value.start).startOf('day'),
-      dayjs(selectedDateRange.value.end).endOf('day'),
-      'day',
-      '[]',
-    )
+    date && date.isBetween(dayjs(selectedDateRange.value.start).startOf('day'), dayjs(rangeEndDate).endOf('day'), 'day', '[]')
   )
 }
 
 const calendarData = computed(() => {
   if (!formattedData.value || !calendarRange.value) return []
 
-  // We use the recordsInDay object to keep track of which columns are occupied for each day
-  // This is used to calculate the position of the records in the calendar
-  // The key is the day index (0-6) and the value is an object with the row index as the key and a boolean as the value
-  // Since no hours are considered, the rowIndex will be sufficient to calculate the position
-  const recordsInDay: {
-    [key: number]: {
-      [key: number]: boolean
-    }
-  } = {
-    0: {},
-    1: {},
-    2: {},
-    3: {},
-    4: {},
-    5: {},
-    6: {},
-  }
-
-  const recordsInRange: Array<Row> = []
+  const recordsInDay = Array.from({ length: 7 }, () => ({})) as Record<number, Record<number, boolean>>
+  const recordsInRange = [] as Row[]
   const perDayWidth = containerWidth.value / maxVisibleDays.value
 
-  calendarRange.value.forEach((range) => {
-    const fromCol = range.fk_from_col
-    const toCol = range.fk_to_col
-    if (fromCol && toCol) {
-      // Filter out records that have an invalid date range
-      // i.e. the end date is before the start date
-
-      for (const record of [...formattedData.value].filter((r) => {
-        const startDate = dayjs(r.row[fromCol.title!])
-        const endDate = dayjs(r.row[toCol.title!])
-        if (!startDate.isValid() || !endDate.isValid()) return false
-        return !endDate.isBefore(startDate)
-      })) {
-        // Generate a unique id for the record if it doesn't have one
-        const id = record.rowMeta.id ?? generateRandomNumber()
-        let startDate = dayjs(record.row[fromCol.title!])
-        const ogStartDate = startDate.clone()
-        const endDate = dayjs(record.row[toCol.title!])
-
-        // If the start date is before the selected date range, we need to adjust the start date
-        if (startDate.isBefore(selectedDateRange.value.start)) {
-          startDate = dayjs(selectedDateRange.value.start)
-        }
-
-        const startDaysDiff = startDate.diff(selectedDateRange.value.start, 'day')
-
-        // Calculate the span of the record in days
-        let spanDays = Math.max(Math.min(endDate.diff(startDate, 'day'), 6) + 1, 1)
-
-        // If the end date is after the month of the selected date range, we need to adjust the span
-        if (endDate.isAfter(startDate, 'month')) {
-          spanDays = 7 - startDaysDiff
-        }
-
-        if (startDaysDiff > 0) {
-          spanDays = Math.min(spanDays, 7 - startDaysDiff)
-        }
-        const widthStyle = `calc(max(${spanDays} * ${perDayWidth}px, ${perDayWidth}px))`
-
-        let suitableRow = -1
-        // Find the first suitable row for the entire span
-        for (let i = 0; i < spanDays; i++) {
-          const dayIndex = startDaysDiff + i
-
-          if (!recordsInDay[dayIndex]) {
-            recordsInDay[dayIndex] = {}
-          }
-
-          if (suitableRow === -1) {
-            suitableRow = findFirstSuitableRow(recordsInDay, dayIndex, spanDays)
-          }
-        }
-
-        // Mark the suitable column as occupied for the entire span
-        for (let i = 0; i < spanDays; i++) {
-          const dayIndex = startDaysDiff + i
-          recordsInDay[dayIndex][suitableRow] = true
-        }
-
-        let position = 'none'
-
-        const isStartInRange = isInRange(ogStartDate)
-        const isEndInRange = isInRange(endDate)
-
-        // Calculate the position of the record in the calendar based on the start and end date
-        // The position can be 'none', 'leftRounded', 'rightRounded', 'rounded'
-        // This is used to assign the rounded corners to the records
-        if (isStartInRange && isEndInRange) {
-          position = 'rounded'
-        } else if (
-          startDate &&
-          endDate &&
-          startDate.isBefore(selectedDateRange.value.start) &&
-          endDate.isAfter(selectedDateRange.value.end)
-        ) {
-          position = 'none'
-        } else if (
-          startDate &&
-          endDate &&
-          (startDate.isAfter(selectedDateRange.value.end) || endDate.isBefore(selectedDateRange.value.start))
-        ) {
-          position = 'none'
-        } else if (isStartInRange) {
-          position = 'leftRounded'
-        } else if (isEndInRange) {
-          position = 'rightRounded'
-        }
-
-        recordsInRange.push({
-          ...record,
-          rowMeta: {
-            ...record.rowMeta,
-            range: range as any,
-            position,
-            id,
-            style: {
-              width: widthStyle,
-              left: `${startDaysDiff * perDayWidth}px`,
-              top: `${suitableRow * 28}px`,
-            },
-          },
-        })
+  calendarRange.value.forEach(({ fk_from_col, fk_to_col }) => {
+    if (!fk_from_col) return
+
+    const processRecord = (record: Row) => {
+      const id = record.rowMeta.id ?? generateRandomNumber()
+      let startDate = dayjs(record.row[fk_from_col.title!])
+      const ogStartDate = startDate.clone()
+      const endDate = fk_to_col ? dayjs(record.row[fk_to_col.title!]) : startDate
+
+      if (startDate.isBefore(selectedDateRange.value.start)) {
+        startDate = dayjs(selectedDateRange.value.start)
       }
-    } else if (fromCol) {
-      for (const record of formattedData.value) {
-        const id = record.rowMeta.id ?? generateRandomNumber()
-
-        const startDate = dayjs(record.row[fromCol.title!])
-        const startDaysDiff = Math.max(startDate.diff(selectedDateRange.value.start, 'day'), 0)
-
-        // Find the first suitable row for record. Here since the span is 1, we can use the findFirstSuitableRow function
-        const suitableRow = findFirstSuitableRow(recordsInDay, startDaysDiff, 1)
-        recordsInDay[startDaysDiff][suitableRow] = true
-
-        recordsInRange.push({
-          ...record,
-          rowMeta: {
-            ...record.rowMeta,
-            range: range as any,
-            id,
-            position: 'rounded',
-            style: {
-              width: `calc(${perDayWidth}px)`,
-              left: `${startDaysDiff * perDayWidth}px`,
-              top: `${suitableRow * 28}px`,
-            },
+
+      const startDaysDiff = startDate.diff(selectedDateRange.value.start, 'day')
+      const spanDays = fk_to_col
+        ? Math.min(Math.max(endDate.diff(startDate, 'day') + 1, 1), maxVisibleDays.value - startDaysDiff)
+        : 1
+
+      const suitableRow = findFirstSuitableRow(recordsInDay, startDaysDiff, spanDays)
+
+      for (let i = 0; i < spanDays; i++) {
+        const dayIndex = startDaysDiff + i
+        if (!recordsInDay[dayIndex]) recordsInDay[dayIndex] = {}
+        recordsInDay[dayIndex][suitableRow] = true
+      }
+
+      const isStartInRange = isInRange(ogStartDate)
+      const isEndInRange = isInRange(endDate)
+
+      let position = 'none'
+      if (isStartInRange && isEndInRange) position = 'rounded'
+      else if (isStartInRange) position = 'leftRounded'
+      else if (isEndInRange) position = 'rightRounded'
+
+      recordsInRange.push({
+        ...record,
+        rowMeta: {
+          ...record.rowMeta,
+          range: { fk_from_col, fk_to_col },
+          position,
+          id,
+          style: {
+            width: `calc(max(${spanDays} * ${perDayWidth}px, ${perDayWidth}px))`,
+            left: `${startDaysDiff * perDayWidth}px`,
+            top: `${suitableRow * 28}px`,
           },
+        },
+      })
+    }
+
+    if (fk_to_col) {
+      formattedData.value
+        .filter((r) => {
+          const startDate = dayjs(r.row[fk_from_col.title!])
+          const endDate = dayjs(r.row[fk_to_col.title!])
+          return startDate.isValid() && endDate.isValid() && !endDate.isBefore(startDate)
         })
-      }
+        .forEach(processRecord)
+    } else {
+      formattedData.value.forEach(processRecord)
     }
   })
 

From 380e2b8f3ce27cda7aec85f321f8599df381e864 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:10 +0000
Subject: [PATCH 07/50] fix: simplify functions

---
 .../calendar/WeekView/DateTimeField.vue       | 51 ++++---------------
 1 file changed, 11 insertions(+), 40 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 71de7449db..96fc116ceb 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -129,53 +129,24 @@ const calculateNewDates = useMemoize(
     return { startDate, endDate }
   },
 )
-
 // Since it is a datetime Week view, we need to create a 2D array of dayjs objects to represent the hours in a day for each day in the week
 const datesHours = computed(() => {
-  const datesHours: Array<Array<dayjs.Dayjs>> = []
-  let startOfWeek = dayjs(selectedDateRange.value.start) ?? dayjs().startOf('week')
-  let endOfWeek = dayjs(selectedDateRange.value.end) ?? dayjs().endOf('week')
-
-  if (maxVisibleDays.value === 5) {
-    endOfWeek = endOfWeek.subtract(2, 'day')
-  }
-
-  while (startOfWeek.isSameOrBefore(endOfWeek)) {
-    const hours: Array<dayjs.Dayjs> = []
-    for (let i = 0; i < 24; i++) {
-      hours.push(
-        dayjs()
-          .hour(i)
-          .minute(0)
-          .second(0)
-          .millisecond(0)
-          .year(startOfWeek.year())
-          .month(startOfWeek.month())
-          .date(startOfWeek.date()),
-      )
-    }
-    datesHours.push(hours)
-    startOfWeek = startOfWeek.add(1, 'day')
-  }
-  return datesHours
+  const start = dayjs(selectedDateRange.value.start).startOf('week')
+  return Array.from({ length: maxVisibleDays.value }, (_, i) =>
+    Array.from({ length: 24 }, (_, h) => start.add(i, 'day').hour(h).minute(0).second(0)),
+  )
 })
 
 const getGridTime = (date: dayjs.Dayjs, round = false) => {
-  const gridCalc = date.hour() * 60 + date.minute()
-  if (round) {
-    return Math.ceil(gridCalc)
-  } else {
-    return Math.floor(gridCalc)
-  }
+  const minutes = date.hour() * 60 + date.minute()
+  return round ? Math.ceil(minutes) : Math.floor(minutes)
 }
 
-const getGridTimeSlots = (from: dayjs.Dayjs, to: dayjs.Dayjs) => {
-  return {
-    from: getGridTime(from, false),
-    to: getGridTime(to, true) - 1,
-    dayIndex: getDayIndex(from),
-  }
-}
+const getGridTimeSlots = (from: dayjs.Dayjs, to: dayjs.Dayjs) => ({
+  from: getGridTime(from),
+  to: getGridTime(to, true) - 1,
+  dayIndex: getDayIndex(from),
+})
 
 const hasSlotForRecord = (
   columnArray: Row[],

From ef453e8bafceff1c3717ffa9ab53ff61ba9d8f8b Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:10 +0000
Subject: [PATCH 08/50] fix: ui fixes feat: move to engineering beta toggle
 feature

---
 packages/nc-gui/components/dlg/ViewCreate.vue | 198 ++++++++++--------
 .../smartsheet/toolbar/Calendar/Range.vue     |  28 ++-
 .../composables/useBetaFeatureToggle.ts       |   7 +
 packages/nc-gui/lang/en.json                  |   3 +-
 4 files changed, 131 insertions(+), 105 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 6dec350d69..eda60911f3 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -323,6 +323,8 @@ const addCalendarRange = async () => {
 }
 */
 
+const isRangeEnabled = computed(() => isFeatureEnabled(FEATURE_FLAG.CALENDAR_VIEW_RANGE))
+
 const enableDescription = ref(false)
 
 const removeDescription = () => {
@@ -977,116 +979,126 @@ const getPluralName = (name: string) => {
             />
           </a-form-item>
           <template v-if="form.type === ViewTypes.CALENDAR && !form.copy_from_id">
-            <div v-for="(range, index) in form.calendar_range" :key="`range-${index}`" class="flex flex-col w-full gap-2">
-              <div class="text-gray-800">
-                {{ $t('labels.organiseBy') }}
-              </div>
-              <NcSelect
-                v-model:value="range.fk_from_column_id"
-                :disabled="isMetaLoading"
-                :loading="isMetaLoading"
-                class="nc-select-shadow nc-from-select"
-              >
-                <a-select-option
-                  v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
+            <div
+              v-for="(range, index) in form.calendar_range"
+              :key="`range-${index}`"
+              :class="{
+                '!gap-2': range.fk_to_column_id === null,
+              }"
+              class="flex flex-col w-full gap-6"
+            >
+              <div class="w-full space-y-2">
+                <div class="text-gray-800">
+                  {{ $t('labels.organiseBy') }}
+                </div>
+                <NcSelect
+                  v-model:value="range.fk_from_column_id"
+                  :disabled="isMetaLoading"
+                  :loading="isMetaLoading"
+                  class="nc-select-shadow w-full nc-from-select"
+                >
+                  <a-select-option
+                    v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
                   // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
                   // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
                   if (index === 0) return true
                   const firstRange = viewSelectFieldOptions!.find((f) => f.value === form.calendar_range[0].fk_from_column_id)
                   return firstRange?.uidt === f.uidt
                 })"
-                  :key="id"
-                  class="w-40"
-                  :value="option.value"
-                >
-                  <div class="flex w-full gap-2 justify-between items-center">
-                    <div class="flex gap-2 items-center">
-                      <SmartsheetHeaderIcon :column="option" class="!ml-0" />
-                      <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                        <template #title>{{ option.label }}</template>
-                        {{ option.label }}
-                      </NcTooltip>
-                    </div>
-                    <div class="flex-1" />
-                    <component
-                      :is="iconMap.check"
-                      v-if="option.value === range.fk_from_column_id"
-                      id="nc-selected-item-icon"
-                      class="text-primary min-w-4 h-4"
-                    />
-                  </div>
-                </a-select-option>
-              </NcSelect>
-
-              <NcButton
-                v-if="range.fk_to_column_id === null"
-                size="small"
-                class="!border-none w-28"
-                type="secondary"
-                :disabled="!isEeUI"
-                @click="range.fk_to_column_id = undefined"
-              >
-                <component :is="iconMap.plus" class="h-4 w-4" />
-                {{ $t('activity.addEndDate') }}
-              </NcButton>
-
-              <template v-else-if="isEeUI">
-                <span>
-                  {{ $t('activity.withEndDate') }}
-                </span>
-
-                <div class="flex">
-                  <NcSelect
-                    v-model:value="range.fk_to_column_id"
-                    :disabled="isMetaLoading"
-                    :loading="isMetaLoading"
-                    :placeholder="$t('placeholder.notSelected')"
-                    class="nc-to-select flex-1"
+                    :key="id"
+                    class="w-40"
+                    :value="option.value"
                   >
-                    <a-select-option
-                      v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
-                        // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
-                        // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
-
-                        const firstRange = viewSelectFieldOptions.find(
-                          (f) => f.value === form.calendar_range[0].fk_from_column_id,
-                        )
-                        return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
-                      })"
-                      :key="id"
-                      :value="option.value"
-                    >
-                      <div class="flex items-center">
-                        <SmartsheetHeaderIcon :column="option" />
+                    <div class="flex w-full gap-2 justify-between items-center">
+                      <div class="flex gap-2 items-center">
+                        <SmartsheetHeaderIcon :column="option" class="!ml-0" />
                         <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
                           <template #title>{{ option.label }}</template>
                           {{ option.label }}
                         </NcTooltip>
                       </div>
-                    </a-select-option>
-                  </NcSelect>
-                  <NcButton
-                    class="!rounded-l-none !border-l-0"
-                    size="small"
-                    type="secondary"
-                    @click="range.fk_to_column_id = null"
-                  >
-                    <component :is="iconMap.delete" class="h-4 w-4" />
-                  </NcButton>
-                </div>
+                      <div class="flex-1" />
+                      <component
+                        :is="iconMap.check"
+                        v-if="option.value === range.fk_from_column_id"
+                        id="nc-selected-item-icon"
+                        class="text-primary min-w-4 h-4"
+                      />
+                    </div>
+                  </a-select-option>
+                </NcSelect>
+              </div>
+              <div class="w-full space-y-2">
                 <NcButton
-                  v-if="index !== 0"
+                  v-if="range.fk_to_column_id === null && isRangeEnabled"
                   size="small"
+                  class="!border-none w-28"
                   type="secondary"
-                  @click="
-                    () => {
-                      form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
-                    }
-                  "
+                  :disabled="!isEeUI"
+                  @click="range.fk_to_column_id = undefined"
                 >
-                  <component :is="iconMap.close" />
+                  <component :is="iconMap.plus" class="h-4 w-4" />
+                  {{ $t('activity.endDate') }}
                 </NcButton>
-              </template>
+
+                <template v-else-if="isEeUI && isRangeEnabled">
+                  <span class="text-gray-700">
+                    {{ $t('activity.withEndDate') }}
+                  </span>
+
+                  <div class="flex">
+                    <NcSelect
+                      v-model:value="range.fk_to_column_id"
+                      :disabled="isMetaLoading"
+                      :loading="isMetaLoading"
+                      :placeholder="$t('placeholder.notSelected')"
+                      class="nc-to-select flex-1"
+                    >
+                      <a-select-option
+                        v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
+                          // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
+                          // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
+
+                          const firstRange = viewSelectFieldOptions.find(
+                            (f) => f.value === form.calendar_range[0].fk_from_column_id,
+                          )
+                          return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
+                        })"
+                        :key="id"
+                        :value="option.value"
+                      >
+                        <div class="flex items-center">
+                          <SmartsheetHeaderIcon :column="option" />
+                          <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
+                            <template #title>{{ option.label }}</template>
+                            {{ option.label }}
+                          </NcTooltip>
+                        </div>
+                      </a-select-option>
+                    </NcSelect>
+                    <NcButton
+                      class="!rounded-l-none !border-l-0"
+                      size="small"
+                      type="secondary"
+                      @click="range.fk_to_column_id = null"
+                    >
+                      <component :is="iconMap.delete" class="h-4 w-4" />
+                    </NcButton>
+                  </div>
+                  <NcButton
+                    v-if="index !== 0"
+                    size="small"
+                    type="secondary"
+                    @click="
+                      () => {
+                        form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
+                      }
+                    "
+                  >
+                    <component :is="iconMap.close" />
+                  </NcButton>
+                </template>
+              </div>
             </div>
 
             <!--          <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
index 1f6512ac15..f0830b2073 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -22,14 +22,18 @@ const { loadViewColumns } = useViewColumnsOrThrow()
 const { loadCalendarMeta, loadCalendarData, loadSidebarData, fetchActiveDates, updateCalendarMeta, viewMetaProperties } =
   useCalendarViewStoreOrThrow()
 
+const { isFeatureEnabled } = useBetaFeatureToggle()
+
+const isRangeEnabled = computed(() => isFeatureEnabled(FEATURE_FLAG.CALENDAR_VIEW_RANGE))
+
 const calendarRangeDropdown = ref(false)
 
-const hideWeekends = computed({
-  get: () => viewMetaProperties.value?.hide_weekend ?? false,
+const showWeekends = computed({
+  get: () => !viewMetaProperties.value?.hide_weekend,
   set: (newValue) => {
     updateCalendarMeta({
       meta: {
-        hide_weekend: newValue,
+        hide_weekend: !newValue,
       },
     })
   },
@@ -183,7 +187,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
           class="flex flex-col w-full gap-2 mb-2"
           data-testid="nc-calendar-range-option"
         >
-          <span>
+          <span class="text-gray-800">
             {{ $t('labels.organiseBy') }}
           </span>
           <NcSelect
@@ -223,7 +227,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
           </NcSelect>
 
           <NcButton
-            v-if="range.fk_to_column_id === null"
+            v-if="range.fk_to_column_id === null && isRangeEnabled"
             size="small"
             data-testid="nc-calendar-range-add-end-date"
             class="!border-none w-28"
@@ -231,10 +235,12 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             :disabled="!isEeUI"
             @click="range.fk_to_column_id = undefined"
           >
-            <component :is="iconMap.plus" class="h-4 w-4" />
-            {{ $t('activity.addEndDate') }}
+            <div class="flex gap-2 items-center">
+              <component :is="iconMap.plus" class="h-4 w-4" />
+              {{ $t('activity.endDate') }}
+            </div>
           </NcButton>
-          <template v-else-if="isEeUI">
+          <template v-else-if="isEeUI && isRangeEnabled">
             <span>
               {{ $t('activity.withEndDate') }}
             </span>
@@ -281,9 +287,9 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
         </div>
 
         <div>
-          <NcSwitch v-model:checked="hideWeekends" :disabled="isLocked">
-            <span class="text-gray-800">
-              {{ $t('activity.hideWeekends') }}
+          <NcSwitch v-model:checked="showWeekends" :disabled="isLocked">
+            <span class="text-gray-800 font-semibold">
+              {{ $t('activity.showSaturdaysAndSundays') }}
             </span>
           </NcSwitch>
         </div>
diff --git a/packages/nc-gui/composables/useBetaFeatureToggle.ts b/packages/nc-gui/composables/useBetaFeatureToggle.ts
index bdc6e721b1..2fd23f5b61 100644
--- a/packages/nc-gui/composables/useBetaFeatureToggle.ts
+++ b/packages/nc-gui/composables/useBetaFeatureToggle.ts
@@ -43,6 +43,13 @@ const FEATURES = [
     enabled: false,
     isEngineering: true,
   },
+  {
+    id: 'calendar_view_range',
+    title: 'Allow configuring End Date for Calendar View',
+    description: 'Enables the calendar to display items as date ranges by allowing configuration of both start and end dates. ',
+    enabled: false,
+    isEngineering: true,
+  },
 ]
 
 export const FEATURE_FLAG = Object.fromEntries(FEATURES.map((feature) => [feature.id.toUpperCase(), feature.id])) as Record<
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index f693a7b432..3d700d172f 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -1053,7 +1053,7 @@
   "activity": {
     "assignView": "Assign view",
     "webhookDetails": "Webhook Details",
-    "hideWeekends": "Hide weekends",
+    "showSaturdaysAndSundays": "Show Saturdays & Sundays",
     "renameBase": "Rename Base",
     "renameWorkspace": "Rename workspace",
     "deactivate": "De-activate",
@@ -1069,6 +1069,7 @@
     "goToToday": "Go to Today",
     "toggleSidebar": "Toggle Sidebar",
     "addEndDate": "Add end date",
+    "endDate": "End Date",
     "withEndDate": "with end date",
     "calendar": "Calendar",
     "viewSettings": "View settings",

From 27960ef755c95088ae8c2b6da2f6536d65717095 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:11 +0000
Subject: [PATCH 09/50] fix: ui fixes

---
 .../smartsheet/calendar/MonthView.vue         | 10 ++++-
 .../smartsheet/calendar/RecordCard.vue        | 44 +++++--------------
 .../calendar/WeekView/DateField.vue           |  1 -
 3 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 7403935a3e..b9158fa822 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -821,8 +821,15 @@ const addRecord = (date: dayjs.Dayjs) => {
           :style="{
             ...record.rowMeta.style,
             zIndex: record.rowMeta.id === draggingId ? 100 : 0,
+            boxShadow:
+              record.rowMeta.id === draggingId
+                ? ' 0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
+                : 'none',
           }"
-          class="absolute group draggable-record transition cursor-pointer pointer-events-auto"
+          :class="{
+            'cursor-pointer': !resizeInProgress,
+          }"
+          class="absolute group draggable-record transition pointer-events-auto"
           @mouseleave="hoverRecord = null"
           @mouseover="hoverRecord = record.rowMeta.id"
           @mousedown.stop="dragStart($event, record)"
@@ -833,7 +840,6 @@ const addRecord = (date: dayjs.Dayjs) => {
               :position="record.rowMeta.position"
               :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
-              :selected="dragRecord?.rowMeta?.id === record.rowMeta.id || resizeRecord?.rowMeta?.id === record.rowMeta.id"
               @resize-start="onResizeStart"
             >
               <template v-if="[UITypes.DateTime, UITypes.LastModifiedTime, UITypes.CreatedTime].includes(calDataType)" #time>
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index 2fed85dc5e..056131c879 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -6,14 +6,12 @@ interface Props {
   resize?: boolean
   hover?: boolean
   record?: Row
-  selected?: boolean
   size?: 'small' | 'medium' | 'large' | 'auto'
   position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none'
 }
 
 withDefaults(defineProps<Props>(), {
   resize: true,
-  selected: false,
   hover: false,
   color: 'blue',
   size: 'small',
@@ -38,11 +36,9 @@ const emit = defineEmits(['resize-start'])
       'bg-yellow-50': color === 'yellow',
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
-      'group-hover:(border-brand-500 border-1)': resize,
-      '!border-blue-200 border-1': selected,
       'shadow-md': hover,
     }"
-    class="relative transition-all flex items-center px-1 gap-2 group border-1 border-transparent"
+    class="relative transition-all flex items-center gap-2 group"
   >
     <div
       v-if="position === 'leftRounded' || position === 'rounded'"
@@ -54,22 +50,14 @@ const emit = defineEmits(['resize-start'])
         'bg-pink-500': color === 'pink',
         'bg-purple-500': color === 'purple',
       }"
-      class="w-1 min-h-4 bg-blue-500 rounded-x rounded-y-sm"
+      class="w-1 min-h-6 bg-blue-500 rounded-x rounded-l-md"
     ></div>
 
-    <div v-if="(position === 'leftRounded' || position === 'rounded') && resize" class="mt-0.7 h-7.1 absolute -left-4 resize">
-      <NcButton
-        :class="{
-          '!block z-2 !border-brand-500': selected || hover,
-          '!hidden': !selected && !hover,
-        }"
-        size="xsmall"
-        type="secondary"
-        @mousedown.stop="emit('resize-start', 'left', $event, record)"
-      >
-        <component :is="iconMap.drag" class="text-gray-400"></component>
-      </NcButton>
-    </div>
+    <div
+      v-if="(position === 'leftRounded' || position === 'rounded') && resize"
+      class="mt-0.7 w-2 h-7.1 -left-1 absolute resize"
+      @mousedown.stop="emit('resize-start', 'left', $event, record)"
+    ></div>
 
     <div class="overflow-hidden items-center justify-center gap-2 flex w-full">
       <span v-if="position === 'rightRounded' || position === 'none'" class="ml-2"> .... </span>
@@ -90,19 +78,11 @@ const emit = defineEmits(['resize-start'])
       <span v-if="position === 'leftRounded' || position === 'none'" class="absolute my-0 right-5"> .... </span>
     </div>
 
-    <div v-if="(position === 'rightRounded' || position === 'rounded') && resize" class="absolute mt-0.3 -right-4 resize">
-      <NcButton
-        :class="{
-          '!block !border-brand-500 z-2': selected || hover,
-          '!hidden': !selected && !hover,
-        }"
-        size="xsmall"
-        type="secondary"
-        @mousedown.stop="emit('resize-start', 'right', $event, record)"
-      >
-        <component :is="iconMap.drag" class="text-gray-400"></component>
-      </NcButton>
-    </div>
+    <div
+      v-if="(position === 'rightRounded' || position === 'rounded') && resize"
+      class="absolute mt-0.3 h-7.1 w-2 right-1 resize"
+      @mousedown.stop="emit('resize-start', 'right', $event, record)"
+    ></div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index de11f58c2c..1213b0cdbd 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -537,7 +537,6 @@ const addRecord = (date: dayjs.Dayjs) => {
               :position="record.rowMeta.position"
               :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
-              :selected="dragRecord?.rowMeta?.id === record.rowMeta.id"
               color="blue"
               @dblclick.stop="emits('expandRecord', record)"
               @resize-start="onResizeStart"

From 12808b0578293efd08241e68fc9d8303452d1dad Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:11 +0000
Subject: [PATCH 10/50] fix: drag position fix

---
 .../smartsheet/calendar/MonthView.vue         | 38 ++++++++++++++++---
 .../smartsheet/calendar/RecordCard.vue        |  1 +
 packages/nc-gui/lib/types.ts                  |  1 +
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index b9158fa822..07b171f240 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -249,7 +249,7 @@ const recordsToDisplay = computed<{
         const id = record.rowMeta.id ?? generateRandomNumber()
         // Since the records can span multiple weeks, to display, we render multiple elements
         // for each week the record spans. The id is used to identify the elements that belong to the same record
-
+        let recordIndex = 0
         while (
           currentWeekStart.isSameOrBefore(endDate, 'day') &&
           // If the current week start is before the last day of the last week
@@ -327,9 +327,10 @@ const recordsToDisplay = computed<{
               style,
               range,
               id,
+              recordIndex,
             },
           })
-
+          recordIndex++
           currentWeekStart = currentWeekStart.add(1, 'week')
         }
       }
@@ -342,11 +343,24 @@ const recordsToDisplay = computed<{
   }
 })
 
+const dragOffset = ref<{
+  x: number | null
+  y: number | null
+}>({ x: null, y: null })
+
 const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean, skipChangeCheck?: boolean) => {
   const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect()
 
-  const percentY = (event.clientY - top - window.scrollY) / height
-  const percentX = (event.clientX - left - window.scrollX) / width
+  let relativeX = event.clientX - left
+
+  if (dragOffset.value.x) {
+    relativeX -= dragOffset.value.x
+  }
+
+  const relativeY = event.clientY - dragOffset.value.y
+
+  const percentX = Math.max(0, Math.min(1, relativeX / width))
+  const percentY = Math.max(0, Math.min(1, relativeY / height))
 
   const fromCol = dragRecord.value?.rowMeta.range?.fk_from_col
   const toCol = dragRecord.value?.rowMeta.range?.fk_to_col
@@ -550,6 +564,11 @@ const stopDrag = (event: MouseEvent) => {
   updateRowProperty(newRow, updateProperty, false)
   focusedDate.value = null
 
+  dragOffset.value = {
+    x: null,
+    y: null,
+  }
+
   $e('c:calendar:month:drag-record')
 
   document.removeEventListener('mousemove', onDrag)
@@ -570,6 +589,15 @@ const dragStart = (event: MouseEvent, record: Row) => {
       target = target.parentElement as HTMLElement
     }
 
+    // TODO: @DarkPhoenix2704
+    // const initialDragElement = document.querySelector(`[data-unique-id="${record.rowMeta.id}-0"]`)
+
+    dragOffset.value = {
+      x: event.clientX - target.getBoundingClientRect().left,
+      y: event.clientY - target.getBoundingClientRect().top,,
+    }
+
+    console.log(initialDragElement?.getBoundingClientRect().top)
     const allRecords = document.querySelectorAll('.draggable-record')
     allRecords.forEach((el) => {
       if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {
@@ -817,7 +845,7 @@ const addRecord = (date: dayjs.Dayjs) => {
         <div
           v-if="record.rowMeta.style?.display !== 'none'"
           :data-testid="`nc-calendar-month-record-${record.row[displayField!.title!]}`"
-          :data-unique-id="record.rowMeta.id"
+          :data-unique-id="`${record.rowMeta.id}-${record.rowMeta.recordIndex}`"
           :style="{
             ...record.rowMeta.style,
             zIndex: record.rowMeta.id === draggingId ? 100 : 0,
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index 056131c879..ab19ae4057 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -6,6 +6,7 @@ interface Props {
   resize?: boolean
   hover?: boolean
   record?: Row
+  selected?: boolean
   size?: 'small' | 'medium' | 'large' | 'auto'
   position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none'
 }
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 9b57ad054e..a9944f5bcb 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -102,6 +102,7 @@ interface Row {
     overLapIteration?: number
     numberOfOverlaps?: number
     minutes?: number
+    recordIndex?: number // For week spanning records in month view
   }
 }
 

From 8bf995e114035174a2645334d181dd741e7b7dea Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:11 +0000
Subject: [PATCH 11/50] fix: offset not working

---
 packages/nc-gui/components/smartsheet/calendar/MonthView.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 07b171f240..dc43625882 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -357,7 +357,7 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean, skipChangeC
     relativeX -= dragOffset.value.x
   }
 
-  const relativeY = event.clientY - dragOffset.value.y
+  const relativeY = event.clientY - top
 
   const percentX = Math.max(0, Math.min(1, relativeX / width))
   const percentY = Math.max(0, Math.min(1, relativeY / height))
@@ -594,10 +594,9 @@ const dragStart = (event: MouseEvent, record: Row) => {
 
     dragOffset.value = {
       x: event.clientX - target.getBoundingClientRect().left,
-      y: event.clientY - target.getBoundingClientRect().top,,
+      y: event.clientY - target.getBoundingClientRect().top,
     }
 
-    console.log(initialDragElement?.getBoundingClientRect().top)
     const allRecords = document.querySelectorAll('.draggable-record')
     allRecords.forEach((el) => {
       if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {

From 2b11fe853e51597562cf54d35eb25da0242d192a Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:11 +0000
Subject: [PATCH 12/50] fix: drag offset week view

---
 .../calendar/WeekView/DateField.vue           | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index 1213b0cdbd..b86f47239d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -286,13 +286,25 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
   document.addEventListener('mouseup', onResizeEnd)
 }
 
+const dragOffset = ref<{
+  x: number | null
+  y: number | null
+}>({ x: null, y: null })
+
 // This method is used to calculate the new start and end date of a record when dragging and dropping
 const calculateNewRow = (event: MouseEvent, updateSideBarData?: boolean) => {
   const { width, left } = container.value.getBoundingClientRect()
 
   // Calculate the percentage of the width based on the mouse position
   // This is used to calculate the day index
-  const percentX = (event.clientX - left - window.scrollX) / width
+
+  let relativeX = event.clientX - left
+
+  if (dragOffset.value.x) {
+    relativeX -= dragOffset.value.x
+  }
+
+  const percentX = Math.max(0, Math.min(1, relativeX / width))
 
   const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
   const toCol = dragRecord.value.rowMeta.range?.fk_to_col
@@ -410,6 +422,11 @@ const dragStart = (event: MouseEvent, record: Row) => {
       target = target.parentElement as HTMLElement
     }
 
+    dragOffset.value = {
+      x: event.clientX - target.getBoundingClientRect().left,
+      y: event.clientY - target.getBoundingClientRect().top,
+    }
+
     const allRecords = document.querySelectorAll('.draggable-record')
     allRecords.forEach((el) => {
       if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {
@@ -457,6 +474,12 @@ const dropEvent = (event: DragEvent) => {
       dragElement.value = null
     }
     updateRowProperty(newRow, updateProperty, false)
+
+    dragOffset.value = {
+      x: null,
+      y: null,
+    }
+
     $e('c:calendar:day:drag-record')
   }
 }

From 4f83e083999e3c3c6dca0b84f93ba95bc8536093 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:11 +0000
Subject: [PATCH 13/50] fix: optimizations

---
 .../smartsheet/calendar/MonthView.vue         | 182 ++++++++++--------
 1 file changed, 100 insertions(+), 82 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index dc43625882..32f1ddb191 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
-import type { ColumnType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 
 const emit = defineEmits(['newRecord', 'expandRecord'])
@@ -52,10 +51,6 @@ const calendarGridContainer = ref()
 
 const { width: gridContainerWidth, height: gridContainerHeight } = useElementSize(calendarGridContainer)
 
-const isDayInPagedMonth = (date: dayjs.Dayjs) => {
-  return date.month() === selectedMonth.value.month()
-}
-
 const dragElement = ref<HTMLElement | null>(null)
 
 const draggingId = ref<string | null>(null)
@@ -81,56 +76,77 @@ const fields = inject(FieldsInj, ref())
 const { fields: _fields } = useViewColumnsOrThrow()
 
 const fieldStyles = computed(() => {
-  if (!_fields.value) return new Map()
-  return new Map(
-    _fields.value.map((field) => [
-      field.fk_column_id,
-      {
-        underline: field.underline,
-        bold: field.bold,
-        italic: field.italic,
-      },
-    ]),
-  )
+  return (_fields.value ?? []).reduce((acc, field) => {
+    acc[field.fk_column_id!] = {
+      bold: !!field.bold,
+      italic: !!field.italic,
+      underline: !!field.underline,
+    }
+    return acc
+  }, {} as Record<string, { bold?: boolean; italic?: boolean; underline?: boolean }>)
 })
 
-const getFieldStyle = (field: ColumnType) => {
-  return fieldStyles.value.get(field.id)
-}
-
 const dates = computed(() => {
   const startOfMonth = selectedMonth.value.startOf('month')
-  const endOfMonth = selectedMonth.value.endOf('month')
-
-  const firstDayToDisplay = startOfMonth.startOf('week').add(isMondayFirst.value ? 0 : -1, 'day')
-  const lastDayToDisplay = endOfMonth.endOf('week').add(isMondayFirst.value ? 0 : -1, 'day')
-
-  const daysToDisplay = lastDayToDisplay.diff(firstDayToDisplay, 'day') + 1
-  let numberOfRows = Math.ceil(daysToDisplay / 7)
-  numberOfRows = Math.max(numberOfRows, 5)
-
-  const weeksArray: Array<Array<dayjs.Dayjs>> = []
-  let currentDay = firstDayToDisplay
-  for (let week = 0; week < numberOfRows; week++) {
-    const weekArray = []
-    for (let day = 0; day < 7; day++) {
-      weekArray.push(currentDay)
-      currentDay = currentDay.add(1, 'day')
-    }
-    weeksArray.push(weekArray)
-  }
+  const firstDayOffset = isMondayFirst.value ? 0 : -1
+  const firstDayToDisplay = startOfMonth.startOf('week').add(firstDayOffset, 'day')
 
-  return weeksArray
+  const daysInView = Math.max(
+    35,
+    Math.ceil((startOfMonth.daysInMonth() + startOfMonth.day() + (isMondayFirst.value ? 0 : 1)) / 7) * 7,
+  )
+
+  return Array.from({ length: daysInView / 7 }, (_, weekIndex) =>
+    Array.from({ length: 7 }, (_, dayIndex) => firstDayToDisplay.add(weekIndex * 7 + dayIndex, 'day')),
+  )
+})
+
+const calendarData = computed(() => {
+  const startOfMonth = selectedMonth.value.startOf('month')
+  const firstDayOffset = isMondayFirst.value ? 0 : -1
+  const firstDayToDisplay = startOfMonth.startOf('week').add(firstDayOffset, 'day')
+  const today = dayjs()
+
+  const daysInView = Math.max(
+    35,
+    Math.ceil((startOfMonth.daysInMonth() + startOfMonth.day() + (isMondayFirst.value ? 0 : 1)) / 7) * 7,
+  )
+
+  return {
+    weeks: Array.from({ length: daysInView / 7 }, (_, weekIndex) => ({
+      weekIndex,
+      days: Array.from({ length: 7 }, (_, dayIndex) => {
+        const day = firstDayToDisplay.add(weekIndex * 7 + dayIndex, 'day')
+
+        return {
+          date: day,
+          key: `${weekIndex}-${dayIndex}`,
+          isWeekend: day.get('day') === 0 || day.get('day') === 6,
+          isToday: day.isSame(today, 'date'),
+          isInPagedMonth: day.isSame(startOfMonth, 'month'),
+          isVisible:
+            maxVisibleDays.value === 7 || (maxVisibleDays.value === 5 && !(day.get('day') !== 0 && day.get('day') !== 6)),
+          dayNumber: day.format('DD'),
+        }
+      }),
+    })),
+    gridClass: {
+      'grid-cols-7': maxVisibleDays.value === 7,
+      'grid-cols-5': maxVisibleDays.value === 5,
+      'grid': true,
+      'grow': true,
+    },
+  }
 })
 
 const recordsToDisplay = computed<{
   records: Row[]
   count: { [p: string]: { overflow: boolean; count: number; overflowCount: number } }
 }>(() => {
-  if (!dates.value || !calendarRange.value) return { records: [], count: {} }
+  if (!calendarData.value || !calendarRange.value) return { records: [], count: {} }
 
   const perWidth = gridContainerWidth.value / maxVisibleDays.value
-  const perHeight = gridContainerHeight.value / dates.value.length
+  const perHeight = gridContainerHeight.value / calendarData.value.weeks.length
   const perRecordHeight = 24
 
   const spaceBetweenRecords = 27
@@ -214,8 +230,12 @@ const recordsToDisplay = computed<{
 
         occupyLane(dateKey, lane)
 
-        const weekIndex = dates.value.findIndex((week) => week.some((day) => dayjs(day).isSame(startDate, 'day')))
-        const dayIndex = (dates.value[weekIndex] ?? []).findIndex((day) => dayjs(day).isSame(startDate, 'day'))
+        const weekIndex = calendarData.value.weeks.findIndex((week) =>
+          week.days.some((day) => dayjs(day.date).isSame(startDate, 'day')),
+        )
+        const dayIndex = (calendarData.value.weeks[weekIndex] ?? []).days.findIndex((day) =>
+          dayjs(day.date).isSame(startDate, 'day'),
+        )
 
         const style: Partial<CSSStyleDeclaration> = {
           left: `${dayIndex * perWidth}px`,
@@ -253,7 +273,7 @@ const recordsToDisplay = computed<{
         while (
           currentWeekStart.isSameOrBefore(endDate, 'day') &&
           // If the current week start is before the last day of the last week
-          currentWeekStart.isBefore(dates.value[dates.value.length - 1][6])
+          currentWeekStart.isBefore(calendarData.value.weeks[calendarData.value.weeks.length - 1].days[6].date)
         ) {
           // We update the record start to currentWeekStart if it is before the start date
           // and record end to currentWeekEnd if it is after the end date
@@ -709,52 +729,48 @@ const addRecord = (date: dayjs.Dayjs) => {
     <div
       ref="calendarGridContainer"
       :class="{
-        'grid-rows-5': dates.length === 5,
-        'grid-rows-6': dates.length === 6,
-        'grid-rows-7': dates.length === 7,
+        'grid-rows-5': calendarData.weeks.length === 5,
+        'grid-rows-6': calendarData.weeks.length === 6,
+        'grid-rows-7': calendarData.weeks.length === 7,
       }"
       class="grid"
       style="height: calc(100% - 1.59rem)"
       @drop="dropEvent"
     >
       <div
-        v-for="(week, weekIndex) in dates"
-        :key="weekIndex"
-        :class="{
-          'grid-cols-7': maxVisibleDays === 7,
-          'grid-cols-5': maxVisibleDays === 5,
-        }"
-        class="grid grow"
+        v-for="week in calendarData.weeks"
+        :key="week.weekIndex"
+        :class="calendarData.gridClass"
         data-testid="nc-calendar-month-week"
       >
-        <template v-for="(day, dateIndex) in week">
+        <template v-for="day in week.days">
           <div
-            v-if="maxVisibleDays === 5 ? day.get('day') !== 0 && day.get('day') !== 6 : true"
-            :key="`${weekIndex}-${dateIndex}`"
+            v-if="day.isVisible"
+            :key="day.key"
             :class="{
-              'selected-date': isDateSelected(day) || (focusedDate && dayjs(day).isSame(focusedDate, 'day')),
-              '!text-gray-400': !isDayInPagedMonth(day),
-              '!bg-gray-50 !hover:bg-gray-100': day.get('day') === 0 || day.get('day') === 6,
-              'border-t-1': weekIndex === 0,
+              'selected-date': isDateSelected(day.date) || (focusedDate && dayjs(day.date).isSame(focusedDate, 'day')),
+              '!text-gray-400': !day.isInPagedMonth,
+              '!bg-gray-50 !hover:bg-gray-100': day.isWeekend,
+              'border-t-1': week.weekIndex === 0,
             }"
             class="text-right relative group last:border-r-0 transition text-sm h-full border-r-1 border-b-1 border-gray-200 font-medium hover:bg-gray-50 text-gray-800 bg-white"
             data-testid="nc-calendar-month-day"
-            @click="selectDate(day)"
-            @dblclick="addRecord(day)"
+            @click="selectDate(day.date)"
+            @dblclick="addRecord(day.date)"
           >
             <div v-if="isUIAllowed('dataEdit')" class="flex justify-between p-1">
               <span
                 :class="{
-                  'block group-hover:hidden': !isDateSelected(day) && [UITypes.DateTime, UITypes.Date].includes(calDataType),
-                  'hidden': isDateSelected(day) && [UITypes.DateTime, UITypes.Date].includes(calDataType),
+                  'block group-hover:hidden': !isDateSelected(day.date) && [UITypes.DateTime, UITypes.Date].includes(calDataType),
+                  'hidden': isDateSelected(day.date) && [UITypes.DateTime, UITypes.Date].includes(calDataType),
                 }"
               ></span>
 
               <NcDropdown v-if="calendarRange.length > 1" auto-close>
                 <NcButton
                   :class="{
-                    '!block': isDateSelected(day),
-                    '!hidden': !isDateSelected(day),
+                    '!block': isDateSelected(day.date),
+                    '!hidden': !isDateSelected(day.date),
                   }"
                   class="!group-hover:block rounded"
                   size="small"
@@ -773,7 +789,7 @@ const addRecord = (date: dayjs.Dayjs) => {
                       () => {
                         const record = {
                           row: {
-                            [range.fk_from_col!.title!]: dayjs(day).format('YYYY-MM-DD HH:mm:ssZ'),
+                            [range.fk_from_col!.title!]: dayjs(day.date).format('YYYY-MM-DD HH:mm:ssZ'),
                           },
                         }
                         emit('newRecord', record)
@@ -791,8 +807,8 @@ const addRecord = (date: dayjs.Dayjs) => {
               <NcButton
                 v-else-if="[UITypes.DateTime, UITypes.Date].includes(calDataType)"
                 :class="{
-                  '!block': isDateSelected(day),
-                  '!hidden': !isDateSelected(day),
+                  '!block': isDateSelected(day.date),
+                  '!hidden': !isDateSelected(day.date),
                 }"
                 class="!group-hover:block !w-6 !h-6 !rounded"
                 size="xsmall"
@@ -801,7 +817,7 @@ const addRecord = (date: dayjs.Dayjs) => {
                 () => {
                   const record = {
                     row: {
-                      [calendarRange[0].fk_from_col!.title!]: (day).format('YYYY-MM-DD HH:mm:ssZ'),
+                      [calendarRange[0].fk_from_col!.title!]: (day.date).format('YYYY-MM-DD HH:mm:ssZ'),
                     },
                   }
                   emit('newRecord', record)
@@ -812,28 +828,30 @@ const addRecord = (date: dayjs.Dayjs) => {
               </NcButton>
               <span
                 :class="{
-                  'bg-brand-50 text-brand-500 !font-bold': day.isSame(dayjs(), 'date'),
+                  'bg-brand-50 text-brand-500 !font-bold': day.isToday,
                 }"
                 class="px-1.3 py-1 text-sm leading-3 font-medium rounded-lg"
               >
-                {{ day.format('DD') }}
+                {{ day.dayNumber }}
               </span>
             </div>
-            <div v-if="!isUIAllowed('dataEdit')" class="leading-3 p-3">{{ dayjs(day).format('DD') }}</div>
+            <div v-if="!isUIAllowed('dataEdit')" class="leading-3 p-3">{{ day.dayNumber }}</div>
 
             <NcButton
               v-if="
-                recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')] &&
-                recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')]?.overflow &&
+                recordsToDisplay.count[dayjs(day.date).format('YYYY-MM-DD')] &&
+                recordsToDisplay.count[dayjs(day.date).format('YYYY-MM-DD')]?.overflow &&
                 !draggingId
               "
               v-e="`['c:calendar:month-view-more']`"
               class="!absolute bottom-1 right-1 text-center min-w-4.5 mx-auto z-3 text-gray-500"
               size="xxsmall"
               type="secondary"
-              @click="viewMore(day)"
+              @click="viewMore(day.date)"
             >
-              <span class="text-xs px-1"> + {{ recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')]?.overflowCount }} </span>
+              <span class="text-xs px-1">
+                + {{ recordsToDisplay.count[dayjs(day.date).format('YYYY-MM-DD')]?.overflowCount }}
+              </span>
             </NcButton>
           </div>
         </template>
@@ -879,10 +897,10 @@ const addRecord = (date: dayjs.Dayjs) => {
                   v-if="!isRowEmpty(record, field!)"
                   v-model="record.row[field!.title!]"
                   class="text-xs"
-                  :bold="getFieldStyle(field).bold"
+                  :bold="fieldStyles[field.id].bold"
                   :column="field"
-                  :italic="getFieldStyle(field).italic"
-                  :underline="getFieldStyle(field).underline"
+                  :italic="fieldStyles[field.id].italic"
+                  :underline="fieldStyles[field.id].underline"
                 />
               </template>
             </LazySmartsheetCalendarRecordCard>

From 7b53ab888dc7de4db8950fab194b920e20bf1bae Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:11 +0000
Subject: [PATCH 14/50] feat: date time week view optimizations

---
 .../smartsheet/calendar/VRecordCard.vue       |  95 +++-------
 .../calendar/WeekView/DateTimeField.vue       | 172 ++++++++----------
 2 files changed, 110 insertions(+), 157 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index eb48d49843..3984738bb6 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -5,7 +5,6 @@ interface Props {
   resize?: boolean
   selected?: boolean
   hover?: boolean
-  position?: 'topRounded' | 'bottomRounded' | 'rounded' | 'none'
 }
 
 withDefaults(defineProps<Props>(), {
@@ -13,92 +12,58 @@ withDefaults(defineProps<Props>(), {
   selected: false,
   hover: false,
   color: 'blue',
-  position: 'rounded',
 })
 
 const emit = defineEmits(['resize-start'])
 </script>
 
 <template>
-  <div
-    v-if="(position === 'topRounded' || position === 'rounded') && resize"
-    class="absolute flex items-center justify-center w-full -mt-4 h-7.1 hidden z-1 resize !group-hover:(flex rounded-lg)"
-  >
-    <NcButton
-      :class="{
-        '!flex rounded-md border-brand-500': selected || hover,
-      }"
-      class="!group-hover:(border-brand-500) !border-1 text-gray-400 cursor-ns-resize"
-      size="xsmall"
-      type="secondary"
-      @mousedown.stop="emit('resize-start', 'left', $event, record)"
-    >
-      <component :is="iconMap.drag" class="mt-0.5" />
-    </NcButton>
-  </div>
   <div
     :class="{
-      'rounded-t-md': position === 'topRounded',
-      'rounded-b-md': position === 'bottomRounded',
-      'rounded-md': position === 'rounded',
-      'rounded-none': position === 'none',
       'bg-maroon-50': color === 'maroon',
       'bg-blue-50': color === 'blue',
       'bg-green-50': color === 'green',
       'bg-yellow-50': color === 'yellow',
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
-      'group-hover:(border-brand-500)': resize,
-      '!border-blue-200 border-1': selected,
       'shadow-md': hover,
     }"
-    class="relative flex gap-2 items-center !pr-1 h-full ml-0.25 border-1 border-transparent"
+    class="relative flex gap-2 relative rounded-md h-full"
   >
-    <div class="h-full py-1">
-      <div
-        :class="{
-          'bg-maroon-500': color === 'maroon',
-          'bg-blue-500': color === 'blue',
-          'bg-green-500': color === 'green',
-          'bg-yellow-500': color === 'yellow',
-          'bg-pink-500': color === 'pink',
-          'bg-purple-500': color === 'purple',
-        }"
-        class="block h-full min-h-9 ml-1 w-1 rounded"
-      ></div>
-    </div>
-
-    <div v-if="position === 'bottomRounded' || position === 'none'" class="ml-3">....</div>
-
     <div
-      class="flex overflow-x-hidden break-word whitespace-nowrap overflow-hidden text-ellipsis w-full truncate text-ellipsis flex-col gap-1"
-    >
-      <NcTooltip :disabled="selected" class="inline-block" show-on-truncate-only wrap-child="span">
-        <slot class="pl-1 pr-2 text-sm text-nowrap text-gray-800 leading-7" />
-        <template #title>
+      v-if="resize"
+      class="absolute w-full h-2 z-20 top-0 !cursor-row-resize"
+      @mousedown.stop="emit('resize-start', 'left', $event, record)"
+    ></div>
+    <div
+      :class="{
+        'bg-maroon-500': color === 'maroon',
+        'bg-blue-500': color === 'blue',
+        'bg-green-500': color === 'green',
+        'bg-yellow-500': color === 'yellow',
+        'bg-pink-500': color === 'pink',
+        'bg-purple-500': color === 'purple',
+      }"
+      class="h-full min-h-9 w-1.25 -ml-0.25 rounded-l-md"
+    ></div>
+
+    <div class="flex overflow-x-hidden whitespace-nowrap text-ellipsis pt-1 w-full truncate text-ellipsis flex-col gap-1">
+      <div class="truncate">
+        <NcTooltip show-on-truncate-only :disabled="selected">
+          <template #title>
+            <slot />
+          </template>
           <slot />
-        </template>
-      </NcTooltip>
+        </NcTooltip>
+      </div>
+
       <slot name="time" />
     </div>
-
-    <div v-if="position === 'topRounded' || position === 'none'" class="h-full pb-7 flex items-end ml-3">....</div>
-  </div>
-  <div
-    v-if="(position === 'bottomRounded' || position === 'rounded') && resize"
-    class="absolute items-center justify-center w-full hidden h-7.1 -mt-4 !group-hover:(flex rounded-lg)"
-  >
-    <NcButton
-      :class="{
-        '!flex border-1 rounded-lg z-1 cursor-ns-resize	border-brand-500': selected || hover,
-      }"
-      class="!group-hover:(border-brand-500) text-gray-400 !border-1"
-      size="xsmall"
-      type="secondary"
+    <div
+      v-if="resize"
+      class="absolute !cursor-row-resize w-full bottom-0 w-full h-2"
       @mousedown.stop="emit('resize-start', 'right', $event, record)"
-    >
-      <component :is="iconMap.drag" class="mt-0.5" />
-    </NcButton>
+    ></div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 96fc116ceb..8f1a131dc8 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
-import type { ColumnType } from 'nocodb-sdk'
 import type { Row } from '~/lib/types'
 
 const emits = defineEmits(['expandRecord', 'newRecord'])
@@ -39,17 +38,14 @@ const fields = inject(FieldsInj, ref())
 const { fields: _fields } = useViewColumnsOrThrow()
 
 const fieldStyles = computed(() => {
-  if (!_fields.value) return new Map()
-  return new Map(
-    _fields.value.map((field) => [
-      field.fk_column_id,
-      {
-        underline: field.underline,
-        bold: field.bold,
-        italic: field.italic,
-      },
-    ]),
-  )
+  return (_fields.value ?? []).reduce((acc, field) => {
+    acc[field.fk_column_id!] = {
+      bold: !!field.bold,
+      italic: !!field.italic,
+      underline: !!field.underline,
+    }
+    return acc
+  }, {} as Record<string, { bold?: boolean; italic?: boolean; underline?: boolean }>)
 })
 
 const getDayIndex = (date: dayjs.Dayjs) => {
@@ -96,9 +92,36 @@ onMounted(() => {
   })
 })
 
-const getFieldStyle = (field: ColumnType) => {
-  return fieldStyles.value.get(field.id)
+const calculateHourIndices = (dayIndex: number, startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => {
+  // Get the hour component for start and end times
+  const startHour = startDate.hour()
+  const endHour = endDate.hour()
+
+  // Find the indices directly based on hours since datesHours uses integer hours
+  const startHourIndex = Math.max(
+    (datesHours.value[dayIndex] ?? []).findIndex((h) => h.hour() === startHour),
+    0,
+  )
+
+  // For end hour, we need to handle cases where the end time has minutes
+  let endHourIndex = (datesHours.value[dayIndex] ?? []).findIndex((h) => h.hour() === endHour)
+
+  // If we have minutes in the end time, we should include the next hour
+  if (endDate.minute() > 0 && endHour < 23) {
+    endHourIndex++
+  }
+
+  endHourIndex = Math.max(endHourIndex, 0)
+
+  return {
+    startHourIndex,
+    endHourIndex,
+    // You might also want these for more precise calculations
+    startMinutes: startDate.minute(),
+    endMinutes: endDate.minute(),
+  }
 }
+
 const calculateNewDates = useMemoize(
   ({
     startDate,
@@ -219,7 +242,6 @@ const getMaxOverlaps = ({
   if (graph.has(id)) {
     dfs(id)
   }
-
   const overlapIterations: Array<number> = []
 
   columnArray[dayIndex]
@@ -229,7 +251,7 @@ const getMaxOverlaps = ({
       overlapIterations.push(record.rowMeta.overLapIteration!)
     })
 
-  maxOverlaps = Math.max(...overlapIterations)
+  maxOverlaps = overlapIterations?.length > 0 ? Math.max(...overlapIterations) : 1
 
   return { maxOverlaps, dayIndex, overlapIndex }
 }
@@ -274,6 +296,7 @@ const recordsAcrossAllRange = computed<{
     >
   >()
   const recordsToDisplay: Array<Row> = []
+  const recordSpanningDays: Array<Row> = []
 
   calendarRange.value.forEach((range) => {
     const fromCol = range.fk_from_col
@@ -283,23 +306,22 @@ const recordsAcrossAllRange = computed<{
     // But not all fetched records are valid for the certain range, so we filter them out & sort them
     const sortedFormattedData = [...formattedData.value]
       .filter((record) => {
-        const fromDate = record.row[fromCol!.title!] ? dayjs(record.row[fromCol!.title!]) : null
-
         if (fromCol && toCol) {
-          const fromDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
-          const toDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null
-
-          return fromDate && toDate && !toDate.isBefore(fromDate)
-        } else if (fromCol && !toCol) {
-          return !!fromDate
+          const fromDate = dayjs(record.row[fromCol.title!])
+          const toDate = dayjs(record.row[toCol.title!])
+
+          if (fromDate.isValid() && toDate.isValid()) {
+            const isMultiDay = !fromDate.isSame(toDate, 'day')
+            if (isMultiDay) {
+              recordSpanningDays.push(record)
+              return false
+            }
+            return true
+          }
         }
-        return false
-      })
-      .sort((a, b) => {
-        const aDate = dayjs(a.row[fromCol!.title!])
-        const bDate = dayjs(b.row[fromCol!.title!])
-        return aDate.isBefore(bDate) ? 1 : -1
+        return fromCol && !!record.row[fromCol.title!]
       })
+      .sort((a, b) => (dayjs(a.row[fromCol!.title!]).isBefore(dayjs(b.row[fromCol!.title!])) ? 1 : -1))
 
     for (const record of sortedFormattedData) {
       const id = record.rowMeta.id ?? generateRandomNumber()
@@ -311,73 +333,37 @@ const recordsAcrossAllRange = computed<{
           scheduleStart,
           scheduleEnd,
         })
+        const dayIndex = getDayIndex(startDate)
 
-        // Setting the current start date to the start date of the record
-        let currentStartDate: dayjs.Dayjs = startDate.clone()
-
-        // We loop through the start date to the end date and create a record for each day as it spans bottom to top
-        while (currentStartDate.isSameOrBefore(endDate!, 'day')) {
-          const currentEndDate = currentStartDate.clone().endOf('day')
-          const recordStart: dayjs.Dayjs = currentEndDate.isSame(startDate, 'day') ? startDate : currentStartDate
-          const recordEnd = currentEndDate.isSame(endDate, 'day') ? endDate : currentEndDate
-
-          const dayIndex = getDayIndex(recordStart)
-
-          // We calculate the index of the start and end hour in the day
-          const startHourIndex = Math.max(
-            (datesHours.value[dayIndex] ?? []).findIndex((h) => h.format('HH:mm') === recordStart.format('HH:mm')),
-            0,
-          )
-          const endHourIndex = Math.max(
-            (datesHours.value[dayIndex] ?? []).findIndex((h) => h.format('HH:mm') === recordEnd?.startOf('hour').format('HH:mm')),
-            0,
-          )
-
-          let position: 'topRounded' | 'bottomRounded' | 'rounded' | 'none' = 'rounded'
-          const isSelectedDay = (date: dayjs.Dayjs) => date.isSame(currentStartDate, 'day')
-          const isBeforeSelectedDay = (date: dayjs.Dayjs) => date.isBefore(currentStartDate, 'day')
-          const isAfterSelectedDay = (date: dayjs.Dayjs) => date.isAfter(currentStartDate, 'day')
-
-          if (isSelectedDay(startDate) && isSelectedDay(endDate)) {
-            position = 'rounded'
-          } else if (isBeforeSelectedDay(startDate) && isAfterSelectedDay(endDate)) {
-            position = 'none'
-          } else if (isSelectedDay(startDate) && isAfterSelectedDay(endDate)) {
-            position = 'topRounded'
-          } else if (isBeforeSelectedDay(startDate) && isSelectedDay(endDate)) {
-            position = 'bottomRounded'
-          } else {
-            position = 'none'
-          }
+        const { startHourIndex, endHourIndex, startMinutes, endMinutes } = calculateHourIndices(dayIndex, startDate, endDate)
 
-          let style: Partial<CSSStyleDeclaration> = {}
+        console.log(startHourIndex, endHourIndex)
 
-          const spanHours = endHourIndex - startHourIndex + 1
+        let style: Partial<CSSStyleDeclaration> = {}
 
-          const top = startHourIndex * perHeight
+        const spanHours = endHourIndex - startHourIndex + 1
 
-          const height = (endHourIndex - startHourIndex + 1) * perHeight - spanHours - 5
+        const top = startHourIndex * perHeight
 
-          style = {
-            ...style,
-            top: `${top}px`,
-            height: `${height}px`,
-          }
+        const height = (endHourIndex - startHourIndex + 1) * perHeight - spanHours - 5
 
-          recordsToDisplay.push({
-            ...record,
-            rowMeta: {
-              ...record.rowMeta,
-              id,
-              style,
-              range,
-              position,
-              dayIndex,
-            },
-          })
-          // We set the current start date to the next day
-          currentStartDate = currentStartDate.add(1, 'day').hour(0).minute(0)
+        style = {
+          ...style,
+          top: `${top}px`,
+          height: `${height}px`,
         }
+
+        recordsToDisplay.push({
+          ...record,
+          rowMeta: {
+            ...record.rowMeta,
+            id,
+            style,
+            range,
+            position: 'rounded',
+            dayIndex,
+          },
+        })
       } else if (fromCol) {
         // If there is no toColumn chosen in the range
         const { startDate } = calculateNewDates({
@@ -534,12 +520,14 @@ const recordsAcrossAllRange = computed<{
 
       let width = 0
       let left = 100
+
       const majorLeft = dayIndex * perWidth
 
       if (record.rowMeta.overLapIteration! - 1 > 2) {
         display = 'none'
       } else {
         width = 100 / Math.min(maxOverlaps, 3) / maxVisibleDays.value
+
         left = width * (overlapIndex - 1)
       }
       record.rowMeta.style = {
@@ -1046,10 +1034,10 @@ watch(
                     v-if="!isRowEmpty(record, field!)"
                     v-model="record.row[field!.title!]"
                     class="text-xs"
-                    :bold="getFieldStyle(field).bold"
                     :column="field"
-                    :italic="getFieldStyle(field).italic"
-                    :underline="getFieldStyle(field).underline"
+                    :bold="!!fieldStyles[field.id]?.bold"
+                    :italic="!!fieldStyles[field.id]?.italic"
+                    :underline="!!fieldStyles[field.id]?.underline"
                   />
                 </template>
                 <template #time>

From 28a2697d2950328d09333d6207a34e27321d3365 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:11 +0000
Subject: [PATCH 15/50] fix: height calculation

---
 .../smartsheet/calendar/SideRecordCard.vue    |  18 +--
 .../smartsheet/calendar/VRecordCard.vue       |  10 +-
 .../calendar/WeekView/DateTimeField.vue       | 115 ++++++++----------
 3 files changed, 65 insertions(+), 78 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
index 3a5b4e1394..bb901643f0 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
@@ -16,8 +16,8 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="border-1 cursor-pointer h-14 border-gray-200 flex gap-2 items-center rounded-lg">
-    <div class="flex items-center pl-2 gap-2">
+  <div class="border-1 cursor-pointer min-h-14 border-gray-200 p-2 flex gap-2 flex-col rounded-lg">
+    <div class="flex items-center gap-2">
       <span
         :class="{
           'bg-maroon-500': props.color === 'maroon',
@@ -40,13 +40,15 @@ const props = withDefaults(defineProps<Props>(), {
       </div>
     </div>
 
-    <div v-if="invalid" class="gap-3 bg-yellow-50 mt-2 border-gray-200 border-1 rounded-lg p-2 flex">
-      <component :is="iconMap.warning" class="text-yellow-500 h-4 w-4" />
-      <div class="flex flex-col gap-1">
-        <h1 class="text-gray-800 text-bold">Date mismatch</h1>
-        <p class="text-gray-500">Selected End date is before Start date.</p>
+    <NcTooltip v-if="invalid">
+      <div class="gap-3 bg-yellow-50 mt-2 border-gray-200 border-1 rounded-lg p-2 flex">
+        <GeneralIcon icon="warning" class="text-yellow-500 !h-5 !w-5" />
+        <div class="text-gray-700 text-xs">Selected End date is before Start date.</div>
       </div>
-    </div>
+      <template #title>
+        Record with end date before the start date won't be displayed in the calendar. Update the end date to display the record.
+      </template>
+    </NcTooltip>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index 3984738bb6..180abc010a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -32,7 +32,7 @@ const emit = defineEmits(['resize-start'])
   >
     <div
       v-if="resize"
-      class="absolute w-full h-2 z-20 top-0 !cursor-row-resize"
+      class="absolute w-full h-1 z-20 top-0 !cursor-row-resize"
       @mousedown.stop="emit('resize-start', 'left', $event, record)"
     ></div>
     <div
@@ -61,10 +61,14 @@ const emit = defineEmits(['resize-start'])
     </div>
     <div
       v-if="resize"
-      class="absolute !cursor-row-resize w-full bottom-0 w-full h-2"
+      class="absolute !cursor-row-resize w-full bottom-0 w-full h-1"
       @mousedown.stop="emit('resize-start', 'right', $event, record)"
     ></div>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.cursor-row-resize {
+  cursor: ew-resize;
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 8f1a131dc8..cbb7b6b96b 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -335,17 +335,14 @@ const recordsAcrossAllRange = computed<{
         })
         const dayIndex = getDayIndex(startDate)
 
-        const { startHourIndex, endHourIndex, startMinutes, endMinutes } = calculateHourIndices(dayIndex, startDate, endDate)
-
-        console.log(startHourIndex, endHourIndex)
+        const { startHourIndex, startMinutes } = calculateHourIndices(dayIndex, startDate, endDate)
 
         let style: Partial<CSSStyleDeclaration> = {}
 
-        const spanHours = endHourIndex - startHourIndex + 1
-
-        const top = startHourIndex * perHeight
+        const top = (startHourIndex + startMinutes / 60) * perHeight
 
-        const height = (endHourIndex - startHourIndex + 1) * perHeight - spanHours - 5
+        const totalHours = endDate.diff(startDate, 'minute') / 60
+        const height = totalHours * perHeight
 
         style = {
           ...style,
@@ -565,85 +562,69 @@ const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[],
 
 const onResize = (event: MouseEvent) => {
   if (!isUIAllowed('dataEdit') || !container.value || !resizeRecord.value || !scrollContainer.value) return
-
   if (resizeRecord.value.rowMeta.range?.is_readonly) return
 
   const { width, left, top, bottom } = container.value.getBoundingClientRect()
-
-  const { scrollHeight } = container.value
+  const { scrollHeight, scrollTop } = container.value
 
   // If the mouse is near the bottom of the container, we scroll down
-  // If the mouse is near the top of the container, we scroll up
+  // If the mouse is near the top of the container, we scroll up  if (event.clientY > bottom - 20) {
   if (event.clientY > bottom - 20) {
     container.value.scrollTop += 10
   } else if (event.clientY < top + 20) {
     container.value.scrollTop -= 10
   }
 
-  // We calculate the percentage of the mouse position in the container
-  // percentX is used for the day and percentY is used for the hour
   const percentX = (event.clientX - left - window.scrollX) / width
-  const percentY = (event.clientY - top + container.value.scrollTop) / scrollHeight
-
-  const fromCol = resizeRecord.value.rowMeta.range?.fk_from_col
-  const toCol = resizeRecord.value.rowMeta.range?.fk_to_col
+  const percentY = (event.clientY - top + scrollTop) / scrollHeight
 
-  if (!fromCol || !toCol) return
+  const { range } = resizeRecord.value.rowMeta
+  const fromCol = range?.fk_from_col
+  const toCol = range?.fk_to_col
+  if (!fromCol?.title || !toCol?.title) return
 
-  const ogEndDate = dayjs(resizeRecord.value.row[toCol.title!])
-  const ogStartDate = dayjs(resizeRecord.value.row[fromCol.title!])
+  const ogStartDate = dayjs(resizeRecord.value.row[fromCol.title])
+  const ogEndDate = dayjs(resizeRecord.value.row[toCol.title])
 
   const day = Math.floor(percentX * maxVisibleDays.value)
   const hour = Math.floor(percentY * 23)
-  const minutes = Math.round((percentY * 24 * 60) % 60)
+  const minutes = Math.round((percentY * 24 * 60) / 15) * 15 // Round to nearest 15 minutes
 
-  let updateProperty: string[] = []
-  let newRow: Row = resizeRecord.value
+  const baseDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
 
-  if (resizeDirection.value === 'right') {
-    let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
-    updateProperty = [toCol.title!]
+  let newDate: dayjs.Dayjs
+  let updateProperty: string
+  let isValid = true
 
-    // If the new end date is before the start date, we set the new end date to the start date
-    if (dayjs(newEndDate).isBefore(ogStartDate, 'day')) {
-      newEndDate = ogStartDate.clone()
-    }
-
-    if (!newEndDate.isValid()) return
-
-    newRow = {
-      ...resizeRecord.value,
-      row: {
-        ...resizeRecord.value.row,
-        [toCol.title!]: newEndDate.format(updateFormat.value),
-      },
-    }
+  if (resizeDirection.value === 'right') {
+    newDate = baseDate.isBefore(ogStartDate)
+      ? ogStartDate.add(Math.ceil(ogStartDate.diff(baseDate, 'minute') / 15) * 15, 'minute')
+      : baseDate
+    updateProperty = toCol.title
   } else if (resizeDirection.value === 'left') {
-    let newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
-    updateProperty = [fromCol.title!]
+    newDate = baseDate.isAfter(ogEndDate)
+      ? ogEndDate.subtract(Math.ceil(baseDate.diff(ogEndDate, 'minute') / 15) * 15, 'minute')
+      : baseDate
+    updateProperty = fromCol.title
+  } else {
+    isValid = false
+  }
 
-    // If the new start date is after the end date, we set the new start date to the end date
-    if (dayjs(newStartDate).isAfter(ogEndDate)) {
-      newStartDate = dayjs(dayjs(ogEndDate)).clone()
-    }
-    if (!newStartDate) return
-
-    newRow = {
-      ...resizeRecord.value,
-      row: {
-        ...resizeRecord.value.row,
-        [fromCol.title!]: dayjs(newStartDate).format(updateFormat.value),
-      },
-    }
+  if (!isValid || !newDate.isValid()) return
+
+  const newRow = {
+    ...resizeRecord.value,
+    row: {
+      ...resizeRecord.value.row,
+      [updateProperty]: newDate.format(updateFormat.value),
+    },
   }
 
   const newPk = extractPkFromRow(newRow.row, meta.value!.columns!)
 
-  formattedData.value = formattedData.value.map((r) => {
-    const pk = extractPkFromRow(r.row, meta.value!.columns!)
-    return pk === newPk ? newRow : r
-  })
-  useDebouncedRowUpdate(newRow, updateProperty, false)
+  formattedData.value = formattedData.value.map((r) => (extractPkFromRow(r.row, meta.value!.columns!) === newPk ? newRow : r))
+
+  useDebouncedRowUpdate(newRow, [updateProperty], false)
 }
 
 const onResizeEnd = () => {
@@ -710,10 +691,11 @@ const calculateNewRow = (
 
   if (toCol) {
     const fromDate = dragRecord.value.row[fromCol.title!] ? dayjs(dragRecord.value.row[fromCol.title!]) : null
-    const toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : null
+    const toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : fromDate?.clone()
 
     if (fromDate && toDate) {
-      endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
+      const newMinutes = Math.round(toDate.diff(fromDate, 'minute') / 15) * 15
+      endDate = newStartDate.add(newMinutes, 'minute')
     } else if (fromDate && !toDate) {
       endDate = dayjs(newStartDate).endOf('day')
     } else if (!fromDate && toDate) {
@@ -722,15 +704,14 @@ const calculateNewRow = (
       endDate = newStartDate.clone()
     }
 
+    if (endDate.isBefore(newStartDate)) {
+      endDate = newStartDate.clone().add(15, 'minutes')
+    }
+
     newRow.row[toCol.title!] = dayjs(endDate).format(updateFormat.value)
     updatedProperty.push(toCol.title!)
   }
 
-  // If from and to columns of the dragRecord and the newRow are the same, we don't manipulate the formattedRecords and formattedSideBarData. This removes unwanted computation
-  if (dragRecord.value.row[fromCol.title!] === newRow.row[fromCol.title!] && !skipChangeCheck) {
-    return { newRow: null, updatedProperty: [] }
-  }
-
   if (!newRow) return { newRow: null, updatedProperty: [] }
 
   const newPk = extractPkFromRow(newRow.row, meta.value!.columns!)

From cdcb37e99d8a316d23a9858d70a343b7e8fd4ec6 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:11 +0000
Subject: [PATCH 16/50] fix: height calculation of resize

---
 .../components/smartsheet/calendar/WeekView/DateTimeField.vue  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index cbb7b6b96b..f6e4374e92 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -587,10 +587,9 @@ const onResize = (event: MouseEvent) => {
   const ogEndDate = dayjs(resizeRecord.value.row[toCol.title])
 
   const day = Math.floor(percentX * maxVisibleDays.value)
-  const hour = Math.floor(percentY * 23)
   const minutes = Math.round((percentY * 24 * 60) / 15) * 15 // Round to nearest 15 minutes
 
-  const baseDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
+  const baseDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(minutes, 'minute')
 
   let newDate: dayjs.Dayjs
   let updateProperty: string

From 31dc03a1b1e094d2c66b1ab30faecd78d2c2048b Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:12 +0000
Subject: [PATCH 17/50] fix: month view broken

---
 packages/nc-gui/components/smartsheet/calendar/MonthView.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 32f1ddb191..d51f3ed93e 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -124,8 +124,7 @@ const calendarData = computed(() => {
           isWeekend: day.get('day') === 0 || day.get('day') === 6,
           isToday: day.isSame(today, 'date'),
           isInPagedMonth: day.isSame(startOfMonth, 'month'),
-          isVisible:
-            maxVisibleDays.value === 7 || (maxVisibleDays.value === 5 && !(day.get('day') !== 0 && day.get('day') !== 6)),
+          isVisible: maxVisibleDays.value === 5 ? day.get('day') !== 0 && day.get('day') !== 6 : true,
           dayNumber: day.format('DD'),
         }
       }),

From 446e1c1117025e94fc4d8c86a534ba2d4453ca7b Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:12 +0000
Subject: [PATCH 18/50] fix: resize cursor not working

---
 .../nc-gui/components/smartsheet/calendar/VRecordCard.vue   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index 180abc010a..e12595ea29 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -32,7 +32,7 @@ const emit = defineEmits(['resize-start'])
   >
     <div
       v-if="resize"
-      class="absolute w-full h-1 z-20 top-0 !cursor-row-resize"
+      class="absolute w-full h-1 z-20 top-0 cursor-row-resize"
       @mousedown.stop="emit('resize-start', 'left', $event, record)"
     ></div>
     <div
@@ -61,7 +61,7 @@ const emit = defineEmits(['resize-start'])
     </div>
     <div
       v-if="resize"
-      class="absolute !cursor-row-resize w-full bottom-0 w-full h-1"
+      class="absolute cursor-row-resize w-full bottom-0 w-full h-1"
       @mousedown.stop="emit('resize-start', 'right', $event, record)"
     ></div>
   </div>
@@ -69,6 +69,6 @@ const emit = defineEmits(['resize-start'])
 
 <style lang="scss" scoped>
 .cursor-row-resize {
-  cursor: ew-resize;
+  cursor: ns-resize;
 }
 </style>

From eb7e60a8c92ae67e39f767a932db510129dd0c74 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:12 +0000
Subject: [PATCH 19/50] fix: resizing in day DateTimeField.vue

---
 .../smartsheet/calendar/DayView/DateTimeField.vue         | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 7435e35a84..b3b81a200c 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -504,7 +504,6 @@ const calculateNewRow = (event: MouseEvent, skipChangeCheck?: boolean) => {
   // We calculate the hour based on the percentage of the mouse position in the scroll container
   // It can be between 0 and 23 (inclusive)
   const hour = Math.max(Math.floor(percentY * 23), 0)
-
   const minutes = Math.min(Math.max(Math.round(Math.floor((percentY * 23 - hour) * 60) / 15) * 15, 0), 60)
   // We calculate the new startDate by adding the hour to the start of the selected date
   const newStartDate = dayjs(selectedDate.value).startOf('day').add(hour, 'hour').add(minutes, 'minute')
@@ -601,15 +600,14 @@ const onResize = (event: MouseEvent) => {
   const ogEndDate = dayjs(resizeRecord.value.row[toCol.title!])
   const ogStartDate = dayjs(resizeRecord.value.row[fromCol.title!])
 
-  const hour = Math.floor(percentY * 24) // Round down to the nearest hour
-  const minutes = Math.round((percentY * 24 * 60) % 60)
+  const minutes = Math.round((percentY * 24 * 60) / 15) * 15 // Round to nearest 15 minutes
 
   let newRow: Row | null = null
   let updateProperty: string[] = []
 
   if (resizeDirection.value === 'right') {
     // If the user is resizing the record to the right, we calculate the new end date based on the mouse position
-    let newEndDate = dayjs(selectedDate.value).add(hour, 'hour').add(minutes, 'minute')
+    let newEndDate = dayjs(selectedDate.value).startOf('day').add(minutes, 'minute')
 
     updateProperty = [toCol.title!]
 
@@ -629,7 +627,7 @@ const onResize = (event: MouseEvent) => {
       },
     }
   } else if (resizeDirection.value === 'left') {
-    let newStartDate = dayjs(selectedDate.value).add(hour, 'hour').add(minutes, 'minute')
+    let newStartDate = dayjs(selectedDate.value).startOf('day').add(minutes, 'minute')
 
     updateProperty = [fromCol.title!]
 

From 582beffa07a5d23c8307327a577932f1a617d47f Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:12 +0000
Subject: [PATCH 20/50] fix: min record size is 1 hour

---
 .../components/smartsheet/calendar/VRecordCard.vue     |  2 +-
 .../smartsheet/calendar/WeekView/DateTimeField.vue     | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index e12595ea29..af1df3a51c 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -44,7 +44,7 @@ const emit = defineEmits(['resize-start'])
         'bg-pink-500': color === 'pink',
         'bg-purple-500': color === 'purple',
       }"
-      class="h-full min-h-9 w-1.25 -ml-0.25 rounded-l-md"
+      class="h-full min-h-3 w-1.25 -ml-0.25 rounded-l-md"
     ></div>
 
     <div class="flex overflow-x-hidden whitespace-nowrap text-ellipsis pt-1 w-full truncate text-ellipsis flex-col gap-1">
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index f6e4374e92..61d66663fb 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -596,14 +596,24 @@ const onResize = (event: MouseEvent) => {
   let isValid = true
 
   if (resizeDirection.value === 'right') {
+    const minEndDate = ogStartDate.add(1, 'hour')
     newDate = baseDate.isBefore(ogStartDate)
       ? ogStartDate.add(Math.ceil(ogStartDate.diff(baseDate, 'minute') / 15) * 15, 'minute')
       : baseDate
+
+    if (newDate.isBefore(minEndDate)) {
+      newDate = minEndDate
+    }
     updateProperty = toCol.title
   } else if (resizeDirection.value === 'left') {
+    const minStartDate = ogEndDate.subtract(1, 'hour')
     newDate = baseDate.isAfter(ogEndDate)
       ? ogEndDate.subtract(Math.ceil(baseDate.diff(ogEndDate, 'minute') / 15) * 15, 'minute')
       : baseDate
+
+    if (newDate.isAfter(minStartDate)) {
+      newDate = minStartDate
+    }
     updateProperty = fromCol.title
   } else {
     isValid = false

From f152ff1da270f932010febd73444e1c16349ed3a Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:12 +0000
Subject: [PATCH 21/50] fix: key fixes

---
 .../smartsheet/calendar/DayView/DateTimeField.vue           | 2 +-
 .../nc-gui/components/smartsheet/calendar/MonthView.vue     | 6 +++---
 .../smartsheet/calendar/WeekView/DateTimeField.vue          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index b3b81a200c..86fd77c9f9 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -1053,7 +1053,7 @@ watch(
     </div>
     <div class="absolute inset-0 pointer-events-none">
       <div class="relative !ml-[68px] !mr-1 nc-calendar-day-record-container" data-testid="nc-calendar-day-record-container">
-        <template v-for="(record, rowIndex) in recordsAcrossAllRange.record" :key="rowIndex">
+        <template v-for="record in recordsAcrossAllRange.record" :key="record.rowMeta.id">
           <div
             v-if="record.rowMeta.style?.display !== 'none'"
             :data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index d51f3ed93e..41ac22ce41 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -857,11 +857,11 @@ const addRecord = (date: dayjs.Dayjs) => {
       </div>
     </div>
     <div class="absolute inset-0 z-2 pointer-events-none mt-8 pb-7.5" data-testid="nc-calendar-month-record-container">
-      <template v-for="(record, recordIndex) in recordsToDisplay.records" :key="recordIndex">
+      <template v-for="record in recordsToDisplay.records" :key="record.rowMeta.id">
         <div
           v-if="record.rowMeta.style?.display !== 'none'"
           :data-testid="`nc-calendar-month-record-${record.row[displayField!.title!]}`"
-          :data-unique-id="`${record.rowMeta.id}-${record.rowMeta.recordIndex}`"
+          :data-unique-id="`${record.rowMeta.id}`"
           :style="{
             ...record.rowMeta.style,
             zIndex: record.rowMeta.id === draggingId ? 100 : 0,
@@ -891,7 +891,7 @@ const addRecord = (date: dayjs.Dayjs) => {
                   {{ dayjs(record.row[record.rowMeta.range?.fk_from_col!.title!]).format('h:mma').slice(0, -1) }}
                 </span>
               </template>
-              <template v-for="(field, id) in fields" :key="id">
+              <template v-for="(field, id) in fields" :key="field.id">
                 <LazySmartsheetPlainCell
                   v-if="!isRowEmpty(record, field!)"
                   v-model="record.row[field!.title!]"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 61d66663fb..5e76b74975 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -993,7 +993,7 @@ watch(
       </div>
 
       <div class="absolute pointer-events-none inset-0 overflow-hidden !mt-5.95" data-testid="nc-calendar-week-record-container">
-        <template v-for="(record, rowIndex) in recordsAcrossAllRange.records" :key="rowIndex">
+        <template v-for="record in recordsAcrossAllRange.records" :key="record.rowMeta.id">
           <div
             v-if="record.rowMeta.style?.display !== 'none'"
             :data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`"

From 80b75bf17e4999dead28921717abb0af999fcabe Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:12 +0000
Subject: [PATCH 22/50] fix: key revert

---
 packages/nc-gui/components/smartsheet/calendar/MonthView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 41ac22ce41..21efd4843f 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -857,7 +857,7 @@ const addRecord = (date: dayjs.Dayjs) => {
       </div>
     </div>
     <div class="absolute inset-0 z-2 pointer-events-none mt-8 pb-7.5" data-testid="nc-calendar-month-record-container">
-      <template v-for="record in recordsToDisplay.records" :key="record.rowMeta.id">
+      <template v-for="(record, recordId) in recordsToDisplay.records" :key="recordId">
         <div
           v-if="record.rowMeta.style?.display !== 'none'"
           :data-testid="`nc-calendar-month-record-${record.row[displayField!.title!]}`"

From ad768b97d363cb9870dee4287345a5fe5ab379f2 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:12 +0000
Subject: [PATCH 23/50] fix: days spanning records in datetime day

---
 .../calendar/DayView/DateTimeField.vue        | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 86fd77c9f9..5aab28adf6 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
 import { type ColumnType, UITypes } from 'nocodb-sdk'
+import type { Row } from '~/lib/types'
 
 const emit = defineEmits(['expandRecord', 'newRecord'])
 
@@ -237,32 +238,33 @@ const recordsAcrossAllRange = computed<{
   >()
 
   const recordsByRange: Array<Row> = []
+  const recordSpanningDays: Array<Row> = []
 
   calendarRange.value.forEach((range) => {
-    const fromCol = range.fk_from_col
-    const endCol = range.fk_to_col
+    const { fk_from_col: fromCol, fk_to_col: endCol } = range
 
     // We fetch all the records that match the calendar ranges in a single time.
     // But not all fetched records are valid for the certain range, so we filter them out & sort them
     const sortedFormattedData = [...formattedData.value]
       .filter((record) => {
-        const fromDate = record.row[fromCol!.title!] ? dayjs(record.row[fromCol!.title!]) : null
+        const fromDate = record.row[fromCol?.title] ? dayjs(record.row[fromCol?.title!]) : null
 
         if (fromCol && endCol) {
-          const fromDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
           const toDate = record.row[endCol.title!] ? dayjs(record.row[endCol.title!]) : null
 
-          return fromDate && toDate?.isValid() ? fromDate.isSameOrBefore(toDate) : true
-        } else if (fromCol && !endCol) {
-          return !!fromDate
+          if (fromDate?.isValid() && toDate?.isValid()) {
+            if (!fromDate.isSame(toDate, 'day')) {
+              recordSpanningDays.push(record)
+              return false
+            }
+            return fromDate.isSameOrBefore(toDate)
+          }
+          return true
         }
-        return false
-      })
-      .sort((a, b) => {
-        const aDate = dayjs(a.row[fromCol!.title!])
-        const bDate = dayjs(b.row[fromCol!.title!])
-        return aDate.isBefore(bDate) ? 1 : -1
+
+        return fromCol ? !!fromDate : false
       })
+      .sort((a, b) => (dayjs(a.row[fromCol!.title!]).isBefore(dayjs(b.row[fromCol!.title!])) ? 1 : -1))
 
     for (const record of sortedFormattedData) {
       const id = record.rowMeta.id ?? generateRandomNumber()

From 905ea118bf8879783fbab35a3f2c7afa69cdebeb Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:12 +0000
Subject: [PATCH 24/50] fix: datetime day height calculation

---
 .../components/smartsheet/calendar/DayView/DateTimeField.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 5aab28adf6..512a4dc3ab 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -281,7 +281,7 @@ const recordsAcrossAllRange = computed<{
 
         // A minimum height of 52px is set for each record
         // The height of the record is calculated based on the difference between the start and end date
-        const heightInPixels = Math.max(endDate.diff(startDate, 'minute'), perRecordHeight)
+        const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 52, perRecordHeight)
 
         const style: Partial<CSSStyleDeclaration> = {
           height: `${heightInPixels - 2}px`,

From 748e4d97f64008beb19e9e86581422ba6af1683a Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:12 +0000
Subject: [PATCH 25/50] fix: spanning records feat: updated styles

---
 .../calendar/DateTimeSpanningContainer.vue    | 304 ++++++++++++++++
 .../smartsheet/calendar/DayView/DateField.vue |   8 +-
 .../calendar/DayView/DateTimeField.vue        | 339 +++++++++---------
 .../smartsheet/calendar/MonthView.vue         |  44 ++-
 .../smartsheet/calendar/RecordCard.vue        |  20 +-
 .../smartsheet/calendar/VRecordCard.vue       |  12 +-
 .../calendar/WeekView/DateField.vue           |   3 +-
 .../calendar/WeekView/DateTimeField.vue       |  48 ++-
 .../smartsheet/toolbar/Calendar/Range.vue     |  71 ++--
 9 files changed, 611 insertions(+), 238 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
new file mode 100644
index 0000000000..a038dfd4a5
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import type { Row } from '#imports'
+
+const props = defineProps<{
+  records: Row[]
+}>()
+
+const emit = defineEmits(['expandRecord', 'newRecord'])
+
+const container = ref<null | HTMLElement>(null)
+
+const { $e } = useNuxtApp()
+
+const { width: containerWidth } = useElementSize(container)
+
+const meta = inject(MetaInj, ref())
+
+const { isUIAllowed } = useRoles()
+
+const records = toRef(props, 'records')
+
+const fields = inject(FieldsInj, ref())
+
+const { fields: _fields } = useViewColumnsOrThrow()
+
+const fieldStyles = computed(() => {
+  return (_fields.value ?? []).reduce((acc, field) => {
+    acc[field.fk_column_id!] = {
+      bold: !!field.bold,
+      italic: !!field.italic,
+      underline: !!field.underline,
+    }
+    return acc
+  }, {} as Record<string, { bold?: boolean; italic?: boolean; underline?: boolean }>)
+})
+
+const {
+  selectedDate,
+  formattedData,
+  formattedSideBarData,
+  calendarRange,
+  updateRowProperty,
+  selectedDateRange,
+  viewMetaProperties,
+  displayField,
+  activeCalendarView,
+} = useCalendarViewStoreOrThrow()
+
+const maxVisibleDays = computed(() => {
+  return activeCalendarView.value === 'week' ? (viewMetaProperties.value?.hide_weekend ? 5 : 7) : 1
+})
+
+// This function is used to find the first suitable row for a record
+// It takes the recordsInDay object, the start day index and the span of the record in days
+// It returns the first suitable row for the entire span of the record
+const findFirstSuitableRow = (recordsInDay: any, startDayIndex: number, spanDays: number) => {
+  let row = 0
+  while (true) {
+    let isRowSuitable = true
+    // Check if the row is suitable for the entire span
+    for (let i = 0; i < spanDays; i++) {
+      const dayIndex = startDayIndex + i
+      if (!recordsInDay[dayIndex]) {
+        recordsInDay[dayIndex] = {}
+      }
+      // If the row is occupied, the entire span is not suitable
+      if (recordsInDay[dayIndex][row]) {
+        isRowSuitable = false
+        break
+      }
+    }
+    // If the row is suitable, return it
+    if (isRowSuitable) {
+      return row
+    }
+    row++
+  }
+}
+
+const viewStartDate = computed(() => {
+  if (activeCalendarView.value === 'week') {
+    return selectedDateRange.value.start
+  } else {
+    return selectedDate.value
+  }
+})
+
+const isInRange = (date: dayjs.Dayjs) => {
+  if (activeCalendarView.value === 'day') {
+    return date.isSame(selectedDate.value, 'day')
+  } else {
+    const rangeEndDate =
+      maxVisibleDays.value === 5 ? dayjs(selectedDateRange.value.end).subtract(2, 'day') : dayjs(selectedDateRange.value.end)
+
+    return (
+      date && date.isBetween(dayjs(selectedDateRange.value.start).startOf('day'), dayjs(rangeEndDate).endOf('day'), 'day', '[]')
+    )
+  }
+}
+
+const calendarData = computed(() => {
+  if (!records.value?.length || !calendarRange.value) return []
+
+  const recordsInDay = Array.from({ length: 7 }, () => ({})) as Record<number, Record<number, boolean>>
+
+  const perDayWidth = containerWidth.value / maxVisibleDays.value
+
+  const recordsInRange = [] as Row[]
+  calendarRange.value.forEach(({ fk_from_col, fk_to_col }) => {
+    if (!fk_from_col || !fk_to_col) return
+    for (const record of records.value) {
+      const id = record.rowMeta.id ?? generateRandomNumber()
+
+      const startDate = dayjs(record.row[fk_from_col.title!])
+      const endDate = dayjs(record.row[fk_to_col.title!])
+
+      const startDayIndex = Math.max(startDate.diff(viewStartDate.value, 'day'), 0)
+      const endDayIndex = Math.min(endDate.diff(viewStartDate.value, 'day'), maxVisibleDays.value - 1)
+
+      const spanDays = endDayIndex - startDayIndex + 1
+
+      const row = findFirstSuitableRow(recordsInDay, startDayIndex, spanDays)
+
+      for (let i = 0; i < spanDays; i++) {
+        const dayIndex = startDayIndex + i
+        recordsInDay[dayIndex][row] = true
+      }
+
+      const isStartInRange = isInRange(startDate)
+      const isEndInRange = isInRange(endDate)
+
+      let position = 'none'
+      if (isStartInRange && isEndInRange) position = 'rounded'
+      else if (isStartInRange) position = 'leftRounded'
+      else if (isEndInRange) position = 'rightRounded'
+
+      const style: Partial<CSSStyleDeclaration> = {
+        top: `${row * 28 + row * 8}px`,
+        left: `${startDayIndex * perDayWidth}px`,
+        width: `${spanDays * perDayWidth + 8}px`,
+      }
+
+      recordsInRange.push({
+        ...record,
+        rowMeta: {
+          ...record.rowMeta,
+          style,
+          position,
+          range: { fk_from_col, fk_to_col },
+          id,
+        },
+      })
+    }
+  })
+
+  return recordsInRange
+})
+
+const dragElement = ref<HTMLElement | null>(null)
+
+const resizeInProgress = ref(false)
+
+const dragTimeout = ref<ReturnType<typeof setTimeout>>()
+
+const isDragging = ref(false)
+
+const dragRecord = ref<Row>()
+
+const resizeDirection = ref<'right' | 'left' | null>()
+
+const resizeRecord = ref<Row | null>(null)
+
+const hoverRecord = ref<string | null>()
+
+const onResizeStart = (record: Row, direction: 'right' | 'left') => {
+  resizeDirection.value = direction
+  resizeRecord.value = record
+}
+
+const dragStart = (event: MouseEvent, record: Row) => {
+  if (resizeInProgress.value) return
+  let target = event.target as HTMLElement
+
+  if (activeCalendarView.value === 'day') {
+    emit('expandRecord', record)
+    return
+  }
+
+  isDragging.value = false
+
+  dragTimeout.value = setTimeout(() => {
+    if (!isUIAllowed('dataEdit')) return
+    isDragging.value = true
+    while (!target.classList.contains('draggable-record')) {
+      target = target.parentElement as HTMLElement
+    }
+
+    // TODO: Implement dragOffset @DarkPhoenix2704
+    /*    dragOffset.value = {
+      x: event.clientX - target.getBoundingClientRect().left,
+      y: event.clientY - target.getBoundingClientRect().top,
+    } */
+
+    const allRecords = document.querySelectorAll('.draggable-record')
+    allRecords.forEach((el) => {
+      if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {
+        el.style.opacity = '30%'
+      }
+    })
+
+    isDragging.value = true
+    dragElement.value = target
+    dragRecord.value = record
+
+    // document.addEventListener('mousemove', onDrag)
+    // document.addEventListener('mouseup', stopDrag)
+  }, 200)
+
+  const onMouseUp = () => {
+    clearTimeout(dragTimeout.value!)
+    document.removeEventListener('mouseup', onMouseUp)
+    if (!isDragging.value) {
+      emit('expandRecord', record)
+    }
+  }
+
+  document.addEventListener('mouseup', onMouseUp)
+}
+</script>
+
+<template>
+  <div style="z-index: 100" class="sticky flex top-0 bg-white border-b-1 border-gray-100 prevent-select">
+    <div
+      style="width: 64px"
+      :style="{
+        width: `${activeCalendarView === 'week' ? '64px' : '66px'}`,
+      }"
+      class="text-xs top-0 text-right z-50 !sticky h-full left-0 text-[#6A7184] p-2"
+    >
+      All day
+    </div>
+    <div
+      ref="container"
+      :style="{
+        height: `min(64px)`,
+        width: 'calc(100% - 67px)',
+      }"
+      :class="{
+        'border-gray-100': activeCalendarView === 'day',
+        'border-gray-200': activeCalendarView === 'week',
+      }"
+      class="relative border-l-1 z-30 py-1"
+    >
+      <div class="pointer-events-none inset-y-0 relative">
+        <template v-for="(record, id) in calendarData" :key="id">
+          <div
+            v-if="record.rowMeta.style?.display !== 'none'"
+            :data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`"
+            :data-unique-id="record.rowMeta.id"
+            :style="{
+              ...record.rowMeta.style,
+            }"
+            class="absolute group draggable-record pointer-events-auto nc-calendar-week-record-card"
+            @mouseleave="hoverRecord = null"
+            @mouseover="hoverRecord = record.rowMeta.id"
+            @mousedown.stop="dragStart($event, record)"
+          >
+            <LazySmartsheetRow :row="record">
+              <LazySmartsheetCalendarRecordCard
+                :hover="hoverRecord === record.rowMeta.id"
+                :position="record.rowMeta.position"
+                :record="record"
+                :resize="activeCalendarView === 'week'"
+                @dblclick.stop="emit('expandRecord', record)"
+                @resize-start="onResizeStart"
+              >
+                <template v-for="(field, index) in fields" :key="index">
+                  <LazySmartsheetPlainCell
+                    v-if="!isRowEmpty(record, field!)"
+                    v-model="record.row[field!.title!]"
+                    class="text-xs"
+                    :column="field"
+                    :bold="!!fieldStyles[field.id]?.bold"
+                    :italic="!!fieldStyles[field.id]?.italic"
+                    :underline="!!fieldStyles[field.id]?.underline"
+                  />
+                </template>
+              </LazySmartsheetCalendarRecordCard>
+            </LazySmartsheetRow>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.prevent-select {
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
index b49663127c..03a883a2b9 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
@@ -54,7 +54,7 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
         dayRecordCount++
 
         const style: Partial<CSSStyleDeclaration> = {
-          top: `${(dayRecordCount - 1) * perRecordHeight}px`,
+          top: `${(dayRecordCount - 1) * perRecordHeight + dayRecordCount * 8}px`,
           width: '100%',
         }
 
@@ -97,7 +97,7 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
             style: {
               width: '100%',
               left: '0',
-              top: `${(dayRecordCount - 1) * perRecordHeight}px`,
+              top: `${(dayRecordCount - 1) * perRecordHeight + dayRecordCount * 8}px`,
             },
             position: 'rounded',
           },
@@ -212,17 +212,15 @@ const newRecord = () => {
       v-for="(record, rowIndex) in recordsAcrossAllRange"
       :key="rowIndex"
       :style="record.rowMeta.style"
-      class="absolute mt-2"
+      class="absolute"
       data-testid="nc-calendar-day-record-card"
       @mouseleave="hoverRecord = null"
       @mouseover="hoverRecord = record.rowMeta.id as string"
     >
       <LazySmartsheetRow :row="record">
         <LazySmartsheetCalendarRecordCard
-          :position="record.rowMeta.position"
           :record="record"
           :resize="false"
-          color="blue"
           size="small"
           @click.prevent="emit('expandRecord', record)"
         >
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 512a4dc3ab..ed8e31f065 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -73,6 +73,10 @@ const overlayTop = computed(() => {
   return top
 })
 
+const shouldEnableOverlay = computed(() => {
+  return !isPublic.value && dayjs().isSame(selectedDate.value, 'day')
+})
+
 onMounted(() => {
   const intervalId = setInterval(() => {
     currTime.value = dayjs()
@@ -213,6 +217,7 @@ const getMaxOverlaps = ({
 
 const recordsAcrossAllRange = computed<{
   record: Row[]
+  spanningRecords: Row[]
   gridTimeMap: Map<
     number,
     {
@@ -254,6 +259,7 @@ const recordsAcrossAllRange = computed<{
 
           if (fromDate?.isValid() && toDate?.isValid()) {
             if (!fromDate.isSame(toDate, 'day')) {
+              // TODO: If multiple range is introduced, we have to make sure no duplicate records are inserted
               recordSpanningDays.push(record)
               return false
             }
@@ -288,30 +294,10 @@ const recordsAcrossAllRange = computed<{
           top: `${topInPixels + 1}px`,
         }
 
-        // This property is used to determine which side the record should be rounded. It can be top, bottom, both or none
-        // We use the start and end date to determine the position of the record
-        let position = 'none'
-        const isSelectedDay = (date: dayjs.Dayjs) => date.isSame(selectedDate.value, 'day')
-        const isBeforeSelectedDay = (date: dayjs.Dayjs) => date.isBefore(selectedDate.value, 'day')
-        const isAfterSelectedDay = (date: dayjs.Dayjs) => date.isAfter(selectedDate.value, 'day')
-
-        if (isSelectedDay(startDate) && isSelectedDay(endDate)) {
-          position = 'rounded'
-        } else if (isBeforeSelectedDay(startDate) && isAfterSelectedDay(endDate)) {
-          position = 'none'
-        } else if (isSelectedDay(startDate) && isAfterSelectedDay(endDate)) {
-          position = 'topRounded'
-        } else if (isBeforeSelectedDay(startDate) && isSelectedDay(endDate)) {
-          position = 'bottomRounded'
-        } else {
-          position = 'none'
-        }
-
         recordsByRange.push({
           ...record,
           rowMeta: {
             ...record.rowMeta,
-            position,
             style,
             id,
             range: range as any,
@@ -329,7 +315,6 @@ const recordsAcrossAllRange = computed<{
 
         // The top of the record is calculated based on the start hour
         // Update such that it is also based on Minutes
-
         const topInPixels = (startDate.minute() / 60 + startDate.hour()) * perRecordHeight
 
         // A minimum height of 80px is set for each record
@@ -347,7 +332,6 @@ const recordsAcrossAllRange = computed<{
             range: range as any,
             style,
             id,
-            position: 'rounded',
           },
         })
       }
@@ -460,14 +444,15 @@ const recordsAcrossAllRange = computed<{
     record.rowMeta.style = {
       ...record.rowMeta.style,
       display,
-      width: `${width.toFixed(2)}%`,
-      left: `${left.toFixed(2)}%`,
+      width: `calc(${width.toFixed(2)}% - 8px)`,
+      left: `calc(${left.toFixed(2)}% + 4px)`,
     }
   }
 
   return {
     gridTimeMap,
     record: recordsByRange,
+    spanningRecords: recordSpanningDays,
   }
 })
 
@@ -902,82 +887,83 @@ watch(
   },
   { immediate: true },
 )
+
+const expandRecord = (record: Row) => {
+  emit('expandRecord', record)
+}
 </script>
 
 <template>
-  <div
-    ref="container"
-    class="w-full flex relative no-selection h-[calc(100vh-5.3rem)] overflow-y-auto nc-scrollbar-md"
-    data-testid="nc-calendar-day-view"
-    @drop="dropEvent"
-  >
-    <div
-      v-if="!isPublic && dayjs().isSame(selectedDate, 'day')"
-      class="absolute ml-2 pointer-events-none w-full z-4"
-      :style="{
-        top: `${overlayTop}px`,
-      }"
-    >
-      <div class="flex w-full items-center">
-        <span
-          class="text-brand-500 text-xs rounded-md border-1 pointer-events-auto px-0.5 border-brand-200 cursor-pointer bg-brand-50"
-          @click="newRecord(currTime)"
-        >
-          {{ currTime.format('hh:mm A') }}
-        </span>
-        <div class="flex-1 border-b-1 border-brand-500"></div>
-      </div>
-    </div>
-
-    <div>
+  <div class="h-[calc(100vh-5.3rem)] overflow-y-auto nc-scrollbar-md">
+    <SmartsheetCalendarDateTimeSpanningContainer :records="recordsAcrossAllRange.spanningRecords" @expand-record="expandRecord" />
+    <div ref="container" class="w-full flex relative no-selection" data-testid="nc-calendar-day-view" @drop="dropEvent">
       <div
-        v-for="(hour, index) in hours"
-        :key="index"
-        class="flex h-13 relative border-1 group hover:bg-gray-50 border-white"
-        data-testid="nc-calendar-day-hour"
-        @click="selectHour(hour)"
-        @dblclick="newRecord(hour)"
+        v-if="shouldEnableOverlay"
+        class="absolute ml-2 pointer-events-none w-full z-4"
+        :style="{
+          top: `${overlayTop}px`,
+        }"
       >
-        <div class="w-16 border-b-0 pr-2 pl-2 text-right text-xs text-gray-400 font-semibold h-13">
-          {{ dayjs(hour).format('hh a') }}
+        <div class="flex w-full items-center">
+          <span
+            class="text-brand-500 text-xs rounded-md border-1 pointer-events-auto px-0.5 border-brand-200 cursor-pointer bg-brand-50"
+            @click="newRecord(currTime)"
+          >
+            {{ currTime.format('hh:mm A') }}
+          </span>
+          <div class="flex-1 border-b-1 border-brand-500"></div>
         </div>
       </div>
-    </div>
-    <div class="w-full">
-      <div
-        v-for="(hour, index) in hours"
-        :key="index"
-        :class="{
-          '!border-brand-500': hour.isSame(selectedTime),
-        }"
-        class="flex w-full border-l-gray-100 h-13 transition nc-calendar-day-hour relative border-1 group hover:bg-gray-50 border-white border-b-gray-100"
-        data-testid="nc-calendar-day-hour"
-        @click="selectHour(hour)"
-        @dblclick="newRecord(hour)"
-      >
-        <NcDropdown
-          v-if="calendarRange.length > 1 && !isPublic"
+
+      <div>
+        <div
+          v-for="(hour, index) in hours"
+          :key="index"
+          class="flex h-13 relative border-1 group hover:bg-gray-50 border-white"
+          data-testid="nc-calendar-day-hour"
+          @click="selectHour(hour)"
+          @dblclick="newRecord(hour)"
+        >
+          <div class="w-16 border-b-0 pr-2 pl-2 text-right text-xs text-gray-400 font-semibold h-13">
+            {{ dayjs(hour).format('hh a') }}
+          </div>
+        </div>
+      </div>
+      <div class="w-full">
+        <div
+          v-for="(hour, index) in hours"
+          :key="index"
           :class="{
-            '!block': hour.isSame(selectedTime),
-            '!hidden': !hour.isSame(selectedTime),
+            'selected-hour': hour.isSame(selectedTime),
           }"
-          auto-close
+          class="flex w-full border-l-gray-100 h-13 transition nc-calendar-day-hour relative border-1 group hover:bg-gray-50 border-white border-b-gray-100"
+          data-testid="nc-calendar-day-hour"
+          @click="selectHour(hour)"
+          @dblclick="newRecord(hour)"
         >
-          <NcButton
-            class="!group-hover:block mr-12 my-auto ml-auto z-10 top-0 bottom-0 !group-hover:block absolute"
-            size="xsmall"
-            type="secondary"
+          <NcDropdown
+            v-if="calendarRange.length > 1 && !isPublic"
+            :class="{
+              '!block': hour.isSame(selectedTime),
+              '!hidden': !hour.isSame(selectedTime),
+            }"
+            auto-close
           >
-            <component :is="iconMap.plus" class="h-4 w-4" />
-          </NcButton>
-          <template #overlay>
-            <NcMenu class="w-64">
-              <NcMenuItem> Select date field to add </NcMenuItem>
-              <template v-for="(range, calIndex) in calendarRange" :key="calIndex">
-                <NcMenuItem
-                  v-if="!range.is_readonly"
-                  class="text-gray-800 font-semibold text-sm"
-                  @click="
+            <NcButton
+              class="!group-hover:block mr-12 my-auto ml-auto z-10 top-0 bottom-0 !group-hover:block absolute"
+              size="xsmall"
+              type="secondary"
+            >
+              <component :is="iconMap.plus" class="h-4 w-4" />
+            </NcButton>
+            <template #overlay>
+              <NcMenu class="w-64">
+                <NcMenuItem> Select date field to add </NcMenuItem>
+                <template v-for="(range, calIndex) in calendarRange" :key="calIndex">
+                  <NcMenuItem
+                    v-if="!range.is_readonly"
+                    class="text-gray-800 font-semibold text-sm"
+                    @click="
                 () => {
                   let record = {
                     row: {
@@ -995,26 +981,26 @@ watch(
                   emit('newRecord', record)
                 }
               "
-                >
-                  <div class="flex items-center gap-1">
-                    <LazySmartsheetHeaderCellIcon :column-meta="range.fk_from_col" />
-                    <span class="ml-1">{{ range.fk_from_col!.title! }}</span>
-                  </div>
-                </NcMenuItem>
-              </template>
-            </NcMenu>
-          </template>
-        </NcDropdown>
-        <NcButton
-          v-else-if="!isPublic && isUIAllowed('dataEdit') && [UITypes.DateTime, UITypes.Date].includes(calDataType)"
-          :class="{
-            '!block': hour.isSame(selectedTime),
-            '!hidden': !hour.isSame(selectedTime),
-          }"
-          class="!group-hover:block mr-12 my-auto ml-auto z-10 top-0 bottom-0 !group-hover:block absolute"
-          size="xsmall"
-          type="secondary"
-          @click="
+                  >
+                    <div class="flex items-center gap-1">
+                      <LazySmartsheetHeaderCellIcon :column-meta="range.fk_from_col" />
+                      <span class="ml-1">{{ range.fk_from_col!.title! }}</span>
+                    </div>
+                  </NcMenuItem>
+                </template>
+              </NcMenu>
+            </template>
+          </NcDropdown>
+          <NcButton
+            v-else-if="!isPublic && isUIAllowed('dataEdit') && [UITypes.DateTime, UITypes.Date].includes(calDataType)"
+            :class="{
+              '!block': hour.isSame(selectedTime),
+              '!hidden': !hour.isSame(selectedTime),
+            }"
+            class="!group-hover:block mr-12 my-auto ml-auto z-10 top-0 bottom-0 !group-hover:block absolute"
+            size="xsmall"
+            type="secondary"
+            @click="
           () => {
             let record = {
               row: {
@@ -1033,70 +1019,69 @@ watch(
             emit('newRecord', record)
           }
         "
-        >
-          <component :is="iconMap.plus" class="h-4 w-4" />
-        </NcButton>
-
-        <NcButton
-          v-if="isOverflowAcrossHourRange(hour).isOverflow"
-          v-e="`['c:calendar:week-view-more']`"
-          class="!absolute bottom-2 text-center w-15 mx-auto inset-x-0 z-3 text-gray-500"
-          size="xxsmall"
-          type="secondary"
-          @click="viewMore(hour)"
-        >
-          <span class="text-xs">
-            +
-            {{ isOverflowAcrossHourRange(hour).overflowCount }}
-            more
-          </span>
-        </NcButton>
-      </div>
-    </div>
-    <div class="absolute inset-0 pointer-events-none">
-      <div class="relative !ml-[68px] !mr-1 nc-calendar-day-record-container" data-testid="nc-calendar-day-record-container">
-        <template v-for="record in recordsAcrossAllRange.record" :key="record.rowMeta.id">
-          <div
-            v-if="record.rowMeta.style?.display !== 'none'"
-            :data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
-            :data-unique-id="record.rowMeta.id"
-            :style="record.rowMeta.style"
-            class="absolute draggable-record transition group cursor-pointer pointer-events-auto"
-            @mousedown="dragStart($event, record)"
-            @mouseleave="hoverRecord = null"
-            @mouseover="hoverRecord = record.rowMeta.id as string"
-            @dragover.prevent
           >
-            <LazySmartsheetRow :row="record">
-              <LazySmartsheetCalendarVRecordCard
-                :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
-                :selected="record.rowMeta.id === dragRecord?.rowMeta?.id"
-                :position="record.rowMeta!.position"
-                :record="record"
-                :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
-                color="blue"
-                @resize-start="onResizeStart"
-              >
-                <template v-for="(field, id) in fields" :key="id">
-                  <LazySmartsheetPlainCell
-                    v-if="!isRowEmpty(record, field!)"
-                    v-model="record.row[field!.title!]"
-                    class="text-xs font-medium"
-                    :bold="getFieldStyle(field).bold"
-                    :column="field"
-                    :italic="getFieldStyle(field).italic"
-                    :underline="getFieldStyle(field).underline"
-                  />
-                </template>
-                <template #time>
-                  <div class="text-xs font-medium text-gray-400">
-                    {{ dayjs(record.row[record.rowMeta.range?.fk_from_col!.title!]).format('h:mm a') }}
-                  </div>
-                </template>
-              </LazySmartsheetCalendarVRecordCard>
-            </LazySmartsheetRow>
-          </div>
-        </template>
+            <component :is="iconMap.plus" class="h-4 w-4" />
+          </NcButton>
+
+          <NcButton
+            v-if="isOverflowAcrossHourRange(hour).isOverflow"
+            v-e="`['c:calendar:week-view-more']`"
+            class="!absolute bottom-2 text-center w-15 mx-auto inset-x-0 z-3 text-gray-500"
+            size="xxsmall"
+            type="secondary"
+            @click="viewMore(hour)"
+          >
+            <span class="text-xs">
+              +
+              {{ isOverflowAcrossHourRange(hour).overflowCount }}
+              more
+            </span>
+          </NcButton>
+        </div>
+      </div>
+      <div class="absolute inset-0 pointer-events-none">
+        <div class="relative !ml-[68px] !mr-1 nc-calendar-day-record-container" data-testid="nc-calendar-day-record-container">
+          <template v-for="record in recordsAcrossAllRange.record" :key="record.rowMeta.id">
+            <div
+              v-if="record.rowMeta.style?.display !== 'none'"
+              :data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
+              :data-unique-id="record.rowMeta.id"
+              :style="record.rowMeta.style"
+              class="absolute draggable-record transition group cursor-pointer pointer-events-auto"
+              @mousedown="dragStart($event, record)"
+              @mouseleave="hoverRecord = null"
+              @mouseover="hoverRecord = record.rowMeta.id as string"
+              @dragover.prevent
+            >
+              <LazySmartsheetRow :row="record">
+                <LazySmartsheetCalendarVRecordCard
+                  :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
+                  :selected="record.rowMeta.id === dragRecord?.rowMeta?.id"
+                  :record="record"
+                  :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
+                  @resize-start="onResizeStart"
+                >
+                  <template v-for="(field, id) in fields" :key="id">
+                    <LazySmartsheetPlainCell
+                      v-if="!isRowEmpty(record, field!)"
+                      v-model="record.row[field!.title!]"
+                      class="text-xs font-medium"
+                      :bold="getFieldStyle(field).bold"
+                      :column="field"
+                      :italic="getFieldStyle(field).italic"
+                      :underline="getFieldStyle(field).underline"
+                    />
+                  </template>
+                  <template #time>
+                    <div class="text-xs font-medium text-gray-400">
+                      {{ dayjs(record.row[record.rowMeta.range?.fk_from_col!.title!]).format('h:mm a') }}
+                    </div>
+                  </template>
+                </LazySmartsheetCalendarVRecordCard>
+              </LazySmartsheetRow>
+            </div>
+          </template>
+        </div>
       </div>
     </div>
   </div>
@@ -1110,4 +1095,14 @@ watch(
   -ms-user-select: none;
   user-select: none;
 }
+
+.selected-hour {
+  @apply relative;
+  &:after {
+    @apply rounded-sm pointer-events-none absolute inset-0 w-full h-full;
+    content: '';
+    z-index: 3;
+    box-shadow: 0 0 0 2px #3366ff !important;
+  }
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 21efd4843f..441b4e85da 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -146,10 +146,10 @@ const recordsToDisplay = computed<{
 
   const perWidth = gridContainerWidth.value / maxVisibleDays.value
   const perHeight = gridContainerHeight.value / calendarData.value.weeks.length
-  const perRecordHeight = 24
+  const perRecordHeight = 28
 
   const spaceBetweenRecords = 27
-  const maxLanes = Math.floor((perHeight - spaceBetweenRecords) / (perRecordHeight + 4))
+  const maxLanes = Math.floor((perHeight - spaceBetweenRecords) / (perRecordHeight + 8))
 
   // Track records and lanes for each day
   const recordsInDay: {
@@ -202,17 +202,26 @@ const recordsToDisplay = computed<{
     const endCol = range.fk_to_col
 
     // Filter out records that don't satisfy the range and sort them by start date
-    const sortedFormattedData = [...formattedData.value].filter((record) => {
-      if (startCol && endCol) {
-        const fromDate = record.row[startCol.title!] ? dayjs(record.row[startCol.title!]) : null
-        const toDate = record.row[endCol.title!] ? dayjs(record.row[endCol.title!]) : null
-        return fromDate && toDate && !toDate.isBefore(fromDate)
-      } else if (startCol && !endCol) {
-        const fromDate = record.row[startCol!.title!] ? dayjs(record.row[startCol!.title!]) : null
-        return !!fromDate
-      }
-      return false
-    })
+    const sortedFormattedData = [...formattedData.value]
+      .filter((record) => {
+        if (startCol && endCol) {
+          const fromDate = record.row[startCol.title!] ? dayjs(record.row[startCol.title!]) : null
+          const toDate = record.row[endCol.title!] ? dayjs(record.row[endCol.title!]) : null
+          return fromDate && toDate && !toDate.isBefore(fromDate)
+        } else if (startCol && !endCol) {
+          const fromDate = record.row[startCol!.title!] ? dayjs(record.row[startCol!.title!]) : null
+          return !!fromDate
+        }
+        return false
+      })
+      .sort((a, b) => {
+        const aStart = dayjs(a.row[startCol.title!])
+        const aEnd = endCol ? dayjs(a.row[endCol.title!]) : aStart
+        const bStart = dayjs(b.row[startCol.title!])
+        const bEnd = endCol ? dayjs(b.row[endCol.title!]) : bStart
+
+        return bEnd.diff(bStart) - aEnd.diff(aStart)
+      })
 
     sortedFormattedData.forEach((record: Row) => {
       if (!endCol && startCol) {
@@ -922,7 +931,12 @@ const addRecord = (date: dayjs.Dayjs) => {
 }
 
 .selected-date {
-  z-index: 2;
-  box-shadow: 0 0 0 2px #3366ff !important;
+  @apply relative;
+  &:after {
+    @apply rounded-sm pointer-events-none absolute inset-0 w-full h-full;
+    content: '';
+    z-index: 3;
+    box-shadow: 0 0 0 2px #3366ff !important;
+  }
 }
 </style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index ab19ae4057..2cee918dc8 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -14,7 +14,7 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   resize: true,
   hover: false,
-  color: 'blue',
+  color: 'gray',
   size: 'small',
   position: 'rounded',
 })
@@ -25,21 +25,22 @@ const emit = defineEmits(['resize-start'])
 <template>
   <div
     :class="{
-      'h-6': size === 'small',
+      'h-7': size === 'small',
       'h-full': size === 'auto',
-      'rounded-l-md ml-1': position === 'leftRounded',
-      'rounded-r-md mr-1': position === 'rightRounded',
-      'rounded-md mx-1': position === 'rounded',
-      'rounded-none': position === 'none',
+      'rounded-l-[4px] !border-r-0 ml-1': position === 'leftRounded',
+      'rounded-r-[4px] !border-l-0 mr-1': position === 'rightRounded',
+      'rounded-[4px] mx-1': position === 'rounded',
+      'rounded-none !border-x-0': position === 'none',
       'bg-maroon-50': color === 'maroon',
       'bg-blue-50': color === 'blue',
       'bg-green-50': color === 'green',
       'bg-yellow-50': color === 'yellow',
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
+      'bg-white border-gray-200': color === 'gray',
       'shadow-md': hover,
     }"
-    class="relative transition-all flex items-center gap-2 group"
+    class="relative transition-all border-1 flex items-center gap-2 group"
   >
     <div
       v-if="position === 'leftRounded' || position === 'rounded'"
@@ -50,8 +51,9 @@ const emit = defineEmits(['resize-start'])
         'bg-yellow-500': color === 'yellow',
         'bg-pink-500': color === 'pink',
         'bg-purple-500': color === 'purple',
+        'bg-gray-900': color === 'gray',
       }"
-      class="w-1 min-h-6 bg-blue-500 rounded-x rounded-l-md"
+      class="w-1 min-h-6.5 rounded-l-[4px] bg-blue-500"
     ></div>
 
     <div
@@ -76,7 +78,7 @@ const emit = defineEmits(['resize-start'])
           </template>
         </NcTooltip>
       </div>
-      <span v-if="position === 'leftRounded' || position === 'none'" class="absolute my-0 right-5"> .... </span>
+      <span v-if="position === 'leftRounded' || position === 'none'" class="absolute my-0 z-10 right-5"> .... </span>
     </div>
 
     <div
diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index af1df3a51c..a9bbd553bc 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -11,7 +11,7 @@ withDefaults(defineProps<Props>(), {
   resize: true,
   selected: false,
   hover: false,
-  color: 'blue',
+  color: 'gray',
 })
 
 const emit = defineEmits(['resize-start'])
@@ -26,9 +26,10 @@ const emit = defineEmits(['resize-start'])
       'bg-yellow-50': color === 'yellow',
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
+      'bg-white border-gray-200': color === 'gray',
       'shadow-md': hover,
     }"
-    class="relative flex gap-2 relative rounded-md h-full"
+    class="relative flex gap-2 border-1 relative rounded-md h-full"
   >
     <div
       v-if="resize"
@@ -43,6 +44,7 @@ const emit = defineEmits(['resize-start'])
         'bg-yellow-500': color === 'yellow',
         'bg-pink-500': color === 'pink',
         'bg-purple-500': color === 'purple',
+        'bg-gray-900': color === 'gray',
       }"
       class="h-full min-h-3 w-1.25 -ml-0.25 rounded-l-md"
     ></div>
@@ -71,4 +73,10 @@ const emit = defineEmits(['resize-start'])
 .cursor-row-resize {
   cursor: ns-resize;
 }
+
+.plain-cell {
+  .bold {
+    @apply !text-gray-800 font-semibold;
+  }
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index b86f47239d..b60824d138 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -157,7 +157,7 @@ const calendarData = computed(() => {
           style: {
             width: `calc(max(${spanDays} * ${perDayWidth}px, ${perDayWidth}px))`,
             left: `${startDaysDiff * perDayWidth}px`,
-            top: `${suitableRow * 28}px`,
+            top: `${suitableRow * 28 + suitableRow * 8}px`,
           },
         },
       })
@@ -560,7 +560,6 @@ const addRecord = (date: dayjs.Dayjs) => {
               :position="record.rowMeta.position"
               :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
-              color="blue"
               @dblclick.stop="emits('expandRecord', record)"
               @resize-start="onResizeStart"
             >
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 5e76b74975..e637936515 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -268,11 +268,13 @@ const recordsAcrossAllRange = computed<{
       }
     >
   >
+  spanningRecords: Row[]
 }>(() => {
   if (!formattedData.value || !calendarRange.value || !container.value || !scrollContainer.value)
     return {
       records: [],
       gridTimeMap: new Map(),
+      spanningRecords: [],
     }
   const perWidth = containerWidth.value / maxVisibleDays.value
   const perHeight = 52
@@ -529,8 +531,8 @@ const recordsAcrossAllRange = computed<{
       }
       record.rowMeta.style = {
         ...record.rowMeta.style,
-        left: `calc(${majorLeft}px + ${left}%)`,
-        width: `calc(${width}%)`,
+        left: `calc(${majorLeft}px + ${left}% + 4px)`,
+        width: `calc(${width}% - 8px)`,
         display,
       }
     }
@@ -539,6 +541,7 @@ const recordsAcrossAllRange = computed<{
   return {
     records: recordsToDisplay,
     gridTimeMap,
+    spanningRecords: recordSpanningDays,
   }
 })
 
@@ -895,18 +898,24 @@ watch(
   },
   { immediate: true },
 )
+
+const expandRecord = (record: Row) => {
+  emits('expandRecord', record)
+}
 </script>
 
 <template>
   <div
     ref="scrollContainer"
-    class="h-[calc(100vh-5.4rem)] prevent-select relative flex w-full overflow-y-auto nc-scrollbar-md"
+    class="prevent-select h-[calc(100vh-5.4rem)] overflow-y-auto nc-scrollbar-md relative flex flex-col w-full"
     data-testid="nc-calendar-week-view"
     @drop="dropEvent"
   >
+    <!-- mt-23 should be dynamic TODO: @DarkPhoenix2704 -->
+
     <div
       v-if="!isPublic && dayjs().isBetween(selectedDateRange.start, selectedDateRange.end)"
-      class="absolute ml-16 mt-7 pointer-events-none z-4"
+      class="absolute top-16 ml-16 mt-23 pointer-events-none z-2"
       :style="overlayStyle"
     >
       <div class="flex w-full items-center">
@@ -919,8 +928,7 @@ watch(
         <div class="flex-1 border-b-1 border-brand-500"></div>
       </div>
     </div>
-
-    <div class="flex sticky h-6 z-1 top-0 pl-16 bg-gray-50 w-full">
+    <div class="flex sticky h-6 z-2 top-0 pl-16 bg-gray-50 w-full">
       <div
         v-for="date in datesHours"
         :key="date[0].toISOString()"
@@ -934,16 +942,25 @@ watch(
         {{ dayjs(date[0]).format('DD ddd') }}
       </div>
     </div>
-    <div class="absolute bg-white w-16 z-1">
+    <!-- top-16 should be dynamic TODO: @DarkPhoenix2704 -->
+    <div class="absolute top-16 bg-white w-16 z-1">
       <div
         v-for="(hour, index) in datesHours[0]"
         :key="index"
-        class="h-13 first:mt-0 pt-7.1 nc-calendar-day-hour text-right pr-2 font-semibold text-xs text-gray-400 py-1"
+        class="h-13 first:mt-0 pt-7.1 nc-calendar-day-hour text-right pr-2 font-semibold text-xs text-gray-500 py-1"
       >
         {{ hour.format('hh a') }}
       </div>
     </div>
-    <div ref="container" class="absolute ml-16 flex w-[calc(100%-64px)]">
+    <div class="sticky top-6 bg-white z-3 inset-x-0 w-full">
+      <SmartsheetCalendarDateTimeSpanningContainer
+        :records="recordsAcrossAllRange.spanningRecords"
+        @expand-record="expandRecord"
+      />
+    </div>
+    <!-- mt-16 should be dynamic TODO: @DarkPhoenix2704 -->
+
+    <div ref="container" class="absolute !mt-16 ml-16 flex w-[calc(100%-64px)]">
       <div
         v-for="(date, index) in datesHours"
         :key="index"
@@ -960,7 +977,7 @@ watch(
           :class="{
             'border-1 !border-brand-500 !bg-gray-100':
               hour.isSame(selectedTime, 'hour') && (hour.get('day') === 6 || hour.get('day') === 0),
-            'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'),
+            'selected-hour': hour.isSame(selectedTime, 'hour'),
             'bg-gray-50 hover:bg-gray-100': hour.get('day') === 0 || hour.get('day') === 6,
             'hover:bg-gray-50': hour.get('day') !== 0 && hour.get('day') !== 6,
           }"
@@ -1015,7 +1032,6 @@ watch(
                 :position="record.rowMeta!.position"
                 :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
                 :record="record"
-                color="blue"
                 :selected="record.rowMeta!.id === dragRecord?.rowMeta?.id"
                 @resize-start="onResizeStart"
               >
@@ -1050,4 +1066,14 @@ watch(
   -ms-user-select: none;
   user-select: none;
 }
+
+.selected-hour {
+  @apply relative;
+  &:after {
+    @apply rounded-sm pointer-events-none absolute inset-0 w-full h-full;
+    content: '';
+    z-index: 3;
+    box-shadow: 0 0 0 2px #3366ff !important;
+  }
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
index f0830b2073..978383dfc7 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -190,13 +190,18 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
           <span class="text-gray-800">
             {{ $t('labels.organiseBy') }}
           </span>
-          <NcSelect
+
+          <a-select
             v-model:value="range.fk_from_column_id"
+            class="nc-select-shadow w-full !rounded-lg"
+            dropdown-class-name="!rounded-lg"
             :placeholder="$t('placeholder.notSelected')"
             data-testid="nc-calendar-range-from-field-select"
             :disabled="isLocked"
             @change="saveCalendarRanges"
+            @click.stop
           >
+            <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
             <a-select-option
               v-for="(option, opId) in [...(dateFieldOptions ?? [])].filter((r) => {
                 if (id === 0) return true
@@ -204,27 +209,28 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
                 return firstRange?.uidt === r.uidt
               })"
               :key="opId"
-              class="w-40"
               :value="option.value"
             >
-              <div class="flex w-full gap-2 justify-between items-center">
-                <div class="flex items-center">
+              <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
+                <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
                   <SmartsheetHeaderIcon :column="option" />
-                  <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                    <template #title>{{ option.label }}</template>
-                    {{ option.label }}
+
+                  <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
+                    <template #title>
+                      {{ option.label }}
+                    </template>
+                    <template #default>{{ option.label }}</template>
                   </NcTooltip>
                 </div>
-
-                <component
-                  :is="iconMap.check"
+                <GeneralIcon
                   v-if="option.value === range.fk_from_column_id"
                   id="nc-selected-item-icon"
-                  class="text-primary min-w-4 h-4"
+                  icon="check"
+                  class="flex-none text-primary w-4 h-4"
                 />
               </div>
             </a-select-option>
-          </NcSelect>
+          </a-select>
 
           <NcButton
             v-if="range.fk_to_column_id === null && isRangeEnabled"
@@ -245,14 +251,18 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
               {{ $t('activity.withEndDate') }}
             </span>
             <div class="flex">
-              <NcSelect
+              <a-select
                 v-model:value="range.fk_to_column_id"
+                class="!rounded-r-none nc-select-shadow w-full flex-1 nc-to-select"
                 :disabled="!range.fk_from_column_id"
                 :placeholder="$t('placeholder.notSelected')"
-                class="!rounded-r-none flex-1 nc-to-select"
                 data-testid="nc-calendar-range-to-field-select"
+                dropdown-class-name="!rounded-lg"
                 @change="saveCalendarRanges"
+                @click.stop
               >
+                <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
+
                 <a-select-option
                   v-for="(option, opId) in [...dateFieldOptions].filter((f) => {
                     const firstRange = dateFieldOptions.find((f) => f.value === calendarRange[0].fk_from_column_id)
@@ -261,16 +271,33 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
                   :key="opId"
                   :value="option.value"
                 >
-                  <div class="flex items-center">
-                    <SmartsheetHeaderIcon :column="option" />
-                    <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                      <template #title>{{ option.label }}</template>
-                      {{ option.label }}
-                    </NcTooltip>
+                  <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
+                    <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
+                      <SmartsheetHeaderIcon :column="option" />
+
+                      <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
+                        <template #title>
+                          {{ option.label }}
+                        </template>
+                        <template #default>{{ option.label }}</template>
+                      </NcTooltip>
+                    </div>
+                    <GeneralIcon
+                      v-if="option.value === range.fk_from_column_id"
+                      id="nc-selected-item-icon"
+                      icon="check"
+                      class="flex-none text-primary w-4 h-4"
+                    />
                   </div>
                 </a-select-option>
-              </NcSelect>
-              <NcButton class="!rounded-l-none !border-l-0" size="small" type="secondary" @click="saveCalendarRange(range, null)">
+              </a-select>
+
+              <NcButton
+                class="!rounded-l-none nc-select-shadow !border-l-0"
+                size="small"
+                type="secondary"
+                @click="saveCalendarRange(range, null)"
+              >
                 <component :is="iconMap.delete" class="h-4 w-4" />
               </NcButton>
             </div>

From e087c7477f429e301000b524666f7d1aebe5abf5 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:13 +0000
Subject: [PATCH 26/50] fix: adjust box shadows

---
 .../calendar/DateTimeSpanningContainer.vue    |  4 ++--
 .../smartsheet/calendar/SideMenu.vue          |  1 -
 .../smartsheet/calendar/SideRecordCard.vue    |  3 ++-
 .../calendar/WeekView/DateField.vue           | 24 +++++++++++++++++--
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index a038dfd4a5..2adac36db6 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -138,7 +138,7 @@ const calendarData = computed(() => {
       const style: Partial<CSSStyleDeclaration> = {
         top: `${row * 28 + row * 8}px`,
         left: `${startDayIndex * perDayWidth}px`,
-        width: `${spanDays * perDayWidth + 8}px`,
+        width: `${spanDays * perDayWidth}px`,
       }
 
       recordsInRange.push({
@@ -244,7 +244,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
       ref="container"
       :style="{
         height: `min(64px)`,
-        width: 'calc(100% - 67px)',
+        width: `calc(100% - ${activeCalendarView === 'week' ? '64px' : '66px'})`,
       }"
       :class="{
         'border-gray-100': activeCalendarView === 'day',
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index 53adce2ccf..b5f4efcc7d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -546,7 +546,6 @@ onClickOutside(searchRef, toggleSearch)
                     : dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]).format('DD MMM • HH:mm A')
                   : null
               "
-                color="blue"
                 data-testid="nc-sidebar-record-card"
                 @click="emit('expandRecord', record)"
                 @dragstart="dragStart($event, record)"
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
index bb901643f0..924045b7af 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
@@ -9,7 +9,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   fromDate: '',
-  color: 'blue',
+  color: 'gray',
   showDate: true,
   invalid: false,
 })
@@ -26,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
           'bg-yellow-500': props.color === 'yellow',
           'bg-pink-500': props.color === 'pink',
           'bg-purple-500': props.color === 'purple',
+          'bg-gray-900': color === 'gray',
         }"
         class="block h-10 w-1 rounded"
       ></span>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index b60824d138..761dd9b3fd 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -510,7 +510,7 @@ const addRecord = (date: dayjs.Dayjs) => {
         v-for="(date, weekIndex) in weekDates"
         :key="weekIndex"
         :class="{
-          '!border-brand-500 !border-b-gray-200': dayjs(date).isSame(selectedDate, 'day'),
+          'selected-date-header': dayjs(date).isSame(selectedDate, 'day'),
           'w-1/5': maxVisibleDays === 5,
           'w-1/7': maxVisibleDays === 7,
         }"
@@ -526,7 +526,7 @@ const addRecord = (date: dayjs.Dayjs) => {
         v-for="(date, dateIndex) in weekDates"
         :key="dateIndex"
         :class="{
-          '!border-1 !border-t-0 border-brand-500': dayjs(date).isSame(selectedDate, 'day'),
+          'selected-date': dayjs(date).isSame(selectedDate, 'day'),
           '!bg-gray-50': date.get('day') === 0 || date.get('day') === 6,
           'w-1/5': maxVisibleDays === 5,
           'w-1/7': maxVisibleDays === 7,
@@ -588,4 +588,24 @@ const addRecord = (date: dayjs.Dayjs) => {
   -ms-user-select: none;
   user-select: none;
 }
+
+.selected-date {
+  @apply relative;
+  &:after {
+    @apply rounded-b-sm pointer-events-none absolute inset-0 w-full h-full;
+    content: '';
+    z-index: 3;
+    box-shadow: 2px 0 0 #3366ff, -2px 0 0 #3366ff, 0 2px 0 #3366ff !important;
+  }
+}
+
+.selected-date-header {
+  @apply relative;
+  &:after {
+    @apply rounded-t-sm pointer-events-none absolute inset-0 -left-0.25 w-[calc(100% + 2px)] h-full;
+    content: '';
+    z-index: 10;
+    box-shadow: 2px 0 0 #3366ff, -2px 0 0 #3366ff, 0 -2px 0 #3366ff !important;
+  }
+}
 </style>

From a822c6fd470f7eedb211b495073fa8d6e1b57430 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:13 +0000
Subject: [PATCH 27/50] fix: couple fixes

---
 .../calendar/DateTimeSpanningContainer.vue           | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index 2adac36db6..2092e72ce0 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -232,11 +232,15 @@ const dragStart = (event: MouseEvent, record: Row) => {
 <template>
   <div style="z-index: 100" class="sticky flex top-0 bg-white border-b-1 border-gray-100 prevent-select">
     <div
-      style="width: 64px"
       :style="{
-        width: `${activeCalendarView === 'week' ? '64px' : '66px'}`,
+        maxWidth: `${activeCalendarView === 'week' ? '64px' : '66px'}`,
+        minWidth: `${activeCalendarView === 'week' ? '64px' : '66px'}`,
       }"
-      class="text-xs top-0 text-right z-50 !sticky h-full left-0 text-[#6A7184] p-2"
+      :class="{
+        'p-2': activeCalendarView === 'day',
+        'py-2 pr-1': activeCalendarView === 'week',
+      }"
+      class="text-xs top-0 text-right z-50 !sticky h-full left-0 text-[#6A7184]"
     >
       All day
     </div>
@@ -244,7 +248,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
       ref="container"
       :style="{
         height: `min(64px)`,
-        width: `calc(100% - ${activeCalendarView === 'week' ? '64px' : '66px'})`,
+        width: `calc(100% - ${activeCalendarView === 'week' ? '74px' : '66px'})`,
       }"
       :class="{
         'border-gray-100': activeCalendarView === 'day',

From 22e65fbd2207fed0ce864b4730f62c0c0213718a Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:13 +0000
Subject: [PATCH 28/50] feat: drag and reorder in spanning records

---
 .../calendar/DateTimeSpanningContainer.vue    | 222 +++++++++++++++++-
 .../smartsheet/calendar/RecordCard.vue        |   1 +
 .../smartsheet/calendar/VRecordCard.vue       |   1 +
 3 files changed, 221 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index 2092e72ce0..257623ea11 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -45,6 +45,7 @@ const {
   viewMetaProperties,
   displayField,
   activeCalendarView,
+  updateFormat,
 } = useCalendarViewStoreOrThrow()
 
 const maxVisibleDays = computed(() => {
@@ -173,9 +174,224 @@ const resizeRecord = ref<Row | null>(null)
 
 const hoverRecord = ref<string | null>()
 
-const onResizeStart = (record: Row, direction: 'right' | 'left') => {
+// This method is used to calculate the new start and end date of a record when dragging and dropping
+const calculateNewRow = (event: MouseEvent, updateSideBarData?: boolean) => {
+  if (!container.value || !dragRecord.value) return { updatedProperty: [], newRow: null }
+  const { width, left } = container.value.getBoundingClientRect()
+
+  // Calculate the percentage of the width based on the mouse position
+  // This is used to calculate the day index
+
+  const relativeX = event.clientX - left
+
+  // TODO: @DarkPhoenix2704 handle offset
+  // if (dragOffset.value.x) {
+  //  relativeX -= dragOffset.value.x
+  // }
+
+  const percentX = Math.max(0, Math.min(1, relativeX / width))
+
+  const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
+  const toCol = dragRecord.value.rowMeta.range?.fk_to_col
+
+  if (!fromCol) return { updatedProperty: [], newRow: null }
+
+  // Calculate the day index based on the percentage of the width
+  // The day index is a number between 0 and 6
+  const day = Math.floor(percentX * maxVisibleDays.value)
+
+  // Calculate the new start date based on the day index by adding the day index to the start date of the selected date range
+  const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
+  if (!newStartDate) return { updatedProperty: [], newRow: null }
+
+  let endDate
+
+  const newRow = {
+    ...dragRecord.value,
+    row: {
+      ...dragRecord.value.row,
+      [fromCol.title!]: dayjs(newStartDate).format(updateFormat.value),
+    },
+  }
+
+  const updateProperty = [fromCol.title!]
+
+  if (toCol) {
+    const fromDate = dragRecord.value.row[fromCol.title!] ? dayjs(dragRecord.value.row[fromCol.title!]) : null
+    const toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : null
+
+    // Calculate the new end date based on the day index by adding the day index to the start date of the selected date range
+    // If the record has an end date, we need to calculate the new end date based on the difference between the start and end date
+    // If the record doesn't have an end date, we need to calculate the new end date based on the start date
+    // If the record has an end date and no start Date, we set the end date to the start date
+    if (fromDate && toDate) {
+      endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
+    } else if (fromDate && !toDate) {
+      endDate = dayjs(newStartDate).endOf('day')
+    } else if (!fromDate && toDate) {
+      endDate = dayjs(newStartDate).endOf('day')
+    } else {
+      endDate = newStartDate.clone()
+    }
+
+    newRow.row[toCol.title!] = dayjs(endDate).format(updateFormat.value)
+    updateProperty.push(toCol.title!)
+  }
+
+  const newPk = extractPkFromRow(newRow.row, meta.value!.columns!)
+  if (updateSideBarData) {
+    // If the record is being dragged from the sidebar, we need to remove the record from the sidebar data
+    // and add the new record to the calendar data
+    formattedData.value = [...formattedData.value, newRow]
+    formattedSideBarData.value = formattedSideBarData.value.filter((r) => {
+      const pk = extractPkFromRow(r.row, meta.value!.columns!)
+      return pk !== newPk
+    })
+  } else {
+    // If the record is being dragged within the calendar, we need to update the record in the calendar data
+    formattedData.value = formattedData.value.map((r) => {
+      const pk = extractPkFromRow(r.row, meta.value!.columns!)
+      return pk === newPk ? newRow : r
+    })
+  }
+
+  return { updateProperty, newRow }
+}
+
+const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
+  updateRowProperty(row, updateProperty, isDelete)
+}, 500)
+
+// This function is used to calculate the new start and end date of a record when resizing
+const onResize = (event: MouseEvent) => {
+  if (!isUIAllowed('dataEdit') || !container.value || !resizeRecord.value) return
+
+  const { width, left } = container.value.getBoundingClientRect()
+
+  // Calculate the percentage of the width based on the mouse position
+  const percentX = (event.clientX - left - window.scrollX) / width
+
+  const fromCol = resizeRecord.value.rowMeta.range?.fk_from_col
+  const toCol = resizeRecord.value.rowMeta.range?.fk_to_col
+  if (!fromCol || !toCol) return
+
+  const ogEndDate = dayjs(resizeRecord.value.row[toCol.title!])
+  const ogStartDate = dayjs(resizeRecord.value.row[fromCol.title!])
+
+  const day = Math.floor(percentX * maxVisibleDays.value)
+
+  let updateProperty: string[] = []
+  let updateRecord: Row
+
+  if (resizeDirection.value === 'right') {
+    // Calculate the new end date based on the day index by adding the day index to the start date of the selected date range
+    let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day')
+    let newStartDate = ogStartDate.clone()
+
+    updateProperty = [toCol.title!]
+
+    // If the new end date is before the start date, we need to adjust the end date to the start date
+    if (dayjs(newEndDate).isSameOrBefore(ogStartDate, 'day')) {
+      newEndDate = ogStartDate.clone().add(1, 'hour')
+      newStartDate = ogStartDate.clone().subtract(1, 'hour')
+      updateProperty.push(fromCol.title!)
+    }
+
+    if (!newEndDate.isValid()) return
+
+    updateRecord = {
+      ...resizeRecord.value,
+      row: {
+        ...resizeRecord.value.row,
+        [toCol.title!]: newEndDate.format(updateFormat.value),
+        [fromCol.title!]: newStartDate.format(updateFormat.value),
+      },
+    }
+  } else if (resizeDirection.value === 'left') {
+    // Calculate the new start date based on the day index by adding the day index to the start date of the selected date range
+    let newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
+    let newEndDate = ogEndDate.clone()
+    updateProperty = [fromCol.title!]
+
+    // If the new start date is after the end date, we need to adjust the start date to the end date
+    if (dayjs(newStartDate).isSameOrAfter(ogEndDate)) {
+      newStartDate = dayjs(dayjs(ogEndDate)).clone()
+      newEndDate = dayjs(newStartDate).clone().add(1, 'hour')
+      updateProperty.push(toCol.title!)
+    }
+    if (!newStartDate) return
+
+    updateRecord = {
+      ...resizeRecord.value,
+      row: {
+        ...resizeRecord.value.row,
+        [fromCol.title!]: dayjs(newStartDate).format(updateFormat.value),
+        [toCol.title!]: dayjs(newEndDate).format(updateFormat.value),
+      },
+    }
+  }
+
+  // Update the record in the store
+  const newPk = extractPkFromRow(updateRecord.row, meta.value!.columns!)
+  formattedData.value = formattedData.value.map((r) => {
+    const pk = extractPkFromRow(r.row, meta.value!.columns!)
+
+    return pk === newPk ? updateRecord : r
+  })
+  useDebouncedRowUpdate(updateRecord, updateProperty, false)
+}
+
+const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => {
+  if (!isUIAllowed('dataEdit')) return
+  resizeInProgress.value = true
   resizeDirection.value = direction
   resizeRecord.value = record
+  document.addEventListener('mousemove', onResize)
+  document.addEventListener('mouseup', onResizeEnd)
+}
+
+const onResizeEnd = () => {
+  resizeInProgress.value = false
+  resizeDirection.value = null
+  resizeRecord.value = null
+  document.removeEventListener('mousemove', onResize)
+  document.removeEventListener('mouseup', onResizeEnd)
+}
+
+const onDrag = (event: MouseEvent) => {
+  if (!isUIAllowed('dataEdit')) return
+  if (!container.value || !dragRecord.value) return
+  calculateNewRow(event, false)
+}
+
+const stopDrag = (event: MouseEvent) => {
+  event.preventDefault()
+  clearTimeout(dragTimeout.value!)
+
+  if (!isUIAllowed('dataEdit')) return
+  if (!isDragging.value || !container.value || !dragRecord.value) return
+
+  const { updateProperty, newRow } = calculateNewRow(event)
+
+  if (!newRow) return
+
+  // Open drop the record, we reset the opacity of the other records
+  const allRecords = document.querySelectorAll('.draggable-record')
+  allRecords.forEach((el) => {
+    el.style.visibility = ''
+    el.style.opacity = '100%'
+  })
+
+  if (dragElement.value) {
+    dragElement.value.style.boxShadow = 'none'
+    dragElement.value = null
+  }
+  dragRecord.value = undefined
+
+  updateRowProperty(newRow, updateProperty, false)
+
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
 }
 
 const dragStart = (event: MouseEvent, record: Row) => {
@@ -213,8 +429,8 @@ const dragStart = (event: MouseEvent, record: Row) => {
     dragElement.value = target
     dragRecord.value = record
 
-    // document.addEventListener('mousemove', onDrag)
-    // document.addEventListener('mouseup', stopDrag)
+    document.addEventListener('mousemove', onDrag)
+    document.addEventListener('mouseup', stopDrag)
   }, 200)
 
   const onMouseUp = () => {
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index 2cee918dc8..35bb6e0afd 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -40,6 +40,7 @@ const emit = defineEmits(['resize-start'])
       'bg-white border-gray-200': color === 'gray',
       'shadow-md': hover,
     }"
+    style="box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)"
     class="relative transition-all border-1 flex items-center gap-2 group"
   >
     <div
diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index a9bbd553bc..10f216034d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -29,6 +29,7 @@ const emit = defineEmits(['resize-start'])
       'bg-white border-gray-200': color === 'gray',
       'shadow-md': hover,
     }"
+    style="box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)"
     class="relative flex gap-2 border-1 relative rounded-md h-full"
   >
     <div

From 38062c5f06722a6b20bc3a21e26c9f582c4f3769 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:13 +0000
Subject: [PATCH 29/50] fix: updated hover state

---
 .../calendar/DateTimeSpanningContainer.vue    | 18 ++++++++-
 .../smartsheet/calendar/RecordCard.vue        |  4 +-
 .../smartsheet/calendar/SideRecordCard.vue    | 31 +++++++-------
 .../calendar/WeekView/DateTimeField.vue       | 40 +++++++++++++++----
 4 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index 257623ea11..b8fbbe2636 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -174,6 +174,8 @@ const resizeRecord = ref<Row | null>(null)
 
 const hoverRecord = ref<string | null>()
 
+const isExpanded = ref(false)
+
 // This method is used to calculate the new start and end date of a record when dragging and dropping
 const calculateNewRow = (event: MouseEvent, updateSideBarData?: boolean) => {
   if (!container.value || !dragRecord.value) return { updatedProperty: [], newRow: null }
@@ -443,6 +445,12 @@ const dragStart = (event: MouseEvent, record: Row) => {
 
   document.addEventListener('mouseup', onMouseUp)
 }
+
+const isSpanningRecordExpanded = () => isExpanded.value
+
+defineExpose({
+  isSpanningRecordExpanded,
+})
 </script>
 
 <template>
@@ -459,18 +467,24 @@ const dragStart = (event: MouseEvent, record: Row) => {
       class="text-xs top-0 text-right z-50 !sticky h-full left-0 text-[#6A7184]"
     >
       All day
+
+      <NcButton size="xsmall" class="mt-2" type="text" @click="isExpanded = !isExpanded">
+        <GeneralIcon v-if="!isExpanded" icon="maximize" />
+        <GeneralIcon v-else-if="isExpanded" icon="minimize" />
+      </NcButton>
     </div>
     <div
       ref="container"
       :style="{
-        height: `min(64px)`,
         width: `calc(100% - ${activeCalendarView === 'week' ? '74px' : '66px'})`,
       }"
       :class="{
         'border-gray-100': activeCalendarView === 'day',
         'border-gray-200': activeCalendarView === 'week',
+        'min-h-32 max-h-32 ': isExpanded,
+        'h-14': !isExpanded,
       }"
-      class="relative border-l-1 z-30 py-1"
+      class="relative border-l-1 transition-all overflow-y-scroll z-30"
     >
       <div class="pointer-events-none inset-y-0 relative">
         <template v-for="(record, id) in calendarData" :key="id">
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index 35bb6e0afd..90e892d1c7 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -37,10 +37,10 @@ const emit = defineEmits(['resize-start'])
       'bg-yellow-50': color === 'yellow',
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
-      'bg-white border-gray-200': color === 'gray',
+      'bg-white border-gray-300': color === 'gray',
       'shadow-md': hover,
     }"
-    style="box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)"
+    style="box-shadow: 0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06);)"
     class="relative transition-all border-1 flex items-center gap-2 group"
   >
     <div
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
index 924045b7af..34dcee72a9 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
@@ -16,8 +16,8 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="border-1 cursor-pointer min-h-14 border-gray-200 p-2 flex gap-2 flex-col rounded-lg">
-    <div class="flex items-center gap-2">
+  <div class="border-1 cursor-pointer h-12.5 border-gray-200 flex gap-2 flex-col rounded-lg">
+    <div class="flex relative items-center gap-2">
       <span
         :class="{
           'bg-maroon-500': props.color === 'maroon',
@@ -28,28 +28,31 @@ const props = withDefaults(defineProps<Props>(), {
           'bg-purple-500': props.color === 'purple',
           'bg-gray-900': color === 'gray',
         }"
-        class="block h-10 w-1 rounded"
+        class="block h-12 w-1 rounded-l-lg"
       ></span>
       <slot name="image" />
-      <div class="flex gap-1 flex-col">
+      <div class="flex gap-1 py-1 flex-col">
         <span class="text-[13px] leading-4 max-w-56 font-medium truncate text-gray-800">
           <slot />
         </span>
+        <NcTooltip v-if="invalid" placement="left" class="top-1 absolute right-2">
+          <NcBadge color="red" :border="false" class="!h-5">
+            <div class="flex items-center gap-1">
+              <GeneralIcon icon="warning" class="text-red-500 !h-4 !w-4" />
+
+              <span class="font-normal text-xs"> Date Error </span>
+            </div>
+          </NcBadge>
+          <template #title>
+            Record with end date before the start date won't be displayed in the calendar. Update the end date to display the
+            record.
+          </template>
+        </NcTooltip>
         <span v-if="showDate" class="text-xs font-medium leading-4 text-gray-600"
           >{{ fromDate }} {{ toDate ? ` - ${toDate}` : '' }}</span
         >
       </div>
     </div>
-
-    <NcTooltip v-if="invalid">
-      <div class="gap-3 bg-yellow-50 mt-2 border-gray-200 border-1 rounded-lg p-2 flex">
-        <GeneralIcon icon="warning" class="text-yellow-500 !h-5 !w-5" />
-        <div class="text-gray-700 text-xs">Selected End date is before Start date.</div>
-      </div>
-      <template #title>
-        Record with end date before the start date won't be displayed in the calendar. Update the end date to display the record.
-      </template>
-    </NcTooltip>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index e637936515..ba85f2f93d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -902,6 +902,17 @@ watch(
 const expandRecord = (record: Row) => {
   emits('expandRecord', record)
 }
+
+const spanningRecordsContainer = ref<HTMLElement | null>(null)
+
+const isExpanded = ref(false)
+
+watch(
+  () => spanningRecordsContainer.value?.isSpanningRecordExpanded(),
+  () => {
+    isExpanded.value = spanningRecordsContainer.value?.isSpanningRecordExpanded()
+  },
+)
 </script>
 
 <template>
@@ -911,11 +922,13 @@ const expandRecord = (record: Row) => {
     data-testid="nc-calendar-week-view"
     @drop="dropEvent"
   >
-    <!-- mt-23 should be dynamic TODO: @DarkPhoenix2704 -->
-
     <div
       v-if="!isPublic && dayjs().isBetween(selectedDateRange.start, selectedDateRange.end)"
-      class="absolute top-16 ml-16 mt-23 pointer-events-none z-2"
+      class="absolute top-16 ml-16 pointer-events-none z-2"
+      :class="{
+        'mt-38.5': isExpanded,
+        'mt-23': !isExpanded,
+      }"
       :style="overlayStyle"
     >
       <div class="flex w-full items-center">
@@ -942,8 +955,13 @@ const expandRecord = (record: Row) => {
         {{ dayjs(date[0]).format('DD ddd') }}
       </div>
     </div>
-    <!-- top-16 should be dynamic TODO: @DarkPhoenix2704 -->
-    <div class="absolute top-16 bg-white w-16 z-1">
+    <div
+      :class="{
+        'top-16': !isExpanded,
+        'top-32': isExpanded,
+      }"
+      class="absolute bg-white w-16 z-1"
+    >
       <div
         v-for="(hour, index) in datesHours[0]"
         :key="index"
@@ -954,13 +972,19 @@ const expandRecord = (record: Row) => {
     </div>
     <div class="sticky top-6 bg-white z-3 inset-x-0 w-full">
       <SmartsheetCalendarDateTimeSpanningContainer
+        ref="spanningRecordsContainer"
         :records="recordsAcrossAllRange.spanningRecords"
         @expand-record="expandRecord"
       />
     </div>
-    <!-- mt-16 should be dynamic TODO: @DarkPhoenix2704 -->
-
-    <div ref="container" class="absolute !mt-16 ml-16 flex w-[calc(100%-64px)]">
+    <div
+      ref="container"
+      :class="{
+        '!mt-16 ': !isExpanded,
+        'mt-32': isExpanded,
+      }"
+      class="absolute ml-16 flex w-[calc(100%-64px)]"
+    >
       <div
         v-for="(date, index) in datesHours"
         :key="index"

From 4a66288fe94fe87cb1f10c7990496d9994805b2e Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:13 +0000
Subject: [PATCH 30/50] fix: month view minor fixes

---
 .../smartsheet/calendar/MonthView.vue         | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 441b4e85da..f89f8305ae 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -447,8 +447,10 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean, skipChangeC
 
   const newPk = extractPkFromRow(newRow.row, meta.value!.columns!)
 
+  newRow.rowMeta.id = draggingId
+
   if (updateSideBar) {
-    formattedData.value = [...formattedData.value, newRow]
+    formattedData.value = [...(formattedData.value as Row[]), newRow as Row]
     formattedSideBarData.value = formattedSideBarData.value.filter((r) => {
       const pk = extractPkFromRow(r.row, meta.value!.columns!)
       return pk !== newPk
@@ -457,7 +459,7 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean, skipChangeC
     formattedData.value = formattedData.value.map((r) => {
       const pk = extractPkFromRow(r.row, meta.value!.columns!)
       return pk === newPk ? newRow : r
-    })
+    }) as Row[]
   }
 
   return {
@@ -468,6 +470,7 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean, skipChangeC
 
 const onDrag = (event: MouseEvent) => {
   if (!isUIAllowed('dataEdit') || !dragRecord.value) return
+
   calculateNewRow(event, false)
 }
 
@@ -530,6 +533,8 @@ const onResize = (event: MouseEvent) => {
     }
   }
 
+  newRow.rowMeta.id = resizeRecord.value.rowMeta.id
+
   const newPk = extractPkFromRow(newRow.row, meta.value!.columns!)
   formattedData.value = formattedData.value.map((r) => {
     const pk = extractPkFromRow(r.row, meta.value!.columns!)
@@ -575,12 +580,6 @@ const stopDrag = (event: MouseEvent) => {
 
   const { newRow, updateProperty } = calculateNewRow(event, false, true)
 
-  const allRecords = document.querySelectorAll('.draggable-record')
-  allRecords.forEach((el) => {
-    el.style.visibility = ''
-    el.style.opacity = '100%'
-  })
-
   if (dragElement.value) {
     dragElement.value.style.boxShadow = 'none'
     isDragging.value = false
@@ -625,13 +624,6 @@ const dragStart = (event: MouseEvent, record: Row) => {
       y: event.clientY - target.getBoundingClientRect().top,
     }
 
-    const allRecords = document.querySelectorAll('.draggable-record')
-    allRecords.forEach((el) => {
-      if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {
-        el.style.opacity = '30%'
-      }
-    })
-
     // selectedDate.value = null
 
     isDragging.value = true
@@ -866,9 +858,10 @@ const addRecord = (date: dayjs.Dayjs) => {
       </div>
     </div>
     <div class="absolute inset-0 z-2 pointer-events-none mt-8 pb-7.5" data-testid="nc-calendar-month-record-container">
-      <template v-for="(record, recordId) in recordsToDisplay.records" :key="recordId">
+      <template v-for="record in recordsToDisplay.records">
         <div
           v-if="record.rowMeta.style?.display !== 'none'"
+          :key="record.rowMeta.id"
           :data-testid="`nc-calendar-month-record-${record.row[displayField!.title!]}`"
           :data-unique-id="`${record.rowMeta.id}`"
           :style="{
@@ -878,6 +871,8 @@ const addRecord = (date: dayjs.Dayjs) => {
               record.rowMeta.id === draggingId
                 ? ' 0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
                 : 'none',
+
+            opacity: draggingId === null || record.rowMeta.id === draggingId ? 1 : 0.3,
           }"
           :class="{
             'cursor-pointer': !resizeInProgress,

From f4aa6bc22a46df5dd9a00a056637c9cb7cca0a1e Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:13 +0000
Subject: [PATCH 31/50] fix: disable spanning events if no fk_to_column fix:
 correct hover and drag effect for dragging and resizing

---
 .../calendar/DayView/DateTimeField.vue         |  6 +++++-
 .../smartsheet/calendar/MonthView.vue          | 12 ++++++++++--
 .../calendar/WeekView/DateTimeField.vue        | 18 +++++++++++-------
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index ed8e31f065..8678b6f077 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -895,7 +895,11 @@ const expandRecord = (record: Row) => {
 
 <template>
   <div class="h-[calc(100vh-5.3rem)] overflow-y-auto nc-scrollbar-md">
-    <SmartsheetCalendarDateTimeSpanningContainer :records="recordsAcrossAllRange.spanningRecords" @expand-record="expandRecord" />
+    <SmartsheetCalendarDateTimeSpanningContainer
+      v-if="calendarRange.some((range) => range.fk_to_col !== null && range.fk_to_col !== undefined)"
+      :records="recordsAcrossAllRange.spanningRecords"
+      @expand-record="expandRecord"
+    />
     <div ref="container" class="w-full flex relative no-selection" data-testid="nc-calendar-day-view" @drop="dropEvent">
       <div
         v-if="shouldEnableOverlay"
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index f89f8305ae..8b2f8b5e02 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -872,7 +872,11 @@ const addRecord = (date: dayjs.Dayjs) => {
                 ? ' 0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
                 : 'none',
 
-            opacity: draggingId === null || record.rowMeta.id === draggingId ? 1 : 0.3,
+            opacity:
+              (draggingId === null || record.rowMeta.id === draggingId) &&
+              (resizeRecord === undefined || record.rowMeta.id === resizeRecord?.rowMeta.id)
+                ? 1
+                : 0.3,
           }"
           :class="{
             'cursor-pointer': !resizeInProgress,
@@ -884,7 +888,11 @@ const addRecord = (date: dayjs.Dayjs) => {
         >
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarRecordCard
-              :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === draggingId"
+              :hover="
+                hoverRecord === record.rowMeta.id ||
+                record.rowMeta.id === draggingId ||
+                record.rowMeta.id === resizeRecord?.rowMeta.id
+              "
               :position="record.rowMeta.position"
               :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index ba85f2f93d..142c922205 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -907,6 +907,10 @@ const spanningRecordsContainer = ref<HTMLElement | null>(null)
 
 const isExpanded = ref(false)
 
+const isRangeEnabled = computed(() =>
+  calendarRange.value.some((range) => range.fk_to_col !== null && range.fk_to_col !== undefined),
+)
+
 watch(
   () => spanningRecordsContainer.value?.isSpanningRecordExpanded(),
   () => {
@@ -926,8 +930,8 @@ watch(
       v-if="!isPublic && dayjs().isBetween(selectedDateRange.start, selectedDateRange.end)"
       class="absolute top-16 ml-16 pointer-events-none z-2"
       :class="{
-        'mt-38.5': isExpanded,
-        'mt-23': !isExpanded,
+        'mt-38.5': isExpanded && isRangeEnabled,
+        'mt-23': !isExpanded && isRangeEnabled,
       }"
       :style="overlayStyle"
     >
@@ -957,8 +961,8 @@ watch(
     </div>
     <div
       :class="{
-        'top-16': !isExpanded,
-        'top-32': isExpanded,
+        'top-16': !isExpanded && isRangeEnabled,
+        'top-32': isExpanded && isRangeEnabled,
       }"
       class="absolute bg-white w-16 z-1"
     >
@@ -970,7 +974,7 @@ watch(
         {{ hour.format('hh a') }}
       </div>
     </div>
-    <div class="sticky top-6 bg-white z-3 inset-x-0 w-full">
+    <div v-if="isRangeEnabled" class="sticky top-6 bg-white z-3 inset-x-0 w-full">
       <SmartsheetCalendarDateTimeSpanningContainer
         ref="spanningRecordsContainer"
         :records="recordsAcrossAllRange.spanningRecords"
@@ -980,8 +984,8 @@ watch(
     <div
       ref="container"
       :class="{
-        '!mt-16 ': !isExpanded,
-        'mt-32': isExpanded,
+        '!mt-16 ': !isExpanded && isRangeEnabled,
+        'mt-32': isExpanded && isRangeEnabled,
       }"
       class="absolute ml-16 flex w-[calc(100%-64px)]"
     >

From 36be93cc5fa52b43018f2ec74eb433d9eca3467e Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:13 +0000
Subject: [PATCH 32/50] fix: refactor changes

---
 .../calendar/DateTimeSpanningContainer.vue    | 24 +++++++++----------
 .../calendar/WeekView/DateTimeField.vue       | 10 ++++----
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index b8fbbe2636..0bde15bbd5 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -10,8 +10,6 @@ const emit = defineEmits(['expandRecord', 'newRecord'])
 
 const container = ref<null | HTMLElement>(null)
 
-const { $e } = useNuxtApp()
-
 const { width: containerWidth } = useElementSize(container)
 
 const meta = inject(MetaInj, ref())
@@ -343,6 +341,14 @@ const onResize = (event: MouseEvent) => {
   useDebouncedRowUpdate(updateRecord, updateProperty, false)
 }
 
+const onResizeEnd = () => {
+  resizeInProgress.value = false
+  resizeDirection.value = null
+  resizeRecord.value = null
+  document.removeEventListener('mousemove', onResize)
+  document.removeEventListener('mouseup', onResizeEnd)
+}
+
 const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => {
   if (!isUIAllowed('dataEdit')) return
   resizeInProgress.value = true
@@ -352,14 +358,6 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
   document.addEventListener('mouseup', onResizeEnd)
 }
 
-const onResizeEnd = () => {
-  resizeInProgress.value = false
-  resizeDirection.value = null
-  resizeRecord.value = null
-  document.removeEventListener('mousemove', onResize)
-  document.removeEventListener('mouseup', onResizeEnd)
-}
-
 const onDrag = (event: MouseEvent) => {
   if (!isUIAllowed('dataEdit')) return
   if (!container.value || !dragRecord.value) return
@@ -454,7 +452,7 @@ defineExpose({
 </script>
 
 <template>
-  <div style="z-index: 100" class="sticky flex top-0 bg-white border-b-1 border-gray-100 prevent-select">
+  <div style="z-index: 100" class="sticky flex top-0 bg-white border-b-1 border-gray-200 shadow-sm prevent-select">
     <div
       :style="{
         maxWidth: `${activeCalendarView === 'week' ? '64px' : '66px'}`,
@@ -476,13 +474,13 @@ defineExpose({
     <div
       ref="container"
       :style="{
-        width: `calc(100% - ${activeCalendarView === 'week' ? '74px' : '66px'})`,
+        width: `calc(100% - 66px)`,
       }"
       :class="{
         'border-gray-100': activeCalendarView === 'day',
         'border-gray-200': activeCalendarView === 'week',
         'min-h-32 max-h-32 ': isExpanded,
-        'h-14': !isExpanded,
+        'h-16': !isExpanded,
       }"
       class="relative border-l-1 transition-all overflow-y-scroll z-30"
     >
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 142c922205..a4805ba8e8 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -664,18 +664,18 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
 const calculateNewRow = (
   event: MouseEvent,
   updateSideBar?: boolean,
-  skipChangeCheck?: boolean,
 ): {
   newRow: Row | null
   updatedProperty: string[]
   skipChangeCheck?: boolean
 } => {
+  if (!container.value) return { newRow: null, updatedProperty: [] }
   const { width, left, top } = container.value.getBoundingClientRect()
 
-  const { scrollHeight } = container.value
+  const { scrollHeight, scrollTop } = container.value
 
   const percentX = (event.clientX - left - window.scrollX) / width
-  const percentY = (event.clientY - top + container.value.scrollTop - 36.8) / scrollHeight
+  const percentY = (event.clientY - top + scrollTop - 36.8) / scrollHeight
 
   const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
   const toCol = dragRecord.value.rowMeta.range?.fk_to_col
@@ -945,7 +945,7 @@ watch(
         <div class="flex-1 border-b-1 border-brand-500"></div>
       </div>
     </div>
-    <div class="flex sticky h-6 z-2 top-0 pl-16 bg-gray-50 w-full">
+    <div class="flex sticky h-6 z-3 top-0 pl-16 bg-gray-50 w-full">
       <div
         v-for="date in datesHours"
         :key="date[0].toISOString()"
@@ -1100,7 +1100,7 @@ watch(
   &:after {
     @apply rounded-sm pointer-events-none absolute inset-0 w-full h-full;
     content: '';
-    z-index: 3;
+    z-index: 2;
     box-shadow: 0 0 0 2px #3366ff !important;
   }
 }

From d3b77336fa475a7a5f55a56c6706b8d26cf18009 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:13 +0000
Subject: [PATCH 33/50] fix: tab design changes

---
 .../calendar/DayView/DateTimeField.vue        | 29 ++++-------
 .../calendar/WeekView/DateTimeField.vue       | 33 +++++-------
 .../smartsheet/toolbar/Calendar/Mode.vue      | 51 ++++++-------------
 3 files changed, 39 insertions(+), 74 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 8678b6f077..dbaddab4c5 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -464,7 +464,7 @@ const dragElement = ref<HTMLElement | null>(null)
 
 const resizeDirection = ref<'right' | 'left' | null>()
 
-const resizeRecord = ref<Row | null>()
+const resizeRecord = ref<Row | null>(null)
 
 const dragTimeout = ref<ReturnType<typeof setTimeout>>()
 
@@ -680,19 +680,13 @@ const stopDrag = (event: MouseEvent) => {
   const { newRow, updateProperty } = calculateNewRow(event, true)
   if (!newRow && !updateProperty) return
 
-  const allRecords = document.querySelectorAll('.draggable-record')
-  allRecords.forEach((el) => {
-    el.style.visibility = ''
-    el.style.opacity = '100%'
-  })
-
   if (dragElement.value) {
     dragElement.value.style.boxShadow = 'none'
     dragElement.value = null
   }
 
   if (dragRecord.value) {
-    dragRecord.value = undefined
+    dragRecord.value = null
   }
 
   if (!newRow) return
@@ -719,17 +713,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
       target = target.parentElement as HTMLElement
     }
 
-    // When the user starts dragging a record, we reduce opacity of all other records
-    const allRecords = document.querySelectorAll('.draggable-record')
-    allRecords.forEach((el) => {
-      if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {
-        // el.style.visibility = 'hidden'
-        el.style.opacity = '30%'
-      }
-    })
-
     dragRecord.value = record
-
     dragElement.value = target
 
     document.addEventListener('mousemove', onDrag)
@@ -1050,7 +1034,14 @@ const expandRecord = (record: Row) => {
               v-if="record.rowMeta.style?.display !== 'none'"
               :data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
               :data-unique-id="record.rowMeta.id"
-              :style="record.rowMeta.style"
+              :style="{
+                ...record.rowMeta.style,
+                opacity:
+                  (dragRecord === null || record.rowMeta.id === dragRecord?.rowMeta.id) &&
+                  (resizeRecord === null || record.rowMeta.id === resizeRecord?.rowMeta.id)
+                    ? 1
+                    : 0.3,
+              }"
               class="absolute draggable-record transition group cursor-pointer pointer-events-auto"
               @mousedown="dragStart($event, record)"
               @mouseleave="hoverRecord = null"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index a4805ba8e8..ac988d3f27 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -553,11 +553,11 @@ const hoverRecord = ref<string | null>()
 
 const resizeDirection = ref<'right' | 'left' | null>()
 
-const resizeRecord = ref<Row | null>()
+const resizeRecord = ref<Row | null>(null)
 
 const isDragging = ref(false)
 
-const dragRecord = ref<Row>()
+const dragRecord = ref<Row | null>(null)
 
 const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
   updateRowProperty(row, updateProperty, isDelete)
@@ -771,16 +771,12 @@ const stopDrag = (event: MouseEvent) => {
 
   const { newRow, updatedProperty } = calculateNewRow(event, false, true)
 
-  // We set the visibility and opacity of the records back to normal
-  const allRecords = document.querySelectorAll('.draggable-record')
-  allRecords.forEach((el) => {
-    el.style.visibility = ''
-    el.style.opacity = '100%'
-  })
-
   if (newRow) {
     updateRowProperty(newRow, updatedProperty, false)
   }
+
+  dragRecord.value = null
+
   $e('c:calendar:week:drag-record')
 
   document.removeEventListener('mousemove', onDrag)
@@ -802,14 +798,6 @@ const dragStart = (event: MouseEvent, record: Row) => {
       target = target.parentElement as HTMLElement
     }
 
-    const allRecords = document.querySelectorAll('.draggable-record')
-    allRecords.forEach((el) => {
-      if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {
-        // el.style.visibility = 'hidden'
-        el.style.opacity = '30%'
-      }
-    })
-
     isDragging.value = true
     dragRecord.value = record
 
@@ -1016,7 +1004,7 @@ watch(
             () => {
               selectedDate = hour
               selectedTime = hour
-              dragRecord = undefined
+              dragRecord = null
             }
           "
         >
@@ -1043,7 +1031,14 @@ watch(
             v-if="record.rowMeta.style?.display !== 'none'"
             :data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`"
             :data-unique-id="record.rowMeta!.id"
-            :style="record.rowMeta!.style "
+            :style="{
+              ...record.rowMeta.style,
+              opacity:
+                (dragRecord === null || record.rowMeta.id === dragRecord?.rowMeta.id) &&
+                (resizeRecord === null || record.rowMeta.id === resizeRecord?.rowMeta.id)
+                  ? 1
+                  : 0.3,
+            }"
             :class="{
               'w-1/5': maxVisibleDays === 5,
               'w-1/7': maxVisibleDays === 7,
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
index d611949cf5..7fad49d118 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
@@ -13,6 +13,7 @@ const setActiveCalendarMode = (mode: 'day' | 'week' | 'month' | 'year', event: M
   changeCalendarView(mode)
   const tabElement = event.target as HTMLElement
   highlightStyle.value.left = `${tabElement.offsetLeft}px`
+  highlightStyle.value.width = `${tabElement.offsetWidth}px`
 }
 
 const updateHighlightPosition = () => {
@@ -20,6 +21,7 @@ const updateHighlightPosition = () => {
     const activeTab = document.querySelector('.nc-calendar-mode-tab .tab.active') as HTMLElement
     if (activeTab) {
       highlightStyle.value.left = `${activeTab.offsetLeft}px`
+      highlightStyle.value.width = `${activeTab.offsetWidth}px`
     }
   })
 }
@@ -37,19 +39,21 @@ watch(activeCalendarView, () => {
 <template>
   <div
     v-if="isTab"
-    class="flex flex-row px-1 pointer-events-auto mx-3 mt-3 rounded-lg gap-x-0.5 nc-calendar-mode-tab"
+    class="px-1 pointer-events-auto relative mx-3 mt-1 mb-2.5 rounded-lg gap-x-0.5 relative nc-calendar-mode-tab"
     data-testid="nc-calendar-view-mode"
   >
-    <div :style="highlightStyle" class="highlight"></div>
-    <div
-      v-for="mode in ['day', 'week', 'month', 'year']"
-      :key="mode"
-      :class="{ active: activeCalendarView === mode }"
-      :data-testid="`nc-calendar-view-mode-${mode}`"
-      class="tab"
-      @click="setActiveCalendarMode(mode, $event)"
-    >
-      <div class="tab-title !text-xs nc-tab">{{ $t(`objects.${mode}`) }}</div>
+    <div class="flex flex-row">
+      <div :style="highlightStyle" class="highlight h-0.5 rounded-t-md absolute transition-all -bottom-2.5 bg-brand-500"></div>
+      <div
+        v-for="mode in ['day', 'week', 'month', 'year']"
+        :key="mode"
+        :class="{ '!text-brand-500 !font-bold  bg-transparent active': activeCalendarView === mode }"
+        :data-testid="`nc-calendar-view-mode-${mode}`"
+        class="tab flex items-center h-7 w-14 z-10 justify-center px-2 py-1 rounded-lg gap-x-1.5 text-gray-600 hover:text-black cursor-pointer transition-all duration-300 select-none"
+        @click="setActiveCalendarMode(mode, $event)"
+      >
+        <div class="min-w-0 pointer-events-none !text-[13px]]">{{ $t(`objects.${mode}`) }}</div>
+      </div>
     </div>
   </div>
 
@@ -79,11 +83,6 @@ watch(activeCalendarView, () => {
 </template>
 
 <style lang="scss" scoped>
-.highlight {
-  @apply absolute h-6.5 w-14 transition-all border-b-2 border-brand-500 duration-200;
-  z-index: 0;
-}
-
 .nc-calendar-mode-menu {
   :deep(.nc-menu-item-inner) {
     @apply !text-[13px];
@@ -95,26 +94,6 @@ watch(activeCalendarView, () => {
   }
 }
 
-.tab {
-  @apply flex items-center h-7 w-14 z-10 justify-center px-2 py-1 rounded-lg gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none;
-}
-
-.tab .tab-title {
-  @apply min-w-0 mb-3  pointer-events-none;
-  word-break: keep-all;
-  white-space: 'nowrap';
-  display: 'inline';
-  line-height: 0.95;
-}
-
-.active {
-  @apply !text-brand-500 !font-bold  bg-transparent;
-}
-
-.nc-calendar-mode-tab {
-  @apply relative;
-}
-
 :deep(.ant-select-selector) {
   @apply !h-7;
 }

From ce7f6d149ab8a1f21bd22515adf43aea26db1e25 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:13 +0000
Subject: [PATCH 34/50] fix:support overlap

---
 .../smartsheet/calendar/DayView/DateTimeField.vue  |  5 +++--
 .../components/smartsheet/calendar/SideMenu.vue    |  3 ++-
 .../components/smartsheet/calendar/VRecordCard.vue | 10 ++++++++--
 .../smartsheet/calendar/WeekView/DateTimeField.vue | 14 ++++++++++++--
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index dbaddab4c5..4eb7d250dc 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -444,8 +444,9 @@ const recordsAcrossAllRange = computed<{
     record.rowMeta.style = {
       ...record.rowMeta.style,
       display,
-      width: `calc(${width.toFixed(2)}% - 8px)`,
-      left: `calc(${left.toFixed(2)}% + 4px)`,
+      width: `calc(max(${width.toFixed(2)}%, 180px))`,
+      left: `min(calc(${left.toFixed(2)}% + 4px), calc(100% - max(${width.toFixed(2)}%, 180px) + 4px))`,
+      minWidth: '180px',
     }
   }
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index b5f4efcc7d..6adaa0edfd 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -346,7 +346,8 @@ onClickOutside(searchRef, toggleSearch)
       'right-2': !showSideMenu,
       'right-74': showSideMenu,
     }"
-    class="absolute transition-all ease-in-out z-9 top-2"
+    style="z-index: 100"
+    class="absolute transition-all ease-in-out top-2"
     hide-on-click
   >
     <template #title> {{ $t('activity.toggleSidebar') }}</template>
diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index 10f216034d..522a31049b 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -27,9 +27,15 @@ const emit = defineEmits(['resize-start'])
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
       'bg-white border-gray-200': color === 'gray',
-      'shadow-md': hover,
+      'z-90': hover,
+    }"
+    :style="{
+      boxShadow: `${
+        hover
+          ? 'box-0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
+          : ' 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)'
+      }`,
     }"
-    style="box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)"
     class="relative flex gap-2 border-1 relative rounded-md h-full"
   >
     <div
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index ac988d3f27..671bcca786 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -528,11 +528,21 @@ const recordsAcrossAllRange = computed<{
         width = 100 / Math.min(maxOverlaps, 3) / maxVisibleDays.value
 
         left = width * (overlapIndex - 1)
+
+        width = Math.max((width / 100) * containerWidth.value - 8, 72)
+
+        left = majorLeft + (left / 100) * containerWidth.value + 8
+
+        if (majorLeft + perWidth < left + width) {
+          left = majorLeft + (perWidth - width - 4)
+        }
       }
+
       record.rowMeta.style = {
         ...record.rowMeta.style,
-        left: `calc(${majorLeft}px + ${left}% + 4px)`,
-        width: `calc(${width}% - 8px)`,
+        left: `${left}px`,
+        width: `${width}px`,
+        minWidth: '72px',
         display,
       }
     }

From dcde0c63eff349e60a1471f679603403213b22ce Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:14 +0000
Subject: [PATCH 35/50] fix:handle minimum time

---
 .../smartsheet/calendar/DayView/DateTimeField.vue           | 2 +-
 .../smartsheet/calendar/WeekView/DateTimeField.vue          | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 4eb7d250dc..8a5de05e34 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -444,7 +444,7 @@ const recordsAcrossAllRange = computed<{
     record.rowMeta.style = {
       ...record.rowMeta.style,
       display,
-      width: `calc(max(${width.toFixed(2)}%, 180px))`,
+      width: `calc(max(calc(${width.toFixed(2)}% - 4px), 180px))`,
       left: `min(calc(${left.toFixed(2)}% + 4px), calc(100% - max(${width.toFixed(2)}%, 180px) + 4px))`,
       minWidth: '180px',
     }
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 671bcca786..d000c1abda 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -139,6 +139,10 @@ const calculateNewDates = useMemoize(
       endDate = startDate.clone().add(15, 'minutes')
     }
 
+    if (endDate.diff(startDate, 'minute') < 60) {
+      endDate = startDate.clone().add(60, 'minutes')
+    }
+
     // If the start date is before the start of the schedule, we set it to the start of the schedule
     // If the end date is after the end of the schedule, we set it to the end of the schedule
     // This is to ensure that the records are within the bounds of the schedule and do not overflow
@@ -531,7 +535,7 @@ const recordsAcrossAllRange = computed<{
 
         width = Math.max((width / 100) * containerWidth.value - 8, 72)
 
-        left = majorLeft + (left / 100) * containerWidth.value + 8
+        left = majorLeft + (left / 100) * containerWidth.value + 4
 
         if (majorLeft + perWidth < left + width) {
           left = majorLeft + (perWidth - width - 4)

From 57d6e74bdd26266ecd8a049843bde0b9b17c280c Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:14 +0000
Subject: [PATCH 36/50] fix: minor fixes

---
 .../components/smartsheet/calendar/DayView/DateTimeField.vue  | 4 ++++
 packages/nc-gui/components/smartsheet/calendar/MonthView.vue  | 1 +
 packages/nc-gui/components/smartsheet/calendar/RecordCard.vue | 4 +++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 8a5de05e34..0f89558cca 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -105,6 +105,10 @@ const calculateNewDates = useMemoize(
       endDate = startDate.clone().add(15, 'minutes')
     }
 
+    if (endDate.diff(startDate, 'minute') < 15) {
+      endDate = startDate.clone().add(15, 'minutes')
+    }
+
     // If the start date is before the opened date, we use the schedule start as the start date
     // This is to ensure the generated style of the record is not outside the bounds of the calendar
     if (startDate.isSameOrBefore(scheduleStart)) {
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 8b2f8b5e02..dcb73a9933 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -895,6 +895,7 @@ const addRecord = (date: dayjs.Dayjs) => {
               "
               :position="record.rowMeta.position"
               :record="record"
+              :dragging="isDragging || resizeInProgress"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
               @resize-start="onResizeStart"
             >
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index 90e892d1c7..4edbc2944d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -9,6 +9,7 @@ interface Props {
   selected?: boolean
   size?: 'small' | 'medium' | 'large' | 'auto'
   position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none'
+  dragging?: boolean
 }
 
 withDefaults(defineProps<Props>(), {
@@ -17,6 +18,7 @@ withDefaults(defineProps<Props>(), {
   color: 'gray',
   size: 'small',
   position: 'rounded',
+  dragging: false,
 })
 
 const emit = defineEmits(['resize-start'])
@@ -72,7 +74,7 @@ const emit = defineEmits(['resize-start'])
         }"
         class="flex mb-0.5 overflow-x-hidden break-word whitespace-nowrap overflow-hidden text-ellipsis w-full truncate text-ellipsis flex-col gap-1"
       >
-        <NcTooltip :disabled="selected" class="inline-block" show-on-truncate-only wrap-child="span">
+        <NcTooltip :disabled="selected || dragging" class="inline-block" show-on-truncate-only wrap-child="span">
           <slot class="text-sm text-nowrap text-gray-800 leading-7" />
           <template #title>
             <slot />

From e170d907802b2b59151de3fedb8fc44ef4387c9c Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:14 +0000
Subject: [PATCH 37/50] fix: flaky tests

---
 tests/playwright/pages/Dashboard/Calendar/CalendarMonth.ts | 2 +-
 tests/playwright/tests/db/views/viewCalendar.spec.ts       | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarMonth.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarMonth.ts
index 16dd75f262..8d73597033 100644
--- a/tests/playwright/pages/Dashboard/Calendar/CalendarMonth.ts
+++ b/tests/playwright/pages/Dashboard/Calendar/CalendarMonth.ts
@@ -32,7 +32,7 @@ export class CalendarMonthPage extends BasePage {
 
     await this.rootPage.waitForTimeout(500);
 
-    await this.rootPage.mouse.move(cord.x + cord.width / 2, cord.y + cord.height / 2, { steps: 10 });
+    await this.rootPage.mouse.move(cord.x + cord.width, cord.y + cord.height, { steps: 10 });
     await this.rootPage.mouse.up();
   }
 
diff --git a/tests/playwright/tests/db/views/viewCalendar.spec.ts b/tests/playwright/tests/db/views/viewCalendar.spec.ts
index ae193566b9..05d00a8484 100644
--- a/tests/playwright/tests/db/views/viewCalendar.spec.ts
+++ b/tests/playwright/tests/db/views/viewCalendar.spec.ts
@@ -335,6 +335,8 @@ test.describe('Calendar View', () => {
       action: 'prev',
     });
 
+    await calendar.dashboard.rootPage.waitForTimeout(1000);
+
     await calendar.calendarWeekDateTime.dragAndDrop({
       record: 'Team Catchup',
       to: {

From 8b0882a84a4b76a8100a40c6d072ae9c01d02a96 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:14 +0000
Subject: [PATCH 38/50] feat: add virtual scrolling

---
 .../smartsheet/calendar/DayView/DateField.vue | 74 +++++++++----------
 .../calendar/WeekView/DateField.vue           |  4 +-
 2 files changed, 35 insertions(+), 43 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
index 03a883a2b9..bd971f8c79 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
 import type { ColumnType } from 'nocodb-sdk'
+import { UseVirtualList } from '@vueuse/components'
 
 const emit = defineEmits(['expandRecord', 'newRecord'])
 
@@ -53,11 +54,6 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
 
         dayRecordCount++
 
-        const style: Partial<CSSStyleDeclaration> = {
-          top: `${(dayRecordCount - 1) * perRecordHeight + dayRecordCount * 8}px`,
-          width: '100%',
-        }
-
         // This property is used to determine which side the record should be rounded. It can be left, right, both or none
         let position = 'none'
         const isSelectedDay = (date: dayjs.Dayjs) => date.isSame(selectedDate.value, 'day')
@@ -81,7 +77,6 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
           rowMeta: {
             ...record.rowMeta,
             position,
-            style,
             range: range as any,
           },
         })
@@ -94,11 +89,6 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
           rowMeta: {
             ...record.rowMeta,
             range: range as any,
-            style: {
-              width: '100%',
-              left: '0',
-              top: `${(dayRecordCount - 1) * perRecordHeight + dayRecordCount * 8}px`,
-            },
             position: 'rounded',
           },
         })
@@ -203,41 +193,43 @@ const newRecord = () => {
   <div
     v-if="recordsAcrossAllRange.length"
     ref="container"
-    class="w-full cursor-pointer relative h-[calc(100vh-10.8rem)] overflow-y-auto nc-scrollbar-md"
+    class="w-full cursor-pointer relative overflow-y-auto nc-scrollbar-md"
     data-testid="nc-calendar-day-view"
     @dblclick="newRecord"
     @drop="dropEvent"
   >
-    <div
-      v-for="(record, rowIndex) in recordsAcrossAllRange"
-      :key="rowIndex"
-      :style="record.rowMeta.style"
-      class="absolute"
-      data-testid="nc-calendar-day-record-card"
-      @mouseleave="hoverRecord = null"
-      @mouseover="hoverRecord = record.rowMeta.id as string"
-    >
-      <LazySmartsheetRow :row="record">
-        <LazySmartsheetCalendarRecordCard
-          :record="record"
-          :resize="false"
-          size="small"
-          @click.prevent="emit('expandRecord', record)"
+    <UseVirtualList height="calc(100vh - 5rem)" :list="recordsAcrossAllRange" :options="{ itemHeight: 36 }">
+      <template #default="{ data: record }">
+        <div
+          :key="record.rowMeta.id"
+          class="mt-2"
+          data-testid="nc-calendar-day-record-card"
+          @mouseleave="hoverRecord = null"
+          @mouseover="hoverRecord = record.rowMeta.id as string"
         >
-          <template v-for="(field, id) in fields" :key="id">
-            <LazySmartsheetPlainCell
-              v-if="!isRowEmpty(record, field!)"
-              v-model="record.row[field!.title!]"
-              class="text-xs"
-              :bold="getFieldStyle(field).bold"
-              :column="field"
-              :italic="getFieldStyle(field).italic"
-              :underline="getFieldStyle(field).underline"
-            />
-          </template>
-        </LazySmartsheetCalendarRecordCard>
-      </LazySmartsheetRow>
-    </div>
+          <LazySmartsheetRow :row="record">
+            <LazySmartsheetCalendarRecordCard
+              :record="record"
+              :resize="false"
+              size="small"
+              @click.prevent="emit('expandRecord', record)"
+            >
+              <template v-for="(field, id) in fields" :key="id">
+                <LazySmartsheetPlainCell
+                  v-if="!isRowEmpty(record, field!)"
+                  v-model="record.row[field!.title!]"
+                  class="text-xs"
+                  :bold="getFieldStyle(field).bold"
+                  :column="field"
+                  :italic="getFieldStyle(field).italic"
+                  :underline="getFieldStyle(field).underline"
+                />
+              </template>
+            </LazySmartsheetCalendarRecordCard>
+          </LazySmartsheetRow>
+        </div>
+      </template>
+    </UseVirtualList>
   </div>
 
   <div
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index 761dd9b3fd..6cb3a57960 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -521,7 +521,7 @@ const addRecord = (date: dayjs.Dayjs) => {
         {{ dayjs(date).format('DD ddd') }}
       </div>
     </div>
-    <div ref="container" class="flex h-[calc(100vh-11.6rem)]">
+    <div ref="container" class="flex h-[calc(100vh-7.3rem)] w-full">
       <div
         v-for="(date, dateIndex) in weekDates"
         :key="dateIndex"
@@ -538,7 +538,7 @@ const addRecord = (date: dayjs.Dayjs) => {
       ></div>
     </div>
     <div
-      class="absolute nc-scrollbar-md overflow-y-auto mt-9 pointer-events-none inset-0"
+      class="absolute nc-scrollbar-md overflow-y-auto mt-6 pointer-events-none inset-0"
       data-testid="nc-calendar-week-record-container"
     >
       <template v-for="(record, id) in calendarData" :key="id">

From ac485df96d3f27b138026ce3a592528e42daa943 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:14 +0000
Subject: [PATCH 39/50] feat: new drag, resize interaction

---
 .../calendar/DateTimeSpanningContainer.vue    |  2 +-
 .../calendar/DayView/DateTimeField.vue        | 40 ++++++++------
 .../smartsheet/calendar/MonthView.vue         | 43 ++++++++++-----
 .../smartsheet/calendar/VRecordCard.vue       |  2 +-
 .../calendar/WeekView/DateTimeField.vue       | 54 +++++++++++--------
 5 files changed, 88 insertions(+), 53 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index 0bde15bbd5..adc3c28df8 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -135,7 +135,7 @@ const calendarData = computed(() => {
       else if (isEndInRange) position = 'rightRounded'
 
       const style: Partial<CSSStyleDeclaration> = {
-        top: `${row * 28 + row * 8}px`,
+        top: `${row * 28 + row * 8 + 4}px`,
         left: `${startDayIndex * perDayWidth}px`,
         width: `${spanDays * perDayWidth}px`,
       }
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 0f89558cca..e9ee3ac10b 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -219,6 +219,20 @@ const getMaxOverlaps = ({
   return Math.max(...overlapIterations)
 }
 
+const dragRecord = ref<Row | null>(null)
+
+const isDragging = ref(false)
+
+const dragElement = ref<HTMLElement | null>(null)
+
+const resizeDirection = ref<'right' | 'left' | null>()
+
+const resizeRecord = ref<Row | null>(null)
+
+const dragTimeout = ref<ReturnType<typeof setTimeout>>()
+
+const hoverRecord = ref<string | null>(null)
+
 const recordsAcrossAllRange = computed<{
   record: Row[]
   spanningRecords: Row[]
@@ -432,7 +446,17 @@ const recordsAcrossAllRange = computed<{
     let left = 100
     let display = 'block'
 
-    if (numberOfOverlaps && numberOfOverlaps > 0) {
+    const isRecordDraggingOrResizeState =
+      record.rowMeta.id === dragRecord.value?.rowMeta.id || record.rowMeta.id === resizeRecord.value?.rowMeta.id
+
+    if (isRecordDraggingOrResizeState) {
+      record.rowMeta.style = {
+        ...record.rowMeta.style,
+        zIndex: 10,
+      }
+    }
+
+    if (numberOfOverlaps && numberOfOverlaps > 0 && !isRecordDraggingOrResizeState) {
       width = 100 / Math.min(numberOfOverlaps, 8)
 
       if (record.rowMeta.overLapIteration! - 1 > 7) {
@@ -461,20 +485,6 @@ const recordsAcrossAllRange = computed<{
   }
 })
 
-const dragRecord = ref<Row | null>(null)
-
-const isDragging = ref(false)
-
-const dragElement = ref<HTMLElement | null>(null)
-
-const resizeDirection = ref<'right' | 'left' | null>()
-
-const resizeRecord = ref<Row | null>(null)
-
-const dragTimeout = ref<ReturnType<typeof setTimeout>>()
-
-const hoverRecord = ref<string | null>(null)
-
 const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
   updateRowProperty(row, updateProperty, isDelete)
 }, 500)
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index dcb73a9933..9f86042c31 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -59,7 +59,7 @@ const resizeInProgress = ref(false)
 
 const isDragging = ref(false)
 
-const dragRecord = ref<Row>()
+const dragRecord = ref<Row | null>(null)
 
 const hoverRecord = ref<string | null>()
 
@@ -69,7 +69,7 @@ const focusedDate = ref<dayjs.Dayjs | null>(null)
 
 const resizeDirection = ref<'right' | 'left'>()
 
-const resizeRecord = ref<Row>()
+const resizeRecord = ref<Row | null>(null)
 
 const fields = inject(FieldsInj, ref())
 
@@ -245,17 +245,26 @@ const recordsToDisplay = computed<{
           dayjs(day.date).isSame(startDate, 'day'),
         )
 
+        const id = record.rowMeta.id ?? generateRandomNumber()
+
+        const isRecordDraggingOrResizeState = id === draggingId.value || id === resizeRecord.value?.rowMeta.id
+
         const style: Partial<CSSStyleDeclaration> = {
           left: `${dayIndex * perWidth}px`,
           width: `${perWidth}px`,
-          top: `${weekIndex * perHeight + (spaceBetweenRecords + lane * (perRecordHeight + 4))}px`,
+          top: isRecordDraggingOrResizeState
+            ? `${weekIndex * perHeight}px`
+            : `${weekIndex * perHeight + (spaceBetweenRecords + lane * (perRecordHeight + 4))}px`,
         }
 
-        if (maxVisibleDays.value === 5 && (dayIndex === 5 || dayIndex === 6)) {
-          style.display = 'none'
+        if (isRecordDraggingOrResizeState) {
+          style.zIndex = '100'
+          style.display = 'block'
         }
 
-        const id = record.rowMeta.id ?? Math.random().toString(36).substr(2, 9)
+        if (maxVisibleDays.value === 5 && (dayIndex === 5 || dayIndex === 6) && !isRecordDraggingOrResizeState) {
+          style.display = 'none'
+        }
 
         recordsToDisplay.push({
           ...record,
@@ -317,10 +326,18 @@ const recordsToDisplay = computed<{
           const startDayIndex = (dates.value[weekIndex] ?? []).findIndex((day) => dayjs(day).isSame(recordStart, 'day'))
           const endDayIndex = (dates.value[weekIndex] ?? []).findIndex((day) => dayjs(day).isSame(recordEnd, 'day'))
 
+          const isRecordDraggingOrResizeState = id === draggingId.value || id === resizeRecord.value?.rowMeta.id
+
           const style: Partial<CSSStyleDeclaration> = {
             left: `${startDayIndex * perWidth}px`,
             width: `${(endDayIndex - startDayIndex + 1) * perWidth}px`,
-            top: `${weekIndex * perHeight + (spaceBetweenRecords + lane * (perRecordHeight + 4))}px`,
+            top: isRecordDraggingOrResizeState
+              ? `${weekIndex * perHeight + perRecordHeight}px`
+              : `${weekIndex * perHeight + (spaceBetweenRecords + lane * (perRecordHeight + 4))}px`,
+          }
+
+          if (isRecordDraggingOrResizeState) {
+            style.zIndex = '100'
           }
 
           let position = 'rounded'
@@ -447,7 +464,7 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean, skipChangeC
 
   const newPk = extractPkFromRow(newRow.row, meta.value!.columns!)
 
-  newRow.rowMeta.id = draggingId
+  newRow.rowMeta.id = draggingId?.value
 
   if (updateSideBar) {
     formattedData.value = [...(formattedData.value as Row[]), newRow as Row]
@@ -550,7 +567,7 @@ const onResize = (event: MouseEvent) => {
 const onResizeEnd = () => {
   resizeInProgress.value = false
   resizeDirection.value = undefined
-  resizeRecord.value = undefined
+  resizeRecord.value = null
 
   document.removeEventListener('mousemove', onResize)
   document.removeEventListener('mouseup', onResizeEnd)
@@ -587,7 +604,7 @@ const stopDrag = (event: MouseEvent) => {
     dragElement.value = null
   }
 
-  dragRecord.value = undefined
+  dragRecord.value = null
   updateRowProperty(newRow, updateProperty, false)
   focusedDate.value = null
 
@@ -675,9 +692,9 @@ const dropEvent = (event: DragEvent) => {
 }
 
 const selectDate = (date: dayjs.Dayjs) => {
-  dragRecord.value = undefined
+  dragRecord.value = null
   draggingId.value = null
-  resizeRecord.value = undefined
+  resizeRecord.value = null
   resizeInProgress.value = false
   resizeDirection.value = undefined
   focusedDate.value = null
@@ -874,7 +891,7 @@ const addRecord = (date: dayjs.Dayjs) => {
 
             opacity:
               (draggingId === null || record.rowMeta.id === draggingId) &&
-              (resizeRecord === undefined || record.rowMeta.id === resizeRecord?.rowMeta.id)
+              (resizeRecord === null || record.rowMeta.id === resizeRecord?.rowMeta.id)
                 ? 1
                 : 0.3,
           }"
diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index 522a31049b..3f5ed4d006 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -26,7 +26,7 @@ const emit = defineEmits(['resize-start'])
       'bg-yellow-50': color === 'yellow',
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
-      'bg-white border-gray-200': color === 'gray',
+      'bg-white border-gray-300': color === 'gray',
       'z-90': hover,
     }"
     :style="{
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index d000c1abda..505539d8b4 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -260,6 +260,20 @@ const getMaxOverlaps = ({
   return { maxOverlaps, dayIndex, overlapIndex }
 }
 
+const resizeInProgress = ref(false)
+
+const dragTimeout = ref<ReturnType<typeof setTimeout>>()
+
+const hoverRecord = ref<string | null>()
+
+const resizeDirection = ref<'right' | 'left' | null>()
+
+const resizeRecord = ref<Row | null>(null)
+
+const isDragging = ref(false)
+
+const dragRecord = ref<Row | null>(null)
+
 const recordsAcrossAllRange = computed<{
   records: Array<Row>
   gridTimeMap: Map<
@@ -526,20 +540,28 @@ const recordsAcrossAllRange = computed<{
 
       const majorLeft = dayIndex * perWidth
 
-      if (record.rowMeta.overLapIteration! - 1 > 2) {
-        display = 'none'
-      } else {
-        width = 100 / Math.min(maxOverlaps, 3) / maxVisibleDays.value
+      const isRecordDraggingOrResizeState =
+        record.rowMeta.id === dragRecord.value?.rowMeta.id || record.rowMeta.id === resizeRecord.value?.rowMeta.id
+
+      if (!isRecordDraggingOrResizeState) {
+        if (record.rowMeta.overLapIteration! - 1 > 2) {
+          display = 'none'
+        } else {
+          width = 100 / Math.min(maxOverlaps, 3) / maxVisibleDays.value
 
-        left = width * (overlapIndex - 1)
+          left = width * (overlapIndex - 1)
 
-        width = Math.max((width / 100) * containerWidth.value - 8, 72)
+          width = Math.max((width / 100) * containerWidth.value - 8, 72)
 
-        left = majorLeft + (left / 100) * containerWidth.value + 4
+          left = majorLeft + (left / 100) * containerWidth.value + 4
 
-        if (majorLeft + perWidth < left + width) {
-          left = majorLeft + (perWidth - width - 4)
+          if (majorLeft + perWidth < left + width) {
+            left = majorLeft + (perWidth - width - 4)
+          }
         }
+      } else {
+        left = majorLeft + 4
+        width = perWidth - 8
       }
 
       record.rowMeta.style = {
@@ -559,20 +581,6 @@ const recordsAcrossAllRange = computed<{
   }
 })
 
-const resizeInProgress = ref(false)
-
-const dragTimeout = ref<ReturnType<typeof setTimeout>>()
-
-const hoverRecord = ref<string | null>()
-
-const resizeDirection = ref<'right' | 'left' | null>()
-
-const resizeRecord = ref<Row | null>(null)
-
-const isDragging = ref(false)
-
-const dragRecord = ref<Row | null>(null)
-
 const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
   updateRowProperty(row, updateProperty, isDelete)
 }, 500)

From 1787f4935b89627a5d584591cbcf5d5489e57e3e Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:14 +0000
Subject: [PATCH 40/50] fix: update view create modal design

---
 packages/nc-gui/components/dlg/ViewCreate.vue | 279 ++++++++++--------
 1 file changed, 150 insertions(+), 129 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index eda60911f3..7ca88d0ee5 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -945,161 +945,182 @@ const getPluralName = (name: string) => {
                   <div class="flex-1 flex items-center gap-1 max-w-[calc(100%_-_24px)]">
                     <SmartsheetHeaderIcon :column="option" class="!ml-0" />
 
-                    <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
-                      <template #title>
-                        {{ option.label }}
-                      </template>
-                      <template #default>{{ option.label }}</template>
-                    </NcTooltip>
-                  </div>
-                  <GeneralIcon
-                    v-if="form.fk_grp_col_id === option.value"
-                    id="nc-selected-item-icon"
-                    icon="check"
-                    class="flex-none text-primary w-4 h-4"
-                  />
+                  <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
+                    <template #title>
+                      {{ option.label }}
+                    </template>
+                    <template #default>{{ option.label }}</template>
+                  </NcTooltip>
                 </div>
-              </a-select-option>
-            </NcSelect>
-          </a-form-item>
-          <a-form-item
-            v-if="form.type === ViewTypes.MAP"
-            :label="$t('general.geoDataField')"
-            :rules="geoDataFieldColumnRules"
-            name="fk_geo_data_col_id"
+                <GeneralIcon
+                  v-if="form.fk_grp_col_id === option.value"
+                  id="nc-selected-item-icon"
+                  icon="check"
+                  class="flex-none text-primary w-4 h-4"
+                />
+              </div>
+            </a-select-option>
+          </NcSelect>
+        </a-form-item>
+        <a-form-item
+          v-if="form.type === ViewTypes.MAP"
+          :label="$t('general.geoDataField')"
+          :rules="geoDataFieldColumnRules"
+          name="fk_geo_data_col_id"
+        >
+          <NcSelect
+            v-model:value="form.fk_geo_data_col_id"
+            :disabled="isMetaLoading"
+            :loading="isMetaLoading"
+            :not-found-content="$t('placeholder.selectGeoFieldNotFound')"
+            :options="viewSelectFieldOptions"
+            :placeholder="$t('placeholder.selectGeoField')"
+            class="nc-select-shadow w-full"
+          />
+        </a-form-item>
+        <template v-if="form.type === ViewTypes.CALENDAR && !form.copy_from_id">
+          <div
+            v-for="(range, index) in form.calendar_range"
+            :key="`range-${index}`"
+            :class="{
+              '!gap-2': range.fk_to_column_id === null,
+            }"
+            class="flex flex-col w-full gap-6"
           >
-            <NcSelect
-              v-model:value="form.fk_geo_data_col_id"
-              :disabled="isMetaLoading"
-              :loading="isMetaLoading"
-              :not-found-content="$t('placeholder.selectGeoFieldNotFound')"
-              :options="viewSelectFieldOptions"
-              :placeholder="$t('placeholder.selectGeoField')"
-              class="nc-select-shadow w-full"
-            />
-          </a-form-item>
-          <template v-if="form.type === ViewTypes.CALENDAR && !form.copy_from_id">
-            <div
-              v-for="(range, index) in form.calendar_range"
-              :key="`range-${index}`"
-              :class="{
-                '!gap-2': range.fk_to_column_id === null,
-              }"
-              class="flex flex-col w-full gap-6"
-            >
-              <div class="w-full space-y-2">
-                <div class="text-gray-800">
-                  {{ $t('labels.organiseBy') }}
-                </div>
-                <NcSelect
-                  v-model:value="range.fk_from_column_id"
-                  :disabled="isMetaLoading"
-                  :loading="isMetaLoading"
-                  class="nc-select-shadow w-full nc-from-select"
-                >
-                  <a-select-option
-                    v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
+            <div class="w-full space-y-2">
+              <div class="text-gray-800">
+                {{ $t('labels.organiseBy') }}
+              </div>
+
+              <a-select
+                v-model:value="range.fk_from_column_id"
+                class="nc-select-shadow w-full nc-from-select !rounded-lg"
+                dropdown-class-name="!rounded-lg"
+                :placeholder="$t('placeholder.notSelected')"
+                data-testid="nc-calendar-range-from-field-select"
+                @click.stop
+              >
+                <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
+                <a-select-option
+                  v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
                   // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
                   // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
                   if (index === 0) return true
                   const firstRange = viewSelectFieldOptions!.find((f) => f.value === form.calendar_range[0].fk_from_column_id)
                   return firstRange?.uidt === f.uidt
                 })"
-                    :key="id"
-                    class="w-40"
-                    :value="option.value"
-                  >
-                    <div class="flex w-full gap-2 justify-between items-center">
-                      <div class="flex gap-2 items-center">
-                        <SmartsheetHeaderIcon :column="option" class="!ml-0" />
-                        <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                          <template #title>{{ option.label }}</template>
+                  :key="id"
+                  :value="option.value"
+                >
+                  <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
+                    <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
+                      <SmartsheetHeaderIcon :column="option" />
+
+                      <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
+                        <template #title>
                           {{ option.label }}
-                        </NcTooltip>
-                      </div>
-                      <div class="flex-1" />
-                      <component
-                        :is="iconMap.check"
-                        v-if="option.value === range.fk_from_column_id"
-                        id="nc-selected-item-icon"
-                        class="text-primary min-w-4 h-4"
-                      />
+                        </template>
+                        <template #default>{{ option.label }}</template>
+                      </NcTooltip>
                     </div>
-                  </a-select-option>
-                </NcSelect>
-              </div>
-              <div class="w-full space-y-2">
-                <NcButton
-                  v-if="range.fk_to_column_id === null && isRangeEnabled"
-                  size="small"
-                  class="!border-none w-28"
-                  type="secondary"
-                  :disabled="!isEeUI"
-                  @click="range.fk_to_column_id = undefined"
-                >
-                  <component :is="iconMap.plus" class="h-4 w-4" />
-                  {{ $t('activity.endDate') }}
-                </NcButton>
+                    <GeneralIcon
+                      v-if="option.value === range.fk_from_column_id"
+                      id="nc-selected-item-icon"
+                      icon="check"
+                      class="flex-none text-primary w-4 h-4"
+                    />
+                  </div>
+                </a-select-option>
+              </a-select>
+            </div>
+            <div class="w-full space-y-2">
+              <NcButton
+                v-if="range.fk_to_column_id === null && isRangeEnabled"
+                size="small"
+                class="!border-none w-28"
+                type="secondary"
+                :disabled="!isEeUI"
+                @click="range.fk_to_column_id = undefined"
+              >
+                <component :is="iconMap.plus" class="h-4 w-4" />
+                {{ $t('activity.endDate') }}
+              </NcButton>
 
                 <template v-else-if="isEeUI && isRangeEnabled">
                   <span class="text-gray-700">
                     {{ $t('activity.withEndDate') }}
                   </span>
 
-                  <div class="flex">
-                    <NcSelect
-                      v-model:value="range.fk_to_column_id"
-                      :disabled="isMetaLoading"
-                      :loading="isMetaLoading"
-                      :placeholder="$t('placeholder.notSelected')"
-                      class="nc-to-select flex-1"
+                <div class="flex">
+                  <a-select
+                    v-model:value="range.fk_to_column_id"
+                    class="!rounded-r-none nc-select-shadow w-full flex-1 nc-to-select"
+                    :disabled="isMetaLoading"
+                    :loading="isMetaLoading"
+                    :placeholder="$t('placeholder.notSelected')"
+                    data-testid="nc-calendar-range-to-field-select"
+                    dropdown-class-name="!rounded-lg"
+                    @click.stop
+                  >
+                    <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
+
+                    <a-select-option
+                      v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
+                        // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
+                        // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
+
+                        const firstRange = viewSelectFieldOptions.find(
+                          (f) => f.value === form.calendar_range[0].fk_from_column_id,
+                        )
+                        return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
+                      })"
+                      :key="id"
+                      :value="option.value"
                     >
-                      <a-select-option
-                        v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
-                          // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
-                          // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
-
-                          const firstRange = viewSelectFieldOptions.find(
-                            (f) => f.value === form.calendar_range[0].fk_from_column_id,
-                          )
-                          return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
-                        })"
-                        :key="id"
-                        :value="option.value"
-                      >
-                        <div class="flex items-center">
+                      <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
+                        <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
                           <SmartsheetHeaderIcon :column="option" />
-                          <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                            <template #title>{{ option.label }}</template>
-                            {{ option.label }}
+
+                          <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
+                            <template #title>
+                              {{ option.label }}
+                            </template>
+                            <template #default>{{ option.label }}</template>
                           </NcTooltip>
                         </div>
-                      </a-select-option>
-                    </NcSelect>
-                    <NcButton
-                      class="!rounded-l-none !border-l-0"
-                      size="small"
-                      type="secondary"
-                      @click="range.fk_to_column_id = null"
-                    >
-                      <component :is="iconMap.delete" class="h-4 w-4" />
-                    </NcButton>
-                  </div>
+                        <GeneralIcon
+                          v-if="option.value === range.fk_from_column_id"
+                          id="nc-selected-item-icon"
+                          icon="check"
+                          class="flex-none text-primary w-4 h-4"
+                        />
+                      </div>
+                    </a-select-option>
+                  </a-select>
                   <NcButton
-                    v-if="index !== 0"
+                    class="!rounded-l-none !border-l-0"
                     size="small"
                     type="secondary"
-                    @click="
-                      () => {
-                        form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
-                      }
-                    "
+                    @click="range.fk_to_column_id = null"
                   >
-                    <component :is="iconMap.close" />
+                    <component :is="iconMap.delete" class="h-4 w-4" />
                   </NcButton>
-                </template>
-              </div>
+                </div>
+                <NcButton
+                  v-if="index !== 0"
+                  size="small"
+                  type="secondary"
+                  @click="
+                    () => {
+                      form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
+                    }
+                  "
+                >
+                  <component :is="iconMap.close" />
+                </NcButton>
+              </template>
             </div>
+          </div>
 
             <!--          <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
             <component :is="iconMap.plus" />

From b1c2d9687e1f45a26b7ed72f44bfb07442e6eb6a Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:14 +0000
Subject: [PATCH 41/50] fix: zIndex issue fix: hover effect not applying

---
 .../nc-gui/components/smartsheet/calendar/VRecordCard.vue     | 4 ++--
 .../components/smartsheet/calendar/WeekView/DateTimeField.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index 3f5ed4d006..94a38943e3 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -32,8 +32,8 @@ const emit = defineEmits(['resize-start'])
     :style="{
       boxShadow: `${
         hover
-          ? 'box-0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
-          : ' 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)'
+          ? '0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
+          : '0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)'
       }`,
     }"
     class="relative flex gap-2 border-1 relative rounded-md h-full"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 505539d8b4..1a4ac1c8d7 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -1033,7 +1033,7 @@ watch(
           <NcButton
             v-if="isOverflowAcrossHourRange(hour).isOverflow"
             v-e="`['c:calendar:week-view-more']`"
-            class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-3 text-gray-500"
+            class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-2 text-gray-500"
             size="xxsmall"
             type="secondary"
             @click="viewMore(hour)"

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 42/50] 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,
   )

From 917c5f57be3561125812fef80c1aa69d573d935c Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:14 +0000
Subject: [PATCH 43/50] fix: updated spacing

---
 .../smartsheet/calendar/DateTimeSpanningContainer.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index a2860eb206..6c9e6e586b 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -135,7 +135,7 @@ const calendarData = computed(() => {
       else if (isEndInRange) position = 'rightRounded'
 
       const style: Partial<CSSStyleDeclaration> = {
-        top: `${row * 28 + row * 8 + 4}px`,
+        top: `${row * 28 + row * 8 + 8}px`,
         left: `${startDayIndex * perDayWidth}px`,
         width: `${spanDays * perDayWidth}px`,
       }

From ce2af192837e9b985dfe62823cc69a47ac2945a4 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:15 +0000
Subject: [PATCH 44/50] fix: pr review comments

---
 packages/nc-gui/components/dlg/ViewCreate.vue | 324 +++++++++---------
 .../calendar/DateTimeSpanningContainer.vue    |   6 +-
 .../calendar/DayView/DateTimeField.vue        |   5 +-
 .../smartsheet/calendar/MonthView.vue         |  16 +-
 .../calendar/WeekView/DateTimeField.vue       |  20 +-
 5 files changed, 195 insertions(+), 176 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 7ca88d0ee5..38fc6dfd7e 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -945,182 +945,182 @@ const getPluralName = (name: string) => {
                   <div class="flex-1 flex items-center gap-1 max-w-[calc(100%_-_24px)]">
                     <SmartsheetHeaderIcon :column="option" class="!ml-0" />
 
-                  <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
-                    <template #title>
-                      {{ option.label }}
-                    </template>
-                    <template #default>{{ option.label }}</template>
-                  </NcTooltip>
+                    <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
+                      <template #title>
+                        {{ option.label }}
+                      </template>
+                      <template #default>{{ option.label }}</template>
+                    </NcTooltip>
+                  </div>
+                  <GeneralIcon
+                    v-if="form.fk_grp_col_id === option.value"
+                    id="nc-selected-item-icon"
+                    icon="check"
+                    class="flex-none text-primary w-4 h-4"
+                  />
                 </div>
-                <GeneralIcon
-                  v-if="form.fk_grp_col_id === option.value"
-                  id="nc-selected-item-icon"
-                  icon="check"
-                  class="flex-none text-primary w-4 h-4"
-                />
-              </div>
-            </a-select-option>
-          </NcSelect>
-        </a-form-item>
-        <a-form-item
-          v-if="form.type === ViewTypes.MAP"
-          :label="$t('general.geoDataField')"
-          :rules="geoDataFieldColumnRules"
-          name="fk_geo_data_col_id"
-        >
-          <NcSelect
-            v-model:value="form.fk_geo_data_col_id"
-            :disabled="isMetaLoading"
-            :loading="isMetaLoading"
-            :not-found-content="$t('placeholder.selectGeoFieldNotFound')"
-            :options="viewSelectFieldOptions"
-            :placeholder="$t('placeholder.selectGeoField')"
-            class="nc-select-shadow w-full"
-          />
-        </a-form-item>
-        <template v-if="form.type === ViewTypes.CALENDAR && !form.copy_from_id">
-          <div
-            v-for="(range, index) in form.calendar_range"
-            :key="`range-${index}`"
-            :class="{
-              '!gap-2': range.fk_to_column_id === null,
-            }"
-            class="flex flex-col w-full gap-6"
+              </a-select-option>
+            </NcSelect>
+          </a-form-item>
+          <a-form-item
+            v-if="form.type === ViewTypes.MAP"
+            :label="$t('general.geoDataField')"
+            :rules="geoDataFieldColumnRules"
+            name="fk_geo_data_col_id"
           >
-            <div class="w-full space-y-2">
-              <div class="text-gray-800">
-                {{ $t('labels.organiseBy') }}
-              </div>
+            <NcSelect
+              v-model:value="form.fk_geo_data_col_id"
+              :disabled="isMetaLoading"
+              :loading="isMetaLoading"
+              :not-found-content="$t('placeholder.selectGeoFieldNotFound')"
+              :options="viewSelectFieldOptions"
+              :placeholder="$t('placeholder.selectGeoField')"
+              class="nc-select-shadow w-full"
+            />
+          </a-form-item>
+          <template v-if="form.type === ViewTypes.CALENDAR && !form.copy_from_id">
+            <div
+              v-for="(range, index) in form.calendar_range"
+              :key="`range-${index}`"
+              :class="{
+                '!gap-2': range.fk_to_column_id === null,
+              }"
+              class="flex flex-col w-full gap-6"
+            >
+              <div class="w-full space-y-2">
+                <div class="text-gray-800">
+                  {{ $t('labels.organiseBy') }}
+                </div>
 
-              <a-select
-                v-model:value="range.fk_from_column_id"
-                class="nc-select-shadow w-full nc-from-select !rounded-lg"
-                dropdown-class-name="!rounded-lg"
-                :placeholder="$t('placeholder.notSelected')"
-                data-testid="nc-calendar-range-from-field-select"
-                @click.stop
-              >
-                <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
-                <a-select-option
-                  v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
+                <a-select
+                  v-model:value="range.fk_from_column_id"
+                  class="nc-select-shadow w-full nc-from-select !rounded-lg"
+                  dropdown-class-name="!rounded-lg"
+                  :placeholder="$t('placeholder.notSelected')"
+                  data-testid="nc-calendar-range-from-field-select"
+                  @click.stop
+                >
+                  <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
+                  <a-select-option
+                    v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
                   // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
                   // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
                   if (index === 0) return true
                   const firstRange = viewSelectFieldOptions!.find((f) => f.value === form.calendar_range[0].fk_from_column_id)
                   return firstRange?.uidt === f.uidt
                 })"
-                  :key="id"
-                  :value="option.value"
-                >
-                  <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
-                    <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
-                      <SmartsheetHeaderIcon :column="option" />
+                    :key="id"
+                    :value="option.value"
+                  >
+                    <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
+                      <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
+                        <SmartsheetHeaderIcon :column="option" />
 
-                      <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
-                        <template #title>
-                          {{ option.label }}
-                        </template>
-                        <template #default>{{ option.label }}</template>
-                      </NcTooltip>
+                        <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
+                          <template #title>
+                            {{ option.label }}
+                          </template>
+                          <template #default>{{ option.label }}</template>
+                        </NcTooltip>
+                      </div>
+                      <GeneralIcon
+                        v-if="option.value === range.fk_from_column_id"
+                        id="nc-selected-item-icon"
+                        icon="check"
+                        class="flex-none text-primary w-4 h-4"
+                      />
                     </div>
-                    <GeneralIcon
-                      v-if="option.value === range.fk_from_column_id"
-                      id="nc-selected-item-icon"
-                      icon="check"
-                      class="flex-none text-primary w-4 h-4"
-                    />
-                  </div>
-                </a-select-option>
-              </a-select>
-            </div>
-            <div class="w-full space-y-2">
-              <NcButton
-                v-if="range.fk_to_column_id === null && isRangeEnabled"
-                size="small"
-                class="!border-none w-28"
-                type="secondary"
-                :disabled="!isEeUI"
-                @click="range.fk_to_column_id = undefined"
-              >
-                <component :is="iconMap.plus" class="h-4 w-4" />
-                {{ $t('activity.endDate') }}
-              </NcButton>
+                  </a-select-option>
+                </a-select>
+              </div>
+              <div class="w-full space-y-2">
+                <NcButton
+                  v-if="range.fk_to_column_id === null && isRangeEnabled"
+                  size="small"
+                  class="w-28"
+                  type="text"
+                  :disabled="!isEeUI"
+                  @click="range.fk_to_column_id = undefined"
+                >
+                  <component :is="iconMap.plus" class="h-4 w-4" />
+                  {{ $t('activity.endDate') }}
+                </NcButton>
 
                 <template v-else-if="isEeUI && isRangeEnabled">
                   <span class="text-gray-700">
                     {{ $t('activity.withEndDate') }}
                   </span>
 
-                <div class="flex">
-                  <a-select
-                    v-model:value="range.fk_to_column_id"
-                    class="!rounded-r-none nc-select-shadow w-full flex-1 nc-to-select"
-                    :disabled="isMetaLoading"
-                    :loading="isMetaLoading"
-                    :placeholder="$t('placeholder.notSelected')"
-                    data-testid="nc-calendar-range-to-field-select"
-                    dropdown-class-name="!rounded-lg"
-                    @click.stop
-                  >
-                    <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
-
-                    <a-select-option
-                      v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
-                        // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
-                        // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
-
-                        const firstRange = viewSelectFieldOptions.find(
-                          (f) => f.value === form.calendar_range[0].fk_from_column_id,
-                        )
-                        return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
-                      })"
-                      :key="id"
-                      :value="option.value"
+                  <div class="flex">
+                    <a-select
+                      v-model:value="range.fk_to_column_id"
+                      class="!rounded-r-none nc-select-shadow w-full flex-1 nc-to-select"
+                      :disabled="isMetaLoading"
+                      :loading="isMetaLoading"
+                      :placeholder="$t('placeholder.notSelected')"
+                      data-testid="nc-calendar-range-to-field-select"
+                      dropdown-class-name="!rounded-lg"
+                      @click.stop
                     >
-                      <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
-                        <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
-                          <SmartsheetHeaderIcon :column="option" />
-
-                          <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
-                            <template #title>
-                              {{ option.label }}
-                            </template>
-                            <template #default>{{ option.label }}</template>
-                          </NcTooltip>
+                      <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
+
+                      <a-select-option
+                        v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
+                          // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
+                          // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
+
+                          const firstRange = viewSelectFieldOptions.find(
+                            (f) => f.value === form.calendar_range[0].fk_from_column_id,
+                          )
+                          return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
+                        })"
+                        :key="id"
+                        :value="option.value"
+                      >
+                        <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
+                          <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
+                            <SmartsheetHeaderIcon :column="option" />
+
+                            <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
+                              <template #title>
+                                {{ option.label }}
+                              </template>
+                              <template #default>{{ option.label }}</template>
+                            </NcTooltip>
+                          </div>
+                          <GeneralIcon
+                            v-if="option.value === range.fk_from_column_id"
+                            id="nc-selected-item-icon"
+                            icon="check"
+                            class="flex-none text-primary w-4 h-4"
+                          />
                         </div>
-                        <GeneralIcon
-                          v-if="option.value === range.fk_from_column_id"
-                          id="nc-selected-item-icon"
-                          icon="check"
-                          class="flex-none text-primary w-4 h-4"
-                        />
-                      </div>
-                    </a-select-option>
-                  </a-select>
+                      </a-select-option>
+                    </a-select>
+                    <NcButton
+                      class="!rounded-l-none !border-l-0"
+                      size="small"
+                      type="secondary"
+                      @click="range.fk_to_column_id = null"
+                    >
+                      <component :is="iconMap.delete" class="h-4 w-4" />
+                    </NcButton>
+                  </div>
                   <NcButton
-                    class="!rounded-l-none !border-l-0"
+                    v-if="index !== 0"
                     size="small"
                     type="secondary"
-                    @click="range.fk_to_column_id = null"
+                    @click="
+                      () => {
+                        form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
+                      }
+                    "
                   >
-                    <component :is="iconMap.delete" class="h-4 w-4" />
+                    <component :is="iconMap.close" />
                   </NcButton>
-                </div>
-                <NcButton
-                  v-if="index !== 0"
-                  size="small"
-                  type="secondary"
-                  @click="
-                    () => {
-                      form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
-                    }
-                  "
-                >
-                  <component :is="iconMap.close" />
-                </NcButton>
-              </template>
+                </template>
+              </div>
             </div>
-          </div>
 
             <!--          <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
             <component :is="iconMap.plus" />
@@ -1500,13 +1500,6 @@ const getPluralName = (name: string) => {
     @apply content-[''] m-0;
   }
 }
-:not(.nc-to-select) {
-  :deep(.ant-select) {
-    .ant-select-selector {
-      @apply !rounded-lg;
-    }
-  }
-}
 
 .nc-nocoai-footer {
   @apply px-6 py-1 flex items-center gap-2 text-nc-content-purple-dark border-t-1 border-purple-100;
@@ -1541,11 +1534,18 @@ const getPluralName = (name: string) => {
     @apply !rounded-5;
   }
 }
-
-:deep(.nc-to-select) {
+:deep(.ant-select) {
   .ant-select-selector {
-    @apply !rounded-r-none;
-    border-radius-right: 0rem !important;
+    @apply !rounded-lg;
+  }
+}
+
+.nc-to-select {
+  :deep(.ant-select) {
+    .ant-select-selector {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
   }
 }
 </style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index 6c9e6e586b..7320813e18 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -467,8 +467,8 @@ defineExpose({
       All day
 
       <NcButton size="xsmall" class="mt-2" type="text" @click="isExpanded = !isExpanded">
-        <GeneralIcon v-if="!isExpanded" icon="maximize" />
-        <GeneralIcon v-else-if="isExpanded" icon="minimize" />
+        <GeneralIcon v-if="!isExpanded" class="w-4 h-4 text-gray-800" icon="maximize" />
+        <GeneralIcon v-else-if="isExpanded" class="w-4 h-4 text-gray-800" icon="minimize" />
       </NcButton>
     </div>
     <div
@@ -480,7 +480,7 @@ defineExpose({
         'border-gray-100': activeCalendarView === 'day',
         'border-gray-200': activeCalendarView === 'week',
         'min-h-32 max-h-32 ': isExpanded,
-        'h-16': !isExpanded,
+        'h-20': !isExpanded,
       }"
       class="relative border-l-1 transition-all overflow-y-scroll z-30"
     >
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index e9ee3ac10b..f8b683e228 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -895,7 +895,10 @@ const expandRecord = (record: Row) => {
 <template>
   <div class="h-[calc(100vh-5.3rem)] overflow-y-auto nc-scrollbar-md">
     <SmartsheetCalendarDateTimeSpanningContainer
-      v-if="calendarRange.some((range) => range.fk_to_col !== null && range.fk_to_col !== undefined)"
+      v-if="
+        calendarRange.some((range) => range.fk_to_col !== null && range.fk_to_col !== undefined) &&
+        recordsAcrossAllRange.spanningRecords?.length
+      "
       :records="recordsAcrossAllRange.spanningRecords"
       @expand-record="expandRecord"
     />
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 2acf8094e7..c201a166e6 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -806,7 +806,12 @@ const addRecord = (date: dayjs.Dayjs) => {
                       () => {
                         const record = {
                           row: {
-                            [range.fk_from_col!.title!]: dayjs(day.date).format('YYYY-MM-DD HH:mm:ssZ'),
+                            [range.fk_from_col!.title!]: (day.date).format('YYYY-MM-DD HH:mm:ssZ'),
+                            ...(range.fk_to_col
+                        ? {
+                            [range.fk_to_col!.title!]: (day.date).endOf('day').format('YYYY-MM-DD HH:mm:ssZ'),
+                          }
+                        : {}),
                           },
                         }
                         emit('newRecord', record)
@@ -835,6 +840,11 @@ const addRecord = (date: dayjs.Dayjs) => {
                   const record = {
                     row: {
                       [calendarRange[0].fk_from_col!.title!]: (day.date).format('YYYY-MM-DD HH:mm:ssZ'),
+                      ...(calendarRange[0].fk_to_col
+                        ? {
+                            [calendarRange[0].fk_to_col!.title!]: (day.date).endOf('day').format('YYYY-MM-DD HH:mm:ssZ'),
+                          }
+                        : {}),
                     },
                   }
                   emit('newRecord', record)
@@ -847,12 +857,12 @@ const addRecord = (date: dayjs.Dayjs) => {
                 :class="{
                   'bg-brand-50 text-brand-500 !font-bold': day.isToday,
                 }"
-                class="px-1.3 py-1 text-sm leading-3 font-medium rounded-lg"
+                class="px-1.3 py-1 text-[13px] text-sm leading-3 font-medium rounded-lg"
               >
                 {{ day.dayNumber }}
               </span>
             </div>
-            <div v-if="!isUIAllowed('dataEdit')" class="leading-3 p-3">{{ day.dayNumber }}</div>
+            <div v-if="!isUIAllowed('dataEdit')" class="leading-3 text-[13px] p-3">{{ day.dayNumber }}</div>
 
             <NcButton
               v-if="
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 1a4ac1c8d7..f268db5ad7 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -139,8 +139,8 @@ const calculateNewDates = useMemoize(
       endDate = startDate.clone().add(15, 'minutes')
     }
 
-    if (endDate.diff(startDate, 'minute') < 60) {
-      endDate = startDate.clone().add(60, 'minutes')
+    if (endDate.diff(startDate, 'minute') <= 60) {
+      endDate = startDate.clone().add(59, 'minutes')
     }
 
     // If the start date is before the start of the schedule, we set it to the start of the schedule
@@ -940,8 +940,9 @@ watch(
       v-if="!isPublic && dayjs().isBetween(selectedDateRange.start, selectedDateRange.end)"
       class="absolute top-16 ml-16 pointer-events-none z-2"
       :class="{
-        'mt-38.5': isExpanded && isRangeEnabled,
-        'mt-23': !isExpanded && isRangeEnabled,
+        '!mt-38.5': isExpanded && isRangeEnabled,
+        'mt-27': !isExpanded && isRangeEnabled,
+        '!mt-6': !recordsAcrossAllRange.spanningRecords?.length,
       }"
       :style="overlayStyle"
     >
@@ -971,8 +972,9 @@ watch(
     </div>
     <div
       :class="{
-        'top-16': !isExpanded && isRangeEnabled,
+        'top-20.5': !isExpanded && isRangeEnabled,
         'top-32': isExpanded && isRangeEnabled,
+        '!top-0': !recordsAcrossAllRange.spanningRecords?.length,
       }"
       class="absolute bg-white w-16 z-1"
     >
@@ -984,7 +986,10 @@ watch(
         {{ hour.format('hh a') }}
       </div>
     </div>
-    <div v-if="isRangeEnabled" class="sticky top-6 bg-white z-3 inset-x-0 w-full">
+    <div
+      v-if="isRangeEnabled && recordsAcrossAllRange.spanningRecords?.length"
+      class="sticky top-6 bg-white z-3 inset-x-0 w-full"
+    >
       <SmartsheetCalendarDateTimeSpanningContainer
         ref="spanningRecordsContainer"
         :records="recordsAcrossAllRange.spanningRecords"
@@ -994,8 +999,9 @@ watch(
     <div
       ref="container"
       :class="{
-        '!mt-16 ': !isExpanded && isRangeEnabled,
+        'mt-20.5 ': !isExpanded && isRangeEnabled,
         'mt-32': isExpanded && isRangeEnabled,
+        '!mt-0': !recordsAcrossAllRange.spanningRecords?.length,
       }"
       class="absolute ml-16 flex w-[calc(100%-64px)]"
     >

From ec8114688624042797fd12e7c403b85ec6216354 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:15 +0000
Subject: [PATCH 45/50] fix: background color

---
 .../calendar/DateTimeSpanningContainer.vue    |  1 +
 .../calendar/DayView/DateTimeField.vue        |  3 +-
 .../smartsheet/calendar/MonthView.vue         | 24 ++++-------
 .../smartsheet/calendar/RecordCard.vue        |  8 +++-
 .../smartsheet/calendar/VRecordCard.vue       | 15 +++----
 .../calendar/WeekView/DateField.vue           |  3 +-
 .../calendar/WeekView/DateTimeField.vue       |  3 +-
 .../smartsheet/toolbar/Calendar/Mode.vue      | 41 +++++++++++--------
 8 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index 7320813e18..a18f7fd069 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -508,6 +508,7 @@ defineExpose({
             <LazySmartsheetRow :row="record">
               <LazySmartsheetCalendarRecordCard
                 :hover="hoverRecord === record.rowMeta.id"
+                :dragging="resizeRecord?.rowMeta.id === record.rowMeta.id || dragRecord?.rowMeta.id === record.rowMeta.id"
                 :position="record.rowMeta.position"
                 :record="record"
                 :resize="activeCalendarView === 'week'"
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index f8b683e228..91a66e9d7d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -1068,9 +1068,10 @@ const expandRecord = (record: Row) => {
             >
               <LazySmartsheetRow :row="record">
                 <LazySmartsheetCalendarVRecordCard
-                  :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
+                  :hover="hoverRecord === record.rowMeta.id"
                   :selected="record.rowMeta.id === dragRecord?.rowMeta?.id"
                   :record="record"
+                  :dragging="record.rowMeta.id === dragRecord?.rowMeta?.id || record.rowMeta.id === resizeRecord?.rowMeta?.id"
                   :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
                   @resize-start="onResizeStart"
                 >
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index c201a166e6..45d5217554 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -738,7 +738,7 @@ const addRecord = (date: dayjs.Dayjs) => {
       <div
         v-for="(day, index) in days"
         :key="index"
-        class="text-center bg-gray-50 py-1 border-r-1 last:border-r-0 border-gray-200 font-semibold leading-4 uppercase text-[10px] text-gray-500"
+        class="text-center bg-gray-50 py-1 border-r-1 last:border-r-0 border-gray-100 font-semibold leading-4 uppercase text-[10px] text-gray-500"
       >
         {{ day }}
       </div>
@@ -760,17 +760,18 @@ const addRecord = (date: dayjs.Dayjs) => {
         :class="calendarData.gridClass"
         data-testid="nc-calendar-month-week"
       >
-        <template v-for="day in week.days">
+        <template v-for="(day, i) in week.days">
           <div
             v-if="day.isVisible"
             :key="day.key"
             :class="{
               'selected-date': isDateSelected(day.date) || (focusedDate && dayjs(day.date).isSame(focusedDate, 'day')),
               '!text-gray-400': !day.isInPagedMonth,
-              '!bg-gray-50 !hover:bg-gray-100': day.isWeekend,
+              '!bg-gray-50 !hover:bg-gray-100 !border-gray-200': day.isWeekend,
+              '!border-r-gray-200': week.days[i + 1]?.isWeekend,
               'border-t-1': week.weekIndex === 0,
             }"
-            class="text-right relative group last:border-r-0 transition text-sm h-full border-r-1 border-b-1 border-gray-200 font-medium hover:bg-gray-50 text-gray-800 bg-white"
+            class="text-right relative group last:border-r-0 transition text-sm h-full border-r-1 border-b-1 border-gray-100 font-medium hover:bg-gray-50 text-gray-800 bg-white"
             data-testid="nc-calendar-month-day"
             @click="selectDate(day.date)"
             @dblclick="addRecord(day.date)"
@@ -894,11 +895,6 @@ const addRecord = (date: dayjs.Dayjs) => {
           :style="{
             ...record.rowMeta.style,
             zIndex: record.rowMeta.id === draggingId ? 100 : 0,
-            boxShadow:
-              record.rowMeta.id === draggingId
-                ? ' 0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
-                : 'none',
-
             opacity:
               (draggingId === null || record.rowMeta.id === draggingId) &&
               (resizeRecord === null || record.rowMeta.id === resizeRecord?.rowMeta.id)
@@ -915,14 +911,10 @@ const addRecord = (date: dayjs.Dayjs) => {
         >
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarRecordCard
-              :hover="
-                hoverRecord === record.rowMeta.id ||
-                record.rowMeta.id === draggingId ||
-                record.rowMeta.id === resizeRecord?.rowMeta.id
-              "
+              :hover="hoverRecord === record.rowMeta.id"
               :position="record.rowMeta.position"
               :record="record"
-              :dragging="isDragging || resizeInProgress"
+              :dragging="draggingId === record.rowMeta.id || resizeRecord?.rowMeta?.id === record.rowMeta.id"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
               @resize-start="onResizeStart"
             >
@@ -966,7 +958,7 @@ const addRecord = (date: dayjs.Dayjs) => {
   &:after {
     @apply rounded-sm pointer-events-none absolute inset-0 w-full h-full;
     content: '';
-    z-index: 3;
+    z-index: 2;
     box-shadow: 0 0 0 2px #3366ff !important;
   }
 }
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index 4edbc2944d..e40b6eec75 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -40,9 +40,13 @@ const emit = defineEmits(['resize-start'])
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
       'bg-white border-gray-300': color === 'gray',
-      'shadow-md': hover,
     }"
-    style="box-shadow: 0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06);)"
+    :style="{
+      boxShadow:
+        hover || dragging
+          ? '0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
+          : '0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)',
+    }"
     class="relative transition-all border-1 flex items-center gap-2 group"
   >
     <div
diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index 94a38943e3..fdb03c22bc 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -5,6 +5,7 @@ interface Props {
   resize?: boolean
   selected?: boolean
   hover?: boolean
+  dragging?: boolean
 }
 
 withDefaults(defineProps<Props>(), {
@@ -12,6 +13,7 @@ withDefaults(defineProps<Props>(), {
   selected: false,
   hover: false,
   color: 'gray',
+  dragging: false,
 })
 
 const emit = defineEmits(['resize-start'])
@@ -19,6 +21,12 @@ const emit = defineEmits(['resize-start'])
 
 <template>
   <div
+    :style="{
+      boxShadow:
+        hover || dragging
+          ? '0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
+          : '0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)',
+    }"
     :class="{
       'bg-maroon-50': color === 'maroon',
       'bg-blue-50': color === 'blue',
@@ -29,13 +37,6 @@ const emit = defineEmits(['resize-start'])
       'bg-white border-gray-300': color === 'gray',
       'z-90': hover,
     }"
-    :style="{
-      boxShadow: `${
-        hover
-          ? '0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
-          : '0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)'
-      }`,
-    }"
     class="relative flex gap-2 border-1 relative rounded-md h-full"
   >
     <div
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index 6cb3a57960..9d77d8b92a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -556,7 +556,8 @@ const addRecord = (date: dayjs.Dayjs) => {
         >
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarRecordCard
-              :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
+              :hover="hoverRecord === record.rowMeta.id"
+              :dragging="record.rowMeta.id === dragRecord?.rowMeta?.id || record.rowMeta.id === resizeRecord?.rowMeta?.id"
               :position="record.rowMeta.position"
               :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index f268db5ad7..1574a55cb8 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -1079,8 +1079,9 @@ watch(
           >
             <LazySmartsheetRow :row="record">
               <LazySmartsheetCalendarVRecordCard
-                :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
+                :hover="hoverRecord === record.rowMeta.id"
                 :position="record.rowMeta!.position"
+                :dragging="record.rowMeta.id === dragRecord?.rowMeta?.id || resizeRecord?.rowMeta.id === record.rowMeta.id"
                 :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
                 :record="record"
                 :selected="record.rowMeta!.id === dragRecord?.rowMeta?.id"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
index 7fad49d118..891baccf74 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
@@ -57,29 +57,36 @@ watch(activeCalendarView, () => {
     </div>
   </div>
 
-  <NcSelect v-else v-model:value="activeCalendarView" class="!w-21" data-testid="nc-calendar-view-mode" size="small">
-    <a-select-option v-for="option in ['day', 'week', 'month', 'year']" :key="option" :value="option" class="!h-7 !w-21">
-      <div class="flex gap-2 mt-0.5 items-center">
-        <NcTooltip class="!capitalize flex-1 max-w-21" placement="top" show-on-truncate-only>
-          <template #title>
-            <span class="capitalize min-w-21">
-              {{ option }}
-            </span>
-          </template>
-          <span class="text-[13px]">
-            {{ option }}
-          </span>
-        </NcTooltip>
+  <a-select
+    v-else
+    v-model:value="activeCalendarView"
+    class="nc-select-shadow !w-21 !rounded-lg"
+    dropdown-class-name="!rounded-lg"
+    size="small"
+    data-testid="nc-calendar-view-mode"
+    @click.stop
+  >
+    <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
 
-        <component
-          :is="iconMap.check"
+    <a-select-option v-for="option in ['day', 'week', 'month', 'year']" :key="option" :value="option">
+      <div class="w-full flex gap-2 items-center justify-between" :title="option">
+        <div class="flex items-center gap-1">
+          <NcTooltip class="flex-1 capitalize mt-0.5 truncate" show-on-truncate-only>
+            <template #title>
+              {{ option }}
+            </template>
+            <template #default>{{ option }}</template>
+          </NcTooltip>
+        </div>
+        <GeneralIcon
           v-if="option === activeCalendarView"
           id="nc-selected-item-icon"
-          class="text-primary w-4 h-4"
+          icon="check"
+          class="flex-none text-primary w-4 h-4"
         />
       </div>
     </a-select-option>
-  </NcSelect>
+  </a-select>
 </template>
 
 <style lang="scss" scoped>

From e71418722aa80a750e4fb31ce2d0be4b1e0db336 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:15 +0000
Subject: [PATCH 46/50] fix: minor bugs fixes

---
 packages/nc-gui/components/smartsheet/PlainCell.vue    |  1 +
 .../smartsheet/calendar/DayView/DateField.vue          |  1 +
 .../smartsheet/calendar/DayView/DateTimeField.vue      |  7 +++++--
 .../components/smartsheet/calendar/RecordCard.vue      |  2 +-
 .../smartsheet/calendar/WeekView/DateField.vue         | 10 +++++-----
 .../smartsheet/calendar/WeekView/DateTimeField.vue     |  7 +++++--
 6 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/PlainCell.vue b/packages/nc-gui/components/smartsheet/PlainCell.vue
index a8ff3407fd..6a190cfada 100644
--- a/packages/nc-gui/components/smartsheet/PlainCell.vue
+++ b/packages/nc-gui/components/smartsheet/PlainCell.vue
@@ -372,6 +372,7 @@ const parseValue = (value: any, col: ColumnType): string => {
 
 <style lang="scss" scoped>
 .plain-cell {
+  font-synthesis: initial !important;
   &::before {
     content: '•';
     padding: 0 4px;
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
index bd971f8c79..6a2ef09fff 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
@@ -211,6 +211,7 @@ const newRecord = () => {
             <LazySmartsheetCalendarRecordCard
               :record="record"
               :resize="false"
+              :position="record.rowMeta.position"
               size="small"
               @click.prevent="emit('expandRecord', record)"
             >
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 91a66e9d7d..174f2f2c2d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -1046,7 +1046,10 @@ const expandRecord = (record: Row) => {
         </div>
       </div>
       <div class="absolute inset-0 pointer-events-none">
-        <div class="relative !ml-[68px] !mr-1 nc-calendar-day-record-container" data-testid="nc-calendar-day-record-container">
+        <div
+          class="relative !ml-[68px] !mr-1 z-2 nc-calendar-day-record-container"
+          data-testid="nc-calendar-day-record-container"
+        >
           <template v-for="record in recordsAcrossAllRange.record" :key="record.rowMeta.id">
             <div
               v-if="record.rowMeta.style?.display !== 'none'"
@@ -1115,7 +1118,7 @@ const expandRecord = (record: Row) => {
   &:after {
     @apply rounded-sm pointer-events-none absolute inset-0 w-full h-full;
     content: '';
-    z-index: 3;
+    z-index: 1;
     box-shadow: 0 0 0 2px #3366ff !important;
   }
 }
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index e40b6eec75..8019a9d3bd 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -90,7 +90,7 @@ const emit = defineEmits(['resize-start'])
 
     <div
       v-if="(position === 'rightRounded' || position === 'rounded') && resize"
-      class="absolute mt-0.3 h-7.1 w-2 right-1 resize"
+      class="absolute mt-0.3 h-7.1 w-2 right-0 resize"
       @mousedown.stop="emit('resize-start', 'right', $event, record)"
     ></div>
   </div>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index 9d77d8b92a..548010282d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -155,9 +155,9 @@ const calendarData = computed(() => {
           position,
           id,
           style: {
-            width: `calc(max(${spanDays} * ${perDayWidth}px, ${perDayWidth}px))`,
-            left: `${startDaysDiff * perDayWidth}px`,
-            top: `${suitableRow * 28 + suitableRow * 8}px`,
+            width: `calc(max(${spanDays * perDayWidth - 10}px, ${perDayWidth - 10}px))`,
+            left: `${startDaysDiff * perDayWidth + 4}px`,
+            top: `${suitableRow * 28 + Math.max(suitableRow + 1, 1) * 8}px`,
           },
         },
       })
@@ -538,7 +538,7 @@ const addRecord = (date: dayjs.Dayjs) => {
       ></div>
     </div>
     <div
-      class="absolute nc-scrollbar-md overflow-y-auto mt-6 pointer-events-none inset-0"
+      class="absolute nc-scrollbar-md overflow-y-auto z-2 mt-6 pointer-events-none inset-0"
       data-testid="nc-calendar-week-record-container"
     >
       <template v-for="(record, id) in calendarData" :key="id">
@@ -595,7 +595,7 @@ const addRecord = (date: dayjs.Dayjs) => {
   &:after {
     @apply rounded-b-sm pointer-events-none absolute inset-0 w-full h-full;
     content: '';
-    z-index: 3;
+    z-index: 1;
     box-shadow: 2px 0 0 #3366ff, -2px 0 0 #3366ff, 0 2px 0 #3366ff !important;
   }
 }
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 1574a55cb8..0363c8d5e7 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -1053,7 +1053,10 @@ watch(
         </div>
       </div>
 
-      <div class="absolute pointer-events-none inset-0 overflow-hidden !mt-5.95" data-testid="nc-calendar-week-record-container">
+      <div
+        class="absolute pointer-events-none z-2 inset-0 overflow-hidden !mt-5.95"
+        data-testid="nc-calendar-week-record-container"
+      >
         <template v-for="record in recordsAcrossAllRange.records" :key="record.rowMeta.id">
           <div
             v-if="record.rowMeta.style?.display !== 'none'"
@@ -1124,7 +1127,7 @@ watch(
   &:after {
     @apply rounded-sm pointer-events-none absolute inset-0 w-full h-full;
     content: '';
-    z-index: 2;
+    z-index: 1;
     box-shadow: 0 0 0 2px #3366ff !important;
   }
 }

From 5247d837a2bf09b52f40fc4da35fbefc48e4705b Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:15 +0000
Subject: [PATCH 47/50] fix: perf improv

---
 .../smartsheet/calendar/MonthView.vue         | 49 ++++++++-----------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 45d5217554..7ce4da5d67 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -86,21 +86,6 @@ const fieldStyles = computed(() => {
   }, {} as Record<string, { bold?: boolean; italic?: boolean; underline?: boolean }>)
 })
 
-const dates = computed(() => {
-  const startOfMonth = selectedMonth.value.startOf('month')
-  const firstDayOffset = isMondayFirst.value ? 0 : -1
-  const firstDayToDisplay = startOfMonth.startOf('week').add(firstDayOffset, 'day')
-
-  const daysInView = Math.max(
-    35,
-    Math.ceil((startOfMonth.daysInMonth() + startOfMonth.day() + (isMondayFirst.value ? 0 : 1)) / 7) * 7,
-  )
-
-  return Array.from({ length: daysInView / 7 }, (_, weekIndex) =>
-    Array.from({ length: 7 }, (_, dayIndex) => firstDayToDisplay.add(weekIndex * 7 + dayIndex, 'day')),
-  )
-})
-
 const calendarData = computed(() => {
   const startOfMonth = selectedMonth.value.startOf('month')
   const firstDayOffset = isMondayFirst.value ? 0 : -1
@@ -241,9 +226,7 @@ const recordsToDisplay = computed<{
         const weekIndex = calendarData.value.weeks.findIndex((week) =>
           week.days.some((day) => dayjs(day.date).isSame(startDate, 'day')),
         )
-        const dayIndex = (calendarData.value.weeks[weekIndex] ?? []).days.findIndex((day) =>
-          dayjs(day.date).isSame(startDate, 'day'),
-        )
+        const dayIndex = calendarData.value.weeks[weekIndex]?.days.findIndex((day) => dayjs(day.date).isSame(startDate, 'day'))
 
         const id = record.rowMeta.id ?? generateRandomNumber()
 
@@ -322,9 +305,17 @@ const recordsToDisplay = computed<{
 
           occupyLane(dateKey, lane, duration)
 
-          const weekIndex = dates.value.findIndex((week) => week.some((day) => dayjs(day).isSame(recordStart, 'day')))
-          const startDayIndex = (dates.value[weekIndex] ?? []).findIndex((day) => dayjs(day).isSame(recordStart, 'day'))
-          const endDayIndex = (dates.value[weekIndex] ?? []).findIndex((day) => dayjs(day).isSame(recordEnd, 'day'))
+          const weekIndex = calendarData.value.weeks.findIndex((week) =>
+            week.days.some((day) => dayjs(day.date).isSame(recordStart, 'day')),
+          )
+
+          const startDayIndex = calendarData.value.weeks[weekIndex]?.days.findIndex((day) =>
+            dayjs(day.date).isSame(recordStart, 'day'),
+          )
+
+          const endDayIndex = calendarData.value.weeks[weekIndex]?.days.findIndex((day) =>
+            dayjs(day.date).isSame(recordEnd, 'day'),
+          )
 
           const isRecordDraggingOrResizeState = id === draggingId.value || id === resizeRecord.value?.rowMeta.id
 
@@ -342,8 +333,9 @@ const recordsToDisplay = computed<{
 
           let position = 'rounded'
           // Here we are checking if the startDay is before all the dates shown in UI rather that the current month
-          const isStartMonthBeforeCurrentWeek = dates.value[weekIndex - 1]
-            ? dayjs(dates.value[weekIndex - 1][0]).isBefore(startDate, 'month')
+
+          const isStartMonthBeforeCurrentWeek = calendarData.value.weeks[weekIndex - 1]
+            ? dayjs(calendarData.value.weeks[weekIndex - 1].days[0].date).isBefore(recordStart, 'month')
             : false
 
           if (
@@ -412,10 +404,11 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean, skipChangeC
 
   if (!fromCol) return { newRow: null, updateProperty: [] }
 
-  const week = Math.floor(percentY * dates.value.length)
+  const week = Math.floor(percentY * calendarData.value.weeks.length)
   const day = Math.floor(percentX * maxVisibleDays.value)
 
-  let newStartDate = dates.value[week] ? dayjs(dates.value[week][day]) : null
+  let newStartDate = calendarData.value.weeks[week] ? dayjs(calendarData.value.weeks[week].days[day].date) : null
+
   if (!newStartDate) return { newRow: null, updateProperty: [] }
 
   let fromDate = dayjs(dragRecord.value.row[fromCol.title!])
@@ -509,14 +502,14 @@ const onResize = (event: MouseEvent) => {
   const fromCol = resizeRecord.value.rowMeta.range?.fk_from_col
   const toCol = resizeRecord.value.rowMeta.range?.fk_to_col
 
-  const week = Math.floor(percentY * dates.value.length)
+  const week = Math.floor(percentY * calendarData.value.weeks.length)
   const day = Math.floor(percentX * maxVisibleDays.value)
 
   let updateProperty: string[] = []
   let newRow: Row
 
   if (resizeDirection.value === 'right') {
-    let newEndDate = dates.value[week] ? dayjs(dates.value[week][day]).endOf('day') : null
+    let newEndDate = calendarData.value.weeks[week] ? dayjs(calendarData.value.weeks[week].days[day].date).endOf('day') : null
     updateProperty = [toCol!.title!]
 
     if (dayjs(newEndDate).isBefore(ogStartDate)) {
@@ -533,7 +526,7 @@ const onResize = (event: MouseEvent) => {
       },
     }
   } else {
-    let newStartDate = dates.value[week] ? dayjs(dates.value[week][day]) : null
+    let newStartDate = calendarData.value.weeks[week] ? dayjs(calendarData.value.weeks[week].days[day].date) : null
     updateProperty = [fromCol!.title!]
 
     if (dayjs(newStartDate).isAfter(ogEndDate)) {

From 593248d60fb3d672a02d1d40fd067a123e31fd47 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:15 +0000
Subject: [PATCH 48/50] fix: remove shadow

---
 packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
index 978383dfc7..9940aacf24 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -238,6 +238,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             data-testid="nc-calendar-range-add-end-date"
             class="!border-none w-28"
             type="secondary"
+            :shadow="false"
             :disabled="!isEeUI"
             @click="range.fk_to_column_id = undefined"
           >

From b539c79c23c0d68950d506dc721e1a54d70e1b25 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:15 +0000
Subject: [PATCH 49/50] fix: handle rebase

---
 .../nc-gui/components/smartsheet/toolbar/Calendar/Range.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
index 9940aacf24..c8a65a0624 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -239,7 +239,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             class="!border-none w-28"
             type="secondary"
             :shadow="false"
-            :disabled="!isEeUI"
+            :disabled="!isEeUI || isLocked"
             @click="range.fk_to_column_id = undefined"
           >
             <div class="flex gap-2 items-center">
@@ -255,7 +255,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
               <a-select
                 v-model:value="range.fk_to_column_id"
                 class="!rounded-r-none nc-select-shadow w-full flex-1 nc-to-select"
-                :disabled="!range.fk_from_column_id"
+                :disabled="!range.fk_from_column_id || isLocked"
                 :placeholder="$t('placeholder.notSelected')"
                 data-testid="nc-calendar-range-to-field-select"
                 dropdown-class-name="!rounded-lg"

From a6699c84113fd145a361684e9efaa6b1d620b62d Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:15 +0000
Subject: [PATCH 50/50] fix: missing time and date handling

---
 .../smartsheet/calendar/DayView/DateTimeField.vue    |  4 ++++
 .../components/smartsheet/calendar/MonthView.vue     | 12 +++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 174f2f2c2d..e2e814e1b3 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -109,6 +109,10 @@ const calculateNewDates = useMemoize(
       endDate = startDate.clone().add(15, 'minutes')
     }
 
+    if (endDate.diff(startDate, 'minute') === 60) {
+      endDate = startDate.clone().add(59, 'minutes')
+    }
+
     // If the start date is before the opened date, we use the schedule start as the start date
     // This is to ensure the generated style of the record is not outside the bounds of the calendar
     if (startDate.isSameOrBefore(scheduleStart)) {
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 7ce4da5d67..14028b6d76 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -261,11 +261,15 @@ const recordsToDisplay = computed<{
         })
       } else if (startCol && endCol) {
         // Multi-day event logic
-        const startDate = dayjs(record.row[startCol.title!])
+        let startDate = dayjs(record.row[startCol.title!])
         const endDate = dayjs(record.row[endCol.title!])
 
         let currentWeekStart = startDate.startOf('week')
 
+        if (startDate.isBefore(currentWeekStart)) {
+          startDate = calendarData.value.weeks[0].days[0].date
+        }
+
         const id = record.rowMeta.id ?? generateRandomNumber()
         // Since the records can span multiple weeks, to display, we render multiple elements
         // for each week the record spans. The id is used to identify the elements that belong to the same record
@@ -286,6 +290,12 @@ const recordsToDisplay = computed<{
 
           const recordStart = currentWeekStart.isBefore(startDate) ? startDate : currentWeekStart
           const recordEnd = currentWeekEnd.isAfter(endDate) ? endDate : currentWeekEnd
+
+          if (recordEnd.isBefore(calendarData.value.weeks[0].days[0].date)) {
+            currentWeekStart = currentWeekStart.add(1, 'week')
+            continue
+          }
+
           const duration = recordEnd.diff(recordStart, 'day') + 1
 
           const dateKey = recordStart.format('YYYY-MM-DD')