fix: calendar misc fixes

packages/nc-gui/components/dlg/ViewCreate.vue

@@ -1037,13 +1037,14 @@ const getPluralName = (name: string) => {
                 <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" />
+                  <div class="flex items-center gap-1">
-                  {{ $t('activity.endDate') }}
+                    <component :is="iconMap.plus" class="h-4 w-4" />
+                    {{ $t('activity.endDate') }}
+                  </div>
                 </NcButton>
 
                 <template v-else-if="isEeUI && isRangeEnabled">
@@ -1054,7 +1055,8 @@ const getPluralName = (name: string) => {
                   <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"
+                      class="nc-select-shadow w-full flex-1"
+                      allow-clear
                       :disabled="isMetaLoading"
                       :loading="isMetaLoading"
                       :placeholder="$t('placeholder.notSelected')"
@@ -1097,14 +1099,6 @@ const getPluralName = (name: string) => {
                         </div>
                       </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
                     v-if="index !== 0"
@@ -1539,13 +1533,4 @@ const getPluralName = (name: string) => {
     @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>

packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue

@@ -211,6 +211,7 @@ const newRecord = () => {
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarRecordCard
               :record="record"
+              :hover="hoverRecord === record.rowMeta.id"
               :resize="false"
               :position="record.rowMeta.position"
               size="small"

packages/nc-gui/components/smartsheet/calendar/MonthView.vue

@@ -254,6 +254,7 @@ const recordsToDisplay = computed<{
           rowMeta: {
             ...record.rowMeta,
             style,
+            maxSpanning: 1,
             position: 'rounded',
             range,
             id,
@@ -330,7 +331,7 @@ const recordsToDisplay = computed<{
           const isRecordDraggingOrResizeState = id === draggingId.value || id === resizeRecord.value?.rowMeta.id
 
           const style: Partial<CSSStyleDeclaration> = {
-            left: `${startDayIndex * perWidth}px`,
+            left: `${startDayIndex * perWidth - 0.5}px`,
             width: `${(endDayIndex - startDayIndex + 1) * perWidth}px`,
             top: isRecordDraggingOrResizeState
               ? `${weekIndex * perHeight + perRecordHeight}px`
@@ -373,6 +374,7 @@ const recordsToDisplay = computed<{
               position,
               style,
               range,
+              maxSpanning: endDayIndex - startDayIndex + 1,
               id,
               recordIndex,
             },
@@ -639,11 +641,6 @@ const dragStart = (event: MouseEvent, record: Row) => {
     // 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,
-    }
-
     // selectedDate.value = null
 
     isDragging.value = true
@@ -651,6 +648,11 @@ const dragStart = (event: MouseEvent, record: Row) => {
     draggingId.value = record.rowMeta!.id!
     dragRecord.value = record
 
+    dragOffset.value = {
+      x: dragRecord.value?.rowMeta.maxSpanning > 1 ? event.clientX - target.getBoundingClientRect().left : 0,
+      y: event.clientY,
+    }
+
     document.addEventListener('mousemove', onDrag)
     document.addEventListener('mouseup', stopDrag)
   }, 500)

packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue

@@ -154,9 +154,10 @@ const calendarData = computed(() => {
           range: { fk_from_col, fk_to_col },
           position,
           id,
+          spanningDays: Math.abs(ogStartDate.diff(endDate, 'day')) - Math.abs(startDate.diff(endDate, 'day')),
           style: {
-            width: `calc(max(${spanDays * perDayWidth - 10}px, ${perDayWidth - 10}px))`,
+            width: `calc(max(${spanDays * perDayWidth + 0.5}px, ${perDayWidth + 0.5}px))`,
-            left: `${startDaysDiff * perDayWidth + 4}px`,
+            left: `${startDaysDiff * perDayWidth - 1}px`,
             top: `${suitableRow * 28 + Math.max(suitableRow + 1, 1) * 8}px`,
           },
         },
@@ -304,7 +305,7 @@ const calculateNewRow = (event: MouseEvent, updateSideBarData?: boolean) => {
     relativeX -= dragOffset.value.x
   }
 
-  const percentX = Math.max(0, Math.min(1, relativeX / width))
+  const percentX = relativeX / width
 
   const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
   const toCol = dragRecord.value.rowMeta.range?.fk_to_col
@@ -312,8 +313,8 @@ const calculateNewRow = (event: MouseEvent, updateSideBarData?: boolean) => {
   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)
+  const day = Math.floor(percentX * maxVisibleDays.value) - dragRecord.value.rowMeta.spanningDays
 
   // 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')

packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue

@@ -236,13 +236,13 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             v-if="range.fk_to_column_id === null && isRangeEnabled"
             size="small"
             data-testid="nc-calendar-range-add-end-date"
-            class="!border-none w-28"
+            class="w-23"
-            type="secondary"
+            type="text"
             :shadow="false"
             :disabled="!isEeUI || isLocked"
             @click="range.fk_to_column_id = undefined"
           >
-            <div class="flex gap-2 items-center">
+            <div class="flex gap-1 items-center">
               <component :is="iconMap.plus" class="h-4 w-4" />
               {{ $t('activity.endDate') }}
             </div>
@@ -254,7 +254,8 @@ const saveCalendarRange = async (range: CalendarRangeType, 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"
+                class="!rounded-r-none nc-select-shadow w-full flex-1"
+                allow-clear
                 :disabled="!range.fk_from_column_id || isLocked"
                 :placeholder="$t('placeholder.notSelected')"
                 data-testid="nc-calendar-range-to-field-select"
@@ -292,15 +293,6 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
                   </div>
                 </a-select-option>
               </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>
           </template>
 

packages/nc-gui/composables/useCalendarViewStore.ts

@@ -847,11 +847,10 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
     watch(activeCalendarView, async (value, oldValue) => {
       if (oldValue === 'week') {
         pageDate.value = selectedDate.value
-        selectedMonth.value = selectedTime.value ?? selectedDate.value ?? selectedDateRange.value.start
+        selectedMonth.value = selectedDate.value ?? selectedDateRange.value.start
-        selectedDate.value = selectedTime.value ?? selectedDateRange.value.start
+        selectedDate.value = selectedDate.value ?? selectedDateRange.value.start
         selectedTime.value = selectedDate.value ?? selectedDateRange.value.start
       } else if (oldValue === 'month') {
-        selectedDate.value = selectedMonth.value
         pageDate.value = selectedDate.value
         selectedTime.value = selectedDate.value
         selectedDateRange.value = {

packages/nc-gui/lib/types.ts

@@ -103,6 +103,7 @@ interface Row {
     numberOfOverlaps?: number
     minutes?: number
     recordIndex?: number // For week spanning records in month view
+    maxSpanning?: number
   }
 }