feat: enable date field for calendar

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

@@ -533,6 +533,25 @@ const isCalendarReadonly = (calendarRange?: Array<{ fk_from_column_id: string; f
   })
 }
 
+const isDisabled = computed(() => {
+  return (
+    viewSelectFieldOptions.value.find((f) => f.value === form.calendar_range[0]?.fk_from_column_id)?.uidt === UITypes.DateTime &&
+    !isRangeEnabled.value
+  )
+})
+
+const onValueChange = async () => {
+  form.calendar_range = form.calendar_range.map((range, i) => {
+    if (i === 0) {
+      return {
+        fk_from_column_id: range.fk_from_column_id,
+        fk_to_column_id: null,
+      }
+    }
+    return range
+  })
+}
+
 const predictViews = async (): Promise<AiSuggestedViewType[]> => {
   const viewType =
     !isAIViewCreateMode.value && form.type && viewTypeToStringMap[form.type] ? viewTypeToStringMap[form.type] : undefined
@@ -999,6 +1018,7 @@ const getPluralName = (name: string) => {
                   :placeholder="$t('placeholder.notSelected')"
                   data-testid="nc-calendar-range-from-field-select"
                   @click.stop
+                  @change="onValueChange"
                 >
                   <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
                   <a-select-option
@@ -1034,20 +1054,17 @@ const getPluralName = (name: string) => {
                 </a-select>
               </div>
               <div class="w-full space-y-2">
-                <NcButton
+                <NcTooltip v-if="range.fk_to_column_id === null" placement="left" :disabled="!isDisabled">
-                  v-if="range.fk_to_column_id === null && isRangeEnabled"
+                  <NcButton size="small" type="text" :disabled="!isEeUI || isDisabled" @click="range.fk_to_column_id = undefined">
-                  size="small"
+                    <div class="flex items-center gap-1">
-                  type="text"
+                      <component :is="iconMap.plus" class="h-4 w-4" />
-                  :disabled="!isEeUI"
+                      {{ $t('activity.endDate') }}
-                  @click="range.fk_to_column_id = undefined"
+                    </div>
-                >
+                  </NcButton>
-                  <div class="flex items-center gap-1">
+                  <template #title> Coming Soon!! Currently, range support is only available for Date field. </template>
-                    <component :is="iconMap.plus" class="h-4 w-4" />
+                </NcTooltip>
-                    {{ $t('activity.endDate') }}
-                  </div>
-                </NcButton>
 
-                <template v-else-if="isEeUI && isRangeEnabled">
+                <template v-else-if="isEeUI">
                   <span class="text-gray-700">
                     {{ $t('activity.withEndDate') }}
                   </span>
@@ -1057,7 +1074,7 @@ const getPluralName = (name: string) => {
                       v-model:value="range.fk_to_column_id"
                       class="nc-select-shadow w-full flex-1"
                       allow-clear
-                      :disabled="isMetaLoading"
+                      :disabled="isMetaLoading || isDisabled"
                       :loading="isMetaLoading"
                       :placeholder="$t('placeholder.notSelected')"
                       data-testid="nc-calendar-range-to-field-select"

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

@@ -37,9 +37,6 @@ const getFieldStyle = (field: ColumnType) => {
 // We loop through all the records and calculate the position of each record based on the range
 // We only need to calculate the top, of the record since there is no overlap in the day view of date Field
 const recordsAcrossAllRange = computed<Row[]>(() => {
-  let dayRecordCount = 0
-  const perRecordHeight = 28
-
   if (!calendarRange.value) return []
 
   const recordsByRange: Array<Row> = []
@@ -52,7 +49,7 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
         const startDate = dayjs(record.row[fromCol.title!])
         const endDate = dayjs(record.row[endCol.title!])
 
-        dayRecordCount++
+        const id = record.rowMeta.id ?? generateRandomNumber()
 
         // This property is used to determine which side the record should be rounded. It can be left, right, both or none
         let position = 'none'
@@ -77,17 +74,20 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
           rowMeta: {
             ...record.rowMeta,
             position,
+            id,
             range: range as any,
           },
         })
       }
     } else if (fromCol) {
       for (const record of formattedData.value) {
-        dayRecordCount++
+        const id = record.rowMeta.id ?? generateRandomNumber()
+
         recordsByRange.push({
           ...record,
           rowMeta: {
             ...record.rowMeta,
+            id,
             range: range as any,
             position: 'rounded',
           },
@@ -206,6 +206,7 @@ const newRecord = () => {
           style="line-height: 18px"
           data-testid="nc-calendar-day-record-card"
           @mouseleave="hoverRecord = null"
+          @click.prevent="emit('expandRecord', record)"
           @mouseover="hoverRecord = record.rowMeta.id as string"
         >
           <LazySmartsheetRow :row="record">

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

@@ -128,7 +128,7 @@ const saveCalendarRanges = async () => {
 
       await loadCalendarMeta()
       await Promise.all([loadCalendarData(), loadSidebarData(), fetchActiveDates()])
-      calendarRangeDropdown.value = false
+      // calendarRangeDropdown.value = false
     } catch (e) {
       console.log(e)
       message.error('There was an error while updating view!')
@@ -143,9 +143,23 @@ const removeRange = async (id: number) => {
   await saveCalendarRanges()
 }
 
-const saveCalendarRange = async (range: CalendarRangeType, value?) => {
+const isDisabled = computed(() => {
-  range.fk_to_column_id = value
+  return (
-  await saveCalendarRanges()
+    dateFieldOptions.value.find((f) => f.value === calendarRange.value[0]?.fk_from_column_id)?.uidt === UITypes.DateTime &&
+    !isRangeEnabled.value
+  )
+})
+
+const onValueChange = async () => {
+  _calendar_ranges.value = _calendar_ranges.value.map((range, i) => {
+    if (i === 0) {
+      return {
+        fk_from_column_id: range.fk_from_column_id,
+        fk_to_column_id: undefined,
+      }
+    }
+    return range
+  })
 }
 </script>
 
@@ -198,7 +212,12 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             :placeholder="$t('placeholder.notSelected')"
             data-testid="nc-calendar-range-from-field-select"
             :disabled="isLocked"
-            @change="saveCalendarRanges"
+            @change="
+              () => {
+                onValueChange()
+                saveCalendarRanges()
+              }
+            "
             @click.stop
           >
             <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
@@ -231,23 +250,25 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
               </div>
             </a-select-option>
           </a-select>
+          <NcTooltip v-if="range.fk_to_column_id === null && isRangeEnabled" placement="left" :disabled="!isDisabled">
+            <NcButton
+              size="small"
+              data-testid="nc-calendar-range-add-end-date"
+              class="w-23"
+              type="text"
+              :shadow="false"
+              :disabled="!isEeUI || isLocked || isDisabled"
+              @click="range.fk_to_column_id = undefined"
+            >
+              <div class="flex gap-1 items-center">
+                <component :is="iconMap.plus" class="h-4 w-4" />
+                {{ $t('activity.endDate') }}
+              </div>
+            </NcButton>
+            <template #title> Coming Soon!! Currently, range support is only available for Date field. </template>
+          </NcTooltip>
 
-          <NcButton
+          <template v-else-if="isEeUI">
-            v-if="range.fk_to_column_id === null && isRangeEnabled"
-            size="small"
-            data-testid="nc-calendar-range-add-end-date"
-            class="w-23"
-            type="text"
-            :shadow="false"
-            :disabled="!isEeUI || isLocked"
-            @click="range.fk_to_column_id = undefined"
-          >
-            <div class="flex gap-1 items-center">
-              <component :is="iconMap.plus" class="h-4 w-4" />
-              {{ $t('activity.endDate') }}
-            </div>
-          </NcButton>
-          <template v-else-if="isEeUI && isRangeEnabled">
             <span>
               {{ $t('activity.withEndDate') }}
             </span>
@@ -256,7 +277,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
                 v-model:value="range.fk_to_column_id"
                 class="!rounded-r-none nc-select-shadow w-full flex-1"
                 allow-clear
-                :disabled="!range.fk_from_column_id || isLocked"
+                :disabled="!range.fk_from_column_id || isLocked || isDisabled"
                 :placeholder="$t('placeholder.notSelected')"
                 data-testid="nc-calendar-range-to-field-select"
                 dropdown-class-name="!rounded-lg"

packages/nc-gui/composables/useBetaFeatureToggle.ts

@@ -45,7 +45,7 @@ const FEATURES = [
   },
   {
     id: 'calendar_view_range',
-    title: 'Allow configuring End Date for Calendar View',
+    title: 'Allow configuring Date Time Field as 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,