diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index f88b0d3855..6b5a546601 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -217,15 +217,12 @@ async function onSubmit() {
   }
 }
 
-/*
-TODO: Add support for end date and multiple range in future
 const addCalendarRange = async () => {
   form.calendar_range.push({
     fk_from_column_id: viewSelectFieldOptions.value[0].value as string,
     fk_to_column_id: null,
   })
 }
-*/
 
 const isMetaLoading = ref(false)
 
@@ -453,23 +450,20 @@ onMounted(async () => {
                 </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>
-
-             TODO: Add support for end date and multiple range in future
-
- <div class="flex">
+            <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"
@@ -499,27 +493,28 @@ class="cursor-pointer flex items-center text-gray-800 gap-1"
                 </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>
-        </template>
-        <!--            <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>
+                </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>
+
           <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
             <component :is="iconMap.plus" />
             Add another date field
           </NcButton>
-                 -->
+        </template>
       </a-form>
       <div v-else-if="!isNecessaryColumnsPresent" class="flex flex-row p-4 border-gray-200 border-1 gap-x-4 rounded-lg w-full">
         <GeneralIcon class="!text-5xl text-orange-500" icon="warning" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue b/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
index 552e630311..90a6ac5a0f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
@@ -93,9 +93,7 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
   )
 })
 
-// TODO: Add support for end date in future
-// To add new calendar range
-/* const addCalendarRange = async () => {
+const addCalendarRange = async () => {
   _calendar_ranges.value.push({
     fk_from_column_id: dateFieldOptions.value![0].value as string,
     fk_to_column_id: null,
@@ -111,7 +109,7 @@ const removeRange = async (id: number) => {
 const saveCalendarRange = async (range: CalendarRangeType, value?) => {
   range.fk_to_column_id = value
   await saveCalendarRanges()
-} */
+}
 </script>
 
 <template>
@@ -132,7 +130,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
       </a-button>
     </div>
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="w-full p-6 w-[22rem]" data-testid="nc-calendar-range-menu" @click.stop>
+      <div v-if="calendarRangeDropdown" class="w-full p-6 w-[36rem]" data-testid="nc-calendar-range-menu" @click.stop>
         <div
           v-for="(range, id) in _calendar_ranges"
           :key="id"
@@ -167,69 +165,58 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             </a-select-option>
           </NcSelect>
 
-          <!--
-            TODO: Add support for end date and multiple range in future
-            <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"
-                      @click="saveCalendarRange(range, undefined)"
-                    >
-                      <component :is="iconMap.plus" class="h-4 w-4" />
-                      {{ $t('activity.addEndDate') }}
-                    </div>
-                    <template v-else-if="isEeUI && false">
-                      <span>
-                        {{ $t('activity.withEndDate') }}
-                      </span>
-                      <div class="flex">
-                        <NcSelect
-                          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"
-                          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
-                            })"
-                            :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>
-                          </a-select-option>
-                        </NcSelect>
-                        <NcButton class="!rounded-l-none !border-l-0" size="small" type="secondary" @click="saveCalendarRange(range, null)">
-                          <component :is="iconMap.delete" class="h-4 w-4" />
-                        </NcButton>
-                      </div>
-                    </template>
-                    <NcButton v-if="id !== 0" size="small" type="secondary" @click="removeRange(id)">
-                      <component :is="iconMap.close" />
-                    </NcButton>
+          <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"
+            @click="saveCalendarRange(range, 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="!range.fk_from_column_id"
+                :placeholder="$t('placeholder.notSelected')"
+                class="!rounded-r-none 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
+                  })"
+                  :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>
-                  <NcButton
-                    v-if="false"
-                    class="mt-2"
-                    data-testid="nc-calendar-range-add-btn"
-                    size="small"
-                    type="secondary"
-                    @click="addCalendarRange"
-                  >
-                    <component :is="iconMap.plus" />
-                    Add another date field
-                  </NcButton>
-                  -->
+                </a-select-option>
+              </NcSelect>
+              <NcButton class="!rounded-l-none !border-l-0" size="small" type="secondary" @click="saveCalendarRange(range, null)">
+                <component :is="iconMap.delete" class="h-4 w-4" />
+              </NcButton>
+            </div>
+          </template>
+          <NcButton v-if="id !== 0" size="small" type="secondary" @click="removeRange(id)">
+            <component :is="iconMap.close" />
+          </NcButton>
         </div>
+        <NcButton class="mt-2" data-testid="nc-calendar-range-add-btn" size="small" type="secondary" @click="addCalendarRange">
+          <component :is="iconMap.plus" />
+          Add another date field
+        </NcButton>
       </div>
     </template>
   </NcDropdown>