From 870790b71f42392b2a3a76184ea68ff8c3b90c42 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 28 Feb 2024 10:11:39 +0000
Subject: [PATCH 1/8] fix(nc-gui): field followup

---
 .../components/smartsheet/calendar/DayView/DateTimeField.vue   | 1 -
 packages/nc-gui/components/smartsheet/calendar/MonthView.vue   | 1 -
 .../components/smartsheet/calendar/WeekView/DateField.vue      | 1 -
 packages/nc-gui/composables/useViewColumns.ts                  | 1 +
 packages/nc-gui/utils/iconUtils.ts                             | 3 +++
 5 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 95621f28e6..fa079b2890 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -709,7 +709,6 @@ const viewMore = (hour: dayjs.Dayjs) => {
         >
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarVRecordCard
-              :view="activeCalendarView"
               :hover="hoverRecord === record.rowMeta.id"
               :position="record.rowMeta!.position"
               :record="record"
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index a07315d018..9b90d7e51b 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -793,7 +793,6 @@ const isDateSelected = (date: dayjs.Dayjs) => {
           >
             <template v-if="!isRowEmpty(record, displayField)">
               <LazySmartsheetCalendarCell
-                v-if="!isRowEmpty(record, displayField!)"
                 v-model="record.row[displayField!.title!]"
                 :bold="getFieldStyle(displayField).bold"
                 :column="displayField"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index 65d5e001c9..fecd8400db 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -584,7 +584,6 @@ const dropEvent = (event: DragEvent) => {
           >
             <template v-if="!isRowEmpty(record, displayField)">
               <LazySmartsheetCalendarCell
-                v-if="!isRowEmpty(record, displayField!)"
                 v-model="record.row[displayField!.title!]"
                 :bold="getFieldStyle(displayField).bold"
                 :column="displayField"
diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts
index c0ed8a0058..e74ccc731d 100644
--- a/packages/nc-gui/composables/useViewColumns.ts
+++ b/packages/nc-gui/composables/useViewColumns.ts
@@ -160,6 +160,7 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
     }
 
     const saveOrUpdate = async (field: any, index: number, disableDataReload: boolean = false) => {
+      console.log('saveOrUpdate', field, index, disableDataReload)
       if (isLocalMode.value && fields.value) {
         fields.value[index] = field
         meta.value!.columns = meta.value!.columns?.map((column: ColumnType) => {
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 6832a054a4..0754125c7d 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -128,6 +128,9 @@ import NcItalic from '~icons/nc-icons/italic'
 import NcBold from '~icons/nc-icons/bold'
 import NcUnderline from '~icons/nc-icons/underline'
 import NcCrop from '~icons/nc-icons/crop'
+import NcItalic from '~icons/nc-icons/italic'
+import NcBold from '~icons/nc-icons/bold'
+import NcUnderline from '~icons/nc-icons/underline'
 
 // keep it for reference
 // todo: remove it after all icons are migrated

From 2f8ceb2931c4627310b9dc39a4260a90087d94fb Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 28 Feb 2024 10:11:39 +0000
Subject: [PATCH 2/8] feat(nc-gui): granularity in drag drop

---
 .../calendar/DayView/DateTimeField.vue        |  57 +++++++--
 .../smartsheet/calendar/RecordCard.vue        |  10 +-
 .../smartsheet/calendar/VRecordCard.vue       |   8 +-
 .../calendar/WeekView/DateTimeField.vue       | 118 ++++++++++++------
 4 files changed, 137 insertions(+), 56 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index fa079b2890..4c9f56c872 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -56,7 +56,7 @@ const recordsAcrossAllRange = computed<{
   record: Row[]
   count: {
     [key: string]: {
-      id: string
+      id: string[]
       overflow: boolean
       overflowCount: number
     }
@@ -167,7 +167,7 @@ const recordsAcrossAllRange = computed<{
             style.display = 'none'
             overlaps[timeKey].overflowCount += 1
           }
-          _startDate = _startDate.add(15, 'minutes')
+          _startDate = _startDate.add(1, 'minutes')
         }
 
         // This property is used to determine which side the record should be rounded. It can be top, bottom, both or none
@@ -205,16 +205,16 @@ const recordsAcrossAllRange = computed<{
         const id = generateRandomNumber()
 
         const startDate = dayjs(record.row[fromCol.title!])
-        const endDate = dayjs(record.row[fromCol.title!]).add(15, 'minutes')
+        const endDate = dayjs(record.row[fromCol.title!]).add(1, 'hour')
 
         const startHour = startDate.hour()
 
         let style: Partial<CSSStyleDeclaration> = {}
         let _startDate = startDate.clone()
 
-        // We loop through every 15 minutes between the start and end date and keep track of the number of records that overlap at a given time
+        // We loop through every minute between the start and end date and keep track of the number of records that overlap at a given time
         while (_startDate.isBefore(endDate)) {
-          const timeKey = _startDate.startOf('hour').format('HH:mm')
+          const timeKey = _startDate.format('HH:mm')
 
           if (!overlaps[timeKey]) {
             overlaps[timeKey] = {
@@ -234,15 +234,20 @@ const recordsAcrossAllRange = computed<{
               display: 'none',
             }
           }
-          _startDate = _startDate.add(15, 'minutes')
+          _startDate = _startDate.add(1, 'minute')
         }
 
-        const topInPixels = (startDate.hour() + startDate.startOf('hour').minute() / 60) * 80
+        // The top of the record is calculated based on the start hour
+        // Update such that it is also based on Minutes
+
+        const minutes = startDate.minute() + startDate.hour() * 60
+
+        const updatedTopInPixels = (minutes * 80) / 60
 
         // A minimum height of 80px is set for each record
         const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 80, perRecordHeight)
 
-        const finalTopInPixels = topInPixels + startHour * 2
+        const finalTopInPixels = updatedTopInPixels + startHour * 2
 
         style = {
           ...style,
@@ -331,9 +336,10 @@ const calculateNewRow = (event: MouseEvent) => {
   // 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.floor(((percentY * 22 - hour) * 60) / 15) * 15
 
   // 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')
+  const newStartDate = dayjs(selectedDate.value).startOf('day').add(hour, 'hour').add(minutes, 'minute')
   if (!newStartDate || !fromCol) return { newRow: null, updateProperty: [] }
 
   let endDate
@@ -570,6 +576,35 @@ const dragStart = (event: MouseEvent, record: Row) => {
   document.addEventListener('mouseup', onMouseUp)
 }
 
+const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
+  let startOfHour = hour.startOf('hour')
+  const endOfHour = hour.endOf('hour')
+
+  const ids: Array<string> = []
+
+  let isOverflow = false
+  let overflowCount = 0
+
+  while (startOfHour.isBefore(endOfHour, 'minute')) {
+    const hourKey = startOfHour.format('HH:mm')
+    if (recordsAcrossAllRange.value?.count?.[hourKey]?.overflow) {
+      isOverflow = true
+
+      recordsAcrossAllRange.value?.count?.[hourKey]?.id.forEach((id) => {
+        if (!ids.includes(id)) {
+          ids.push(id)
+          overflowCount += 1
+        }
+      })
+    }
+    startOfHour = startOfHour.add(1, 'minute')
+  }
+
+  overflowCount = overflowCount > 8 ? overflowCount - 8 : 0
+
+  return { isOverflow, overflowCount }
+}
+
 const viewMore = (hour: dayjs.Dayjs) => {
   sideBarFilterOption.value = 'selectedHours'
   selectedTime.value = hour
@@ -680,7 +715,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
       </NcButton>
 
       <NcButton
-        v-if="recordsAcrossAllRange?.count?.[hour.format('HH:mm')]?.overflow"
+        v-if="isOverflowAcrossHourRange(hour).isOverflow"
         class="!absolute bottom-2 text-center w-15 mx-auto inset-x-0 z-3 text-gray-500"
         size="xxsmall"
         type="secondary"
@@ -688,7 +723,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
       >
         <span class="text-xs">
           +
-          {{ recordsAcrossAllRange?.count[hour.format('HH:mm')]?.overflowCount }}
+          {{ isOverflowAcrossHourRange(hour).overflowCount }}
           more
         </span>
       </NcButton>
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index 8f28681bc5..fbeb7efcb2 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -28,8 +28,8 @@ const emit = defineEmits(['resize-start'])
     :class="{
       'min-h-9': size === 'small',
       'h-full': size === 'auto',
-      'rounded-l-lg ml-1': position === 'leftRounded',
-      'rounded-r-lg mr-1': position === 'rightRounded',
+      'rounded-l-lg': position === 'leftRounded',
+      'rounded-r-lg': position === 'rightRounded',
       'rounded-lg mx-1': position === 'rounded',
       'rounded-none': position === 'none',
       'bg-maroon-50': color === 'maroon',
@@ -53,7 +53,7 @@ const emit = defineEmits(['resize-start'])
         'bg-pink-500': color === 'pink',
         'bg-purple-500': color === 'purple',
       }"
-      class="block h-full min-h-5 w-1 rounded"
+      class="w-1 min-h-5 bg-blue-500 rounded-x rounded-y-sm"
     ></div>
 
     <div v-if="(position === 'leftRounded' || position === 'rounded') && resize" class="mt-0.7 h-7.1 absolute -left-4 resize">
@@ -70,13 +70,13 @@ const emit = defineEmits(['resize-start'])
       </NcButton>
     </div>
 
-    <div class="overflow-hidden flex w-full ml-2 h-8 absolute">
+    <div class="overflow-hidden items-center flex w-full ml-2 h-8">
       <span v-if="position === 'rightRounded' || position === 'none'" class="mr-1"> .... </span>
       <span
         :class="{
           'pr-7': position === 'leftRounded',
         }"
-        class="text-sm pt-1.5 pr-3 mr-3 break-word space-x-2 whitespace-nowrap gap-2 overflow-hidden text-ellipsis w-full truncate text-gray-800"
+        class="text-sm pr-3 mr-3 break-word space-x-2 whitespace-nowrap gap-2 overflow-hidden text-ellipsis w-full truncate text-gray-800"
       >
         <slot />
       </span>
diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index cb4d52d4d0..a9b3ca080a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -51,9 +51,9 @@ const emit = defineEmits(['resize-start'])
       'group-hover:(border-brand-500)': resize,
       '!border-brand-500 border-1': selected || hover,
     }"
-    class="relative h-full ml-0.25 border-1 border-gray-50"
+    class="relative flex items-center h-full ml-0.25 border-1 border-gray-50"
   >
-    <div class="h-full absolute py-2">
+    <div class="h-full py-1">
       <div
         :class="{
           'bg-maroon-500': color === 'maroon',
@@ -63,14 +63,14 @@ const emit = defineEmits(['resize-start'])
           'bg-pink-500': color === 'pink',
           'bg-purple-500': color === 'purple',
         }"
-        class="block h-full min-h-5 ml-1 w-1 rounded mr-2"
+        class="block h-full min-h-5 ml-1 w-1 rounded"
       ></div>
     </div>
 
     <div v-if="position === 'bottomRounded' || position === 'none'" class="ml-3">....</div>
 
     <span
-      class="mt-1.5 pl-4 pr-1 text-sm h-[80%] text-gray-800 leading-7 space-x-2 break-all whitespace-normal truncate w-full overflow-y-hidden absolute"
+      class="pl-1 pr-1 text-sm h-[80%] text-gray-800 leading-7 space-x-2 break-all whitespace-normal truncate w-full overflow-y-hidden"
     >
       <slot />
     </span>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index cd6e73dea6..b2ee6aaf4e 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -99,7 +99,7 @@ const recordsAcrossAllRange = computed<{
   const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day')
   const scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day')
 
-  // We need to keep track of the overlaps for each day and hour in the week to calculate the width and left position of each record
+  // We need to keep track of the overlaps for each day and hour, minute in the week to calculate the width and left position of each record
   // The first key is the date, the second key is the hour, and the value is an object containing the ids of the records that overlap
   // The key is in the format YYYY-MM-DD and the hour is in the format HH:mm
   const overlaps: {
@@ -137,48 +137,58 @@ const recordsAcrossAllRange = computed<{
     sortedFormattedData.forEach((record: Row) => {
       if (!toCol && fromCol) {
         // If there is no toColumn chosen in the range
-        const startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
-        if (!startDate) return
+        const ogStartDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
+        if (!ogStartDate) return
 
-        // Hour Key currently is set as start of the hour
-        // TODO:  Need to work on the granularity of the hour
-        const dateKey = startDate?.format('YYYY-MM-DD')
-        const hourKey = startDate?.startOf('hour').format('HH:mm')
+        const endDate = ogStartDate.clone().add(1, 'hour')
 
         const id = record.rowMeta.id ?? generateRandomNumber()
 
+        let startDate = ogStartDate.clone()
+
         let style: Partial<CSSStyleDeclaration> = {}
 
-        // If the dateKey and hourKey are valid, we add the id to the overlaps object
-        if (dateKey && hourKey) {
-          if (!overlaps[dateKey]) {
-            overlaps[dateKey] = {}
-          }
-          if (!overlaps[dateKey][hourKey]) {
-            overlaps[dateKey][hourKey] = {
-              id: [],
-              overflow: false,
-              overflowCount: 0,
+        while (startDate.isBefore(endDate, 'minutes')) {
+          const dateKey = startDate?.format('YYYY-MM-DD')
+          const hourKey = startDate?.format('HH:mm')
+
+          // If the dateKey and hourKey are valid, we add the id to the overlaps object
+          if (dateKey && hourKey) {
+            if (!overlaps[dateKey]) {
+              overlaps[dateKey] = {}
             }
+            if (!overlaps[dateKey][hourKey]) {
+              overlaps[dateKey][hourKey] = {
+                id: [],
+                overflow: false,
+                overflowCount: 0,
+              }
+            }
+            overlaps[dateKey][hourKey].id.push(id)
           }
-          overlaps[dateKey][hourKey].id.push(id)
-        }
 
-        // If the number of records that overlap in a single hour is more than 4, we hide the record and set the overflow flag to true
-        // We also keep track of the number of records that overflow
-        if (overlaps[dateKey][hourKey].id.length > 4) {
-          overlaps[dateKey][hourKey].overflow = true
-          style.display = 'none'
-          overlaps[dateKey][hourKey].overflowCount += 1
-        }
+          // If the number of records that overlap in a single hour is more than 4, we hide the record and set the overflow flag to true
+          // We also keep track of the number of records that overflow
+          if (overlaps[dateKey][hourKey].id.length > 4) {
+            overlaps[dateKey][hourKey].overflow = true
+            style.display = 'none'
+            overlaps[dateKey][hourKey].overflowCount += 1
+          }
+
+          // TODO: dayIndex is not calculated perfectly
+          // Should revisit this part in next iteration
+          let dayIndex = dayjs(dateKey).day() - 1
+          if (dayIndex === -1) {
+            dayIndex = 6
+          }
 
-        // TODO: dayIndex is not calculated perfectly
-        // Should revisit this part in next iteration
-        let dayIndex = dayjs(dateKey).day() - 1
-        if (dayIndex === -1) {
-          dayIndex = 6
+          startDate = startDate.add(1, 'minute')
         }
 
+        const dayIndex = ogStartDate.day() - 1
+
+        const hourKey = ogStartDate.format('HH:mm')
+
         // We calculate the index of the hour in the day and set the top and height of the record
         const hourIndex = Math.min(
           Math.max(
@@ -188,10 +198,14 @@ const recordsAcrossAllRange = computed<{
           23,
         )
 
+        const minutes = ogStartDate.minute() + ogStartDate.hour() * 60
+
+        const topPx = (minutes * perHeight) / 60
+
         style = {
           ...style,
-          top: `${hourIndex * perHeight - hourIndex - hourIndex * 0.15}px`,
-          height: `${perHeight - 2}px`,
+          top: `${topPx - hourIndex - hourIndex * 0.15}px`,
+          height: `${perHeight - 4}px`,
         }
 
         recordsToDisplay.push({
@@ -514,7 +528,9 @@ const calculateNewRow = (
   const day = Math.max(0, Math.min(6, Math.floor(percentX * 7)))
   const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24)))
 
-  const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour')
+  const minutes = Math.floor(((percentY * 22 - hour) * 60) / 15) * 15
+
+  const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
   if (!newStartDate) return { newRow: null, updatedProperty: [] }
 
   let endDate
@@ -678,6 +694,36 @@ const viewMore = (hour: dayjs.Dayjs) => {
   selectedTime.value = hour
   showSideMenu.value = true
 }
+
+const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
+  let startOfHour = hour.startOf('hour')
+  const endOfHour = hour.endOf('hour')
+
+  const ids: Array<string> = []
+
+  let isOverflow = false
+  let overflowCount = 0
+
+  while (startOfHour.isBefore(endOfHour, 'minute')) {
+    const dateKey = startOfHour.format('YYYY-MM-DD')
+    const hourKey = startOfHour.format('HH:mm')
+    if (recordsAcrossAllRange.value?.count?.[dateKey]?.[hourKey]?.overflow) {
+      isOverflow = true
+
+      recordsAcrossAllRange.value?.count?.[dateKey]?.[hourKey]?.id.forEach((id) => {
+        if (!ids.includes(id)) {
+          ids.push(id)
+          overflowCount += 1
+        }
+      })
+    }
+    startOfHour = startOfHour.add(1, 'minute')
+  }
+
+  overflowCount = overflowCount > 4 ? overflowCount - 4 : 0
+
+  return { isOverflow, overflowCount }
+}
 </script>
 
 <template>
@@ -726,7 +772,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
           "
         >
           <NcButton
-            v-if="recordsAcrossAllRange?.count?.[hour.format('YYYY-MM-DD')]?.[hour.format('HH:mm')]?.overflow"
+            v-if="isOverflowAcrossHourRange(hour).isOverflow"
             class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-3 text-gray-500"
             size="xxsmall"
             type="secondary"
@@ -734,7 +780,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
           >
             <span class="text-xs">
               +
-              {{ recordsAcrossAllRange?.count[hour.format('YYYY-MM-DD')][hour.format('HH:mm')]?.overflowCount }}
+              {{ isOverflowAcrossHourRange(hour).overflowCount }}
               more
             </span>
           </NcButton>

From d3a33ef4b374c98f4f35ef64f28d8511d07627fb Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 28 Feb 2024 10:11:39 +0000
Subject: [PATCH 3/8] feat(nc-gui): week view include granularity

---
 packages/nc-gui/components/smartsheet/calendar/Cell.vue     | 1 -
 .../smartsheet/calendar/DayView/DateTimeField.vue           | 2 +-
 .../nc-gui/components/smartsheet/calendar/MonthView.vue     | 4 ----
 .../smartsheet/calendar/WeekView/DateTimeField.vue          | 6 +++---
 4 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/Cell.vue b/packages/nc-gui/components/smartsheet/calendar/Cell.vue
index 2f22680777..8a9c6a1db3 100644
--- a/packages/nc-gui/components/smartsheet/calendar/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/Cell.vue
@@ -260,7 +260,6 @@ const getLookupValue = (modelValue: string | null | number | Array<any>, col: Co
 }
 
 const getAttachmentValue = (modelValue: string | null | number | Array<any>) => {
-  console.log(modelValue)
   if (Array.isArray(modelValue)) {
     return modelValue.map((v) => `${v.title} (${getPossibleAttachmentSrc(v).join(', ')})`).join(', ')
   }
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 4c9f56c872..16668fb226 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -336,7 +336,7 @@ const calculateNewRow = (event: MouseEvent) => {
   // 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.floor(((percentY * 22 - hour) * 60) / 15) * 15
+  const minutes = Math.max(0, Math.min(59, Math.floor(((percentY * 22 - hour) * 60) / 15) * 15))
 
   // 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')
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 9b90d7e51b..ffd9fa2adc 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -508,12 +508,8 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
 
 const stopDrag = (event: MouseEvent) => {
   clearTimeout(dragTimeout.value)
-
-  console.log('stopDrag')
-  console.log('stopDrag', dragRecord.value, isDragging.value)
   if (!isUIAllowed('dataEdit') || !dragRecord.value || !isDragging.value) return
 
-  console.log('stopDrag')
   event.preventDefault()
   dragElement.value!.style.boxShadow = 'none'
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index b2ee6aaf4e..b1803ac78a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -528,7 +528,7 @@ const calculateNewRow = (
   const day = Math.max(0, Math.min(6, Math.floor(percentX * 7)))
   const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24)))
 
-  const minutes = Math.floor(((percentY * 22 - hour) * 60) / 15) * 15
+  const minutes = Math.max(0, Math.min(59, Math.floor(((percentY * 22 - hour) * 60) / 15) * 15))
 
   const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
   if (!newStartDate) return { newRow: null, updatedProperty: [] }
@@ -589,9 +589,9 @@ const onDrag = (event: MouseEvent) => {
   const scrollBottomThreshold = 20
 
   if (event.clientY > containerRect.bottom - scrollBottomThreshold) {
-    scrollContainer.value.scrollTop += 10
+    scrollContainer.value.scrollTop += 20
   } else if (event.clientY < containerRect.top + scrollBottomThreshold) {
-    scrollContainer.value.scrollTop -= 10
+    scrollContainer.value.scrollTop -= 20
   }
 
   calculateNewRow(event)

From 7fb7c76e2105e9761d12cfd32b83861b36c16848 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 28 Feb 2024 10:11:39 +0000
Subject: [PATCH 4/8] feat(nc-gui): scroll to active date in year view

---
 packages/nc-gui/components/nc/DateWeekSelector.vue           | 2 +-
 packages/nc-gui/components/smartsheet/calendar/MonthView.vue | 4 ++--
 .../smartsheet/calendar/WeekView/DateTimeField.vue           | 2 +-
 packages/nc-gui/components/smartsheet/calendar/index.vue     | 5 +++++
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index 7eb99b2d83..fbc3cd604e 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -180,7 +180,7 @@ const paginate = (action: 'next' | 'prev') => {
             'text-gray-400': !isDateInCurrentMonth(date),
             'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
             'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
-            'rounded-md bg-brand-50 text-brand-500': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
+            'rounded-md bg-brand-50 nc-calendar-today text-brand-500': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
           }"
           class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
           data-testid="nc-calendar-date"
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index ffd9fa2adc..be6ec75ea6 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -497,7 +497,7 @@ const onResizeEnd = () => {
 const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => {
   if (!isUIAllowed('dataEdit') || draggingId.value) return
 
-  selectedDate.value = null
+  // selectedDate.value = null
   resizeInProgress.value = true
   resizeDirection.value = direction
   resizeRecord.value = record
@@ -556,7 +556,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
     })
 
     dragRecord.value = record
-    selectedDate.value = null
+    // selectedDate.value = null
 
     isDragging.value = true
     dragElement.value = target
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index b1803ac78a..dc92bedf0f 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -192,7 +192,7 @@ const recordsAcrossAllRange = computed<{
         // We calculate the index of the hour in the day and set the top and height of the record
         const hourIndex = Math.min(
           Math.max(
-            datesHours.value[dayIndex].findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey),
+            datesHours.value[dayIndex]?.findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey),
             0,
           ),
           23,
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index 86058130b9..e4c3f3ae9a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -140,6 +140,11 @@ const goToToday = () => {
     start: dayjs().startOf('week'),
     end: dayjs().endOf('week'),
   }
+
+  document?.querySelector('.nc-calendar-today')?.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+  })
 }
 
 const headerText = computed(() => {

From ed3a6e6f777fbab67250ee4ee617ef6395d5eac0 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 28 Feb 2024 10:11:39 +0000
Subject: [PATCH 5/8] feat(nc-gui): go to today btn color

---
 packages/nc-gui/components/smartsheet/calendar/index.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index e4c3f3ae9a..f36d3227fa 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -242,7 +242,9 @@ const headerText = computed(() => {
             type="secondary"
             @click="goToToday"
           >
-            {{ $t('activity.goToToday') }}
+            <span class="text-gray-700">
+              {{ $t('activity.goToToday') }}
+            </span>
           </NcButton>
           <span class="opacity-0" data-testid="nc-active-calendar-view">
             {{ activeCalendarView }}

From b9ef5a0944e2878d01034e02148b5a5e647e8cb1 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 28 Feb 2024 10:11:39 +0000
Subject: [PATCH 6/8] fix(nc-gui): issue with generating 45 minutes

---
 .../components/smartsheet/calendar/DayView/DateTimeField.vue    | 2 +-
 .../components/smartsheet/calendar/WeekView/DateTimeField.vue   | 2 +-
 packages/nc-gui/composables/useViewColumns.ts                   | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 16668fb226..b56d3db627 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -336,7 +336,7 @@ const calculateNewRow = (event: MouseEvent) => {
   // 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.max(0, Math.min(59, Math.floor(((percentY * 22 - hour) * 60) / 15) * 15))
+  const minutes = Math.max(0, Math.min(59, Math.floor(((percentY * 22 - hour) * 60) / 15 + 0.5) * 15))
 
   // 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')
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index dc92bedf0f..19130bc362 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -528,7 +528,7 @@ const calculateNewRow = (
   const day = Math.max(0, Math.min(6, Math.floor(percentX * 7)))
   const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24)))
 
-  const minutes = Math.max(0, Math.min(59, Math.floor(((percentY * 22 - hour) * 60) / 15) * 15))
+  const minutes = Math.max(0, Math.min(59, Math.floor(((percentY * 22 - hour) * 60) / 15 + 0.5) * 15))
 
   const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
   if (!newStartDate) return { newRow: null, updatedProperty: [] }
diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts
index e74ccc731d..c0ed8a0058 100644
--- a/packages/nc-gui/composables/useViewColumns.ts
+++ b/packages/nc-gui/composables/useViewColumns.ts
@@ -160,7 +160,6 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
     }
 
     const saveOrUpdate = async (field: any, index: number, disableDataReload: boolean = false) => {
-      console.log('saveOrUpdate', field, index, disableDataReload)
       if (isLocalMode.value && fields.value) {
         fields.value[index] = field
         meta.value!.columns = meta.value!.columns?.map((column: ColumnType) => {

From d07092df947df24237fd3f06933c75d3dc912d7c Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 28 Feb 2024 10:11:40 +0000
Subject: [PATCH 7/8] feat(nc-gui): granularity update

---
 .../smartsheet/calendar/DayView/DateTimeField.vue  |  9 +++++++--
 .../smartsheet/calendar/WeekView/DateTimeField.vue | 14 +++++++++-----
 2 files changed, 16 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 b56d3db627..a6e0be0c10 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -205,7 +205,12 @@ const recordsAcrossAllRange = computed<{
         const id = generateRandomNumber()
 
         const startDate = dayjs(record.row[fromCol.title!])
-        const endDate = dayjs(record.row[fromCol.title!]).add(1, 'hour')
+
+        let endDate = dayjs(record.row[fromCol.title!]).add(1, 'hour')
+
+        if (endDate.isAfter(scheduleEnd, 'minutes')) {
+          endDate = scheduleEnd
+        }
 
         const startHour = startDate.hour()
 
@@ -336,8 +341,8 @@ const calculateNewRow = (event: MouseEvent) => {
   // 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.max(0, Math.min(59, Math.floor(((percentY * 22 - hour) * 60) / 15 + 0.5) * 15))
 
+  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')
   if (!newStartDate || !fromCol) return { newRow: null, updateProperty: [] }
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 19130bc362..8fa6fa072b 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -140,7 +140,11 @@ const recordsAcrossAllRange = computed<{
         const ogStartDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
         if (!ogStartDate) return
 
-        const endDate = ogStartDate.clone().add(1, 'hour')
+        let endDate = ogStartDate.clone().add(1, 'hour')
+
+        if (endDate.isAfter(scheduleEnd, 'minutes')) {
+          endDate = scheduleEnd
+        }
 
         const id = record.rowMeta.id ?? generateRandomNumber()
 
@@ -518,7 +522,7 @@ const calculateNewRow = (
   const { scrollHeight } = container.value
 
   const percentX = (event.clientX - left - window.scrollX) / width
-  const percentY = (event.clientY - top + container.value.scrollTop) / scrollHeight
+  const percentY = (event.clientY - top + container.value.scrollTop - 36.8) / scrollHeight
 
   const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
   const toCol = dragRecord.value.rowMeta.range?.fk_to_col
@@ -528,7 +532,7 @@ const calculateNewRow = (
   const day = Math.max(0, Math.min(6, Math.floor(percentX * 7)))
   const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24)))
 
-  const minutes = Math.max(0, Math.min(59, Math.floor(((percentY * 22 - hour) * 60) / 15 + 0.5) * 15))
+  const minutes = Math.round(((percentY * 24 * 60) % 60) / 15) * 15
 
   const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
   if (!newStartDate) return { newRow: null, updatedProperty: [] }
@@ -755,14 +759,14 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
       </div>
     </div>
     <div ref="container" class="absolute ml-16 flex w-[calc(100%-64px)]">
-      <div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7" data-testid="nc-calendar-week-day">
+      <div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7 mt-7.1" data-testid="nc-calendar-week-day">
         <div
           v-for="(hour, hourIndex) in date"
           :key="hourIndex"
           :class="{
             'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'),
           }"
-          class="text-center relative first:mt-7.1 h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-200 border-t-gray-200"
+          class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-200 border-t-gray-200"
           data-testid="nc-calendar-week-hour"
           @click="
             () => {

From 423415d6b78a4fb49114db1b532c4a07098b21dc Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 28 Feb 2024 10:11:40 +0000
Subject: [PATCH 8/8] feat(nc-gui): border color & adjust height

---
 .../smartsheet/calendar/MonthView.vue          |  4 ++--
 .../smartsheet/calendar/VRecordCard.vue        |  2 +-
 .../calendar/WeekView/DateTimeField.vue        | 18 +++++++++++-------
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index be6ec75ea6..398244a090 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -629,7 +629,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
       <div
         v-for="(day, index) in days"
         :key="index"
-        class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-200 font-semibold text-gray-500"
+        class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-100 font-semibold text-gray-500"
       >
         {{ day }}
       </div>
@@ -653,7 +653,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
               isDateSelected(day) || (focusedDate && dayjs(day).isSame(focusedDate, 'day')),
             '!text-gray-400': !isDayInPagedMonth(day),
           }"
-          class="text-right relative group last:border-r-0 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 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)"
         >
diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index a9b3ca080a..c4ac0b4345 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -51,7 +51,7 @@ const emit = defineEmits(['resize-start'])
       'group-hover:(border-brand-500)': resize,
       '!border-brand-500 border-1': selected || hover,
     }"
-    class="relative flex items-center h-full ml-0.25 border-1 border-gray-50"
+    class="relative flex items-center h-full ml-0.25 border-1 border-transparent"
   >
     <div class="h-full py-1">
       <div
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 8fa6fa072b..dab58fd133 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -189,7 +189,11 @@ const recordsAcrossAllRange = computed<{
           startDate = startDate.add(1, 'minute')
         }
 
-        const dayIndex = ogStartDate.day() - 1
+        let dayIndex = ogStartDate.day() - 1
+
+        if (dayIndex === -1) {
+          dayIndex = 6
+        }
 
         const hourKey = ogStartDate.format('HH:mm')
 
@@ -208,7 +212,7 @@ const recordsAcrossAllRange = computed<{
 
         style = {
           ...style,
-          top: `${topPx - hourIndex - hourIndex * 0.15}px`,
+          top: `${topPx - hourIndex - hourIndex * 0.15 + 0.7}px`,
           height: `${perHeight - 4}px`,
         }
 
@@ -371,14 +375,14 @@ const recordsAcrossAllRange = computed<{
           overlapIndex = Math.max(overlapIndex, overlaps[dateKey][hours].id.indexOf(record.rowMeta.id!))
         }
       }
-      const spacing = 1
+      const spacing = 0.1
       const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps / 7
       const leftPerRecord = widthPerRecord * overlapIndex
 
       record.rowMeta.style = {
         ...record.rowMeta.style,
-        left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}%)`,
-        width: `calc(${widthPerRecord}%)`,
+        left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}% )`,
+        width: `calc(${widthPerRecord - 0.1}%)`,
       }
       return record
     })
@@ -744,7 +748,7 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
         :class="{
           'text-brand-500': date[0].isSame(dayjs(), 'date'),
         }"
-        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50"
+        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-100 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50"
       >
         {{ dayjs(date[0]).format('DD ddd') }}
       </div>
@@ -766,7 +770,7 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
           :class="{
             'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'),
           }"
-          class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-200 border-t-gray-200"
+          class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100"
           data-testid="nc-calendar-week-hour"
           @click="
             () => {