diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index 72cf647e2c..3783a0b03e 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -10,7 +10,7 @@ import {
   useViewsStore,
 } from '#imports'
 
-const { isGrid, isGallery, isKanban, isMap } = useSmartsheetStoreOrThrow()
+const { isGrid, isGallery, isKanban, isMap, isCalendar } = useSmartsheetStoreOrThrow()
 
 const isPublic = inject(IsPublicInj, ref(false))
 
@@ -30,16 +30,17 @@ const { allowCSVDownload } = useSharedView()
     </template>
     <template v-else>
       <LazySmartsheetToolbarMappedBy v-if="isMap" />
+      <LazySmartsheetToolbarCalendarRange v-if="isCalendar" />
 
-      <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
+      <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap || isCalendar" :show-system-fields="false" />
 
       <LazySmartsheetToolbarStackedBy v-if="isKanban" />
 
-      <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
+      <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap || isCalendar" />
 
       <LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
 
-      <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
+      <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban || isCalendar" />
 
       <template v-if="!isMobileMode">
         <LazySmartsheetToolbarRowHeight v-if="isGrid" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue b/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
new file mode 100644
index 0000000000..dc8aca258e
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
@@ -0,0 +1,177 @@
+<script lang="ts" setup>
+import {isSystemColumn, UITypes} from 'nocodb-sdk'
+import type {SelectProps} from 'ant-design-vue'
+import {
+  ActiveViewInj,
+  computed,
+  iconMap,
+  inject,
+  IsLockedInj,
+  IsPublicInj,
+  MetaInj,
+  ref,
+  useSmartsheetStoreOrThrow,
+  useViewColumnsOrThrow,
+  watch,
+} from '#imports'
+
+const {eventBus} = useSmartsheetStoreOrThrow()
+
+const meta = inject(MetaInj, ref())
+
+const { $e } = useNuxtApp()
+
+const activeView = inject(ActiveViewInj, ref())
+
+const isLocked = inject(IsLockedInj, ref(false))
+
+const IsPublic = inject(IsPublicInj, ref(false))
+
+const {fields, loadViewColumns, metaColumnById} = useViewColumnsOrThrow()
+
+
+const calendarRangeDropdown = ref(false)
+
+watch(
+    () => activeView.value?.id,
+    async (newVal, oldVal) => {
+      if (newVal !== oldVal && meta.value) {
+        await loadViewColumns()
+        // For now we are adding a calendar range by default
+        // TODO: Remove this when we have a way to add calendar range
+        await addCalendarRange()
+      }
+    },
+    {immediate: true},
+)
+
+// TODO: Fetch calendar range from viewColumnsComposable
+const calendarRange = computed<{ fk_from_column_id: string; fk_to_column_id: string | null }[]>(() => {
+  const tempCalendarRange: { fk_from_column_id: string; fk_to_column_id: string | null }[] = []
+  // Object.values(fields.value).forEach((col) => {
+  //   if (col.calendar_range) {
+  //     tempCalendarRange.push({
+  //       fk_from_col_id: col.fk_from_column_id,
+  //       fk_to_column_id: col.fk_to_column_id,
+  //     })
+  //   }
+  // })
+  return tempCalendarRange
+})
+
+// We keep the calendar range here and update it when the user selects a new range
+const _calendar_ranges = ref<{ fk_from_column_id: string; fk_to_column_id: string | null }[]>([])
+
+const saveCalendarRanges = async () => {
+  if(activeView.value) {
+      try {
+          for(const range of _calendar_ranges.value) {
+              if(!range.fk_from_column_id) continue;
+              // TODO: Update calendar range in viewColumnsComposable
+
+              $e('c:calendar:change-calendar-range', {
+                  viewId: activeView.value.id,
+                  fk_from_column_id: range.fk_from_column_id,
+                  fk_to_column_id: range.fk_to_column_id,
+              })
+          }
+      } catch (e) {
+        console.log(e)
+        message.error('There was an error while updating view!')
+      }
+  } else {
+    message.error('Please select a view first')
+  }
+}
+
+// To add new calendar range
+const addCalendarRange = async () => {
+  _calendar_ranges.value.push({
+    fk_from_column_id: '',
+    fk_to_column_id: null,
+  })
+}
+
+const dateFieldOptions = computed<SelectProps['options']>(() => {
+  return meta.value?.columns
+      ?.filter((c) => {
+        if (c.uidt === UITypes.Date || c.uidt === UITypes.DateTime && !isSystemColumn(c)) {
+          return true
+        }
+      })
+      .map((c) => ({
+        label: c.title,
+        value: c.id,
+      })) ?? []
+})
+
+</script>
+
+<template>
+  <NcDropdown v-if="!IsPublic" v-model:visible="calendarRangeDropdown" :trigger="['click']" class="!xs:hidden">
+    <div class="nc-calendar-btn">
+      <a-button v-e="['c:calendar:change-calendar-range']" :disabled="isLocked"
+                class="nc-calendar-range-btn nc-toolbar-btn">
+        <div class="flex items-center gap-2">
+          <component :is="iconMap.calendar" class="h-4 w-4"/>
+          <span class="text-capitalize !text-sm font-medium">
+            {{ $t('activity.viewSettings') }}
+          </span>
+        </div>
+      </a-button>
+    </div>
+    <template #overlay>
+      <div
+          v-if="calendarRangeDropdown"
+          class="flex flex-col w-full p-6 w-[40rem]"
+          @click.stop
+      >
+        <div>
+          <span class="font-bold"> {{ $t('activity.calendar') + $t('activity.viewSettings') }}</span>
+          <a-divider class="!my-2"/>
+        </div>
+        <div v-for="cal in _calendar_ranges" class="flex w-full gap-3">
+          <div class="flex flex-col w-1/2">
+            <span>
+              {{ $t('labels.selectDateField') }}
+            </span>
+            <NcSelect
+                :value="cal.fk_from_column_id"
+                :options="dateFieldOptions"
+                class="w-full"
+                @click.stop
+                @change="saveCalendarRanges"
+            />
+          </div>
+          <div v-if="cal.fk_to_column_id === null" class="flex flex-col justify-end w-1/2">
+            <div class="cursor-pointer flex items-center font-medium gap-1 mb-1"
+                 @click="cal.fk_to_column_id = ''">
+              <component :is="iconMap.plus" class="h-4 w-4"/>
+              {{ $t('activity.setEndDate') }}
+            </div>
+
+          </div>
+          <div v-if="isEeUI && cal.fk_to_column_id !== null" class="flex flex-col w-1/2">
+            <div class="flex flex-row justify-between">
+
+            <span>
+              {{ $t('labels.selectEndDateField') }}
+            </span>
+              <component :is="iconMap.delete" class="h-4 w-4 cursor-pointer text-red-500"
+                         @click="cal.fk_to_column_id = null"/>
+            </div>
+            <NcSelect
+                :value="cal.fk_to_column_id"
+                :options="dateFieldOptions"
+                :disabled="!cal.fk_from_column_id"
+                :placeholder="$t('placeholder.notSelected')"
+                class="w-full"
+                @click.stop
+                @change="saveCalendarRanges"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </NcDropdown>
+</template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 0316dd1c2e..2417c96fc6 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -297,7 +297,7 @@ useMenuCloseOnEsc(open)
       <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-2">
           <GeneralIcon
-            v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY"
+            v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.CALENDAR"
             icon="creditCard"
             class="h-4 w-4"
           />
@@ -305,7 +305,7 @@ useMenuCloseOnEsc(open)
 
           <!-- Fields -->
           <span v-if="!isMobileMode" class="text-capitalize text-sm font-medium">
-            <template v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY">
+            <template v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY || ViewTypes.CALENDAR">
               {{ $t('title.editCards') }}
             </template>
             <template v-else>
@@ -322,7 +322,7 @@ useMenuCloseOnEsc(open)
     <template #overlay>
       <div class="p-4 pr-0 bg-white w-90 rounded-2xl nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
         <div
-          v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
+          v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.CALENDAR)"
           class="flex flex-col gap-y-2 pr-4 mb-6"
         >
           <div class="flex text-sm select-none">Select cover image field</div>
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index 9a50975408..1bbe96b86d 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -36,6 +36,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     const isGallery = computed(() => view.value?.type === ViewTypes.GALLERY)
     const isKanban = computed(() => view.value?.type === ViewTypes.KANBAN)
     const isMap = computed(() => view.value?.type === ViewTypes.MAP)
+    const isCalendar = computed(() => view.value?.type === ViewTypes.CALENDAR)
     const isSharedForm = computed(() => isForm.value && shared)
     const xWhere = computed(() => {
       let where
@@ -89,6 +90,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       isGallery,
       isKanban,
       isMap,
+      isCalendar,
       isSharedForm,
       sorts,
       nestedFilters,
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 041374eb3c..1e94b0f021 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -675,6 +675,9 @@
     }
   },
   "activity": {
+    "setEndDate": "Set end date",
+    "calendar": "Calendar",
+    "viewSettings": "View settings",
     "googleOAuth": "Google OAuth",
     "registerOIDC": "Register OIDC Identity Provider",
     "registerSAML": "Register SAML Identity Provider",