diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 78e4bcf2ab..1bdda014e3 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -285,6 +285,7 @@ onMounted(async () => {
             return {
               value: field.id,
               label: field.title,
+              uidt: field.uidt,
             }
           })
 
@@ -461,7 +462,11 @@ onMounted(async () => {
                 v-model:value="range.fk_to_column_id"
                 :disabled="isMetaLoading"
                 :loading="isMetaLoading"
-                :options="viewSelectFieldOptions"
+                :options="
+                  viewSelectFieldOptions.filter(
+                    (el) => el.uidt === viewSelectFieldOptions.find((el) => el.id === range.fk_from_column_id),
+                  )
+                "
                 :placeholder="$t('placeholder.notSelected')"
                 class="w-full"
               />
diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index c7d9d763da..70e89b5e2f 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -16,7 +16,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   selectedDate: null,
   isDisabled: false,
-  isMondayFirst: false,
+  isMondayFirst: true,
   pageDate: new Date(),
   weekPicker: false,
   disablePagination: false,
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView.vue b/packages/nc-gui/components/smartsheet/calendar/DayView.vue
index 756a112a07..55fb045565 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView.vue
@@ -1,38 +1,76 @@
-<script setup lang="ts">
-import { UITypes } from 'nocodb-sdk'
+<script lang="ts" setup>
+import { UITypes } from 'nocodb-sdk';
+import { computed, ref, type Row } from '#imports';
+
+interface Props {
+  isEmbed?: boolean
+  data?: Row[] | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isEmbed: false,
+  data: null,
+})
 
 const emit = defineEmits(['expand-record'])
+const meta = inject(MetaInj, ref())
+const fields = inject(FieldsInj, ref([]))
+
+const data = toRefs(props).data
+
+const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null)
+
+const { pageDate, selectedDate, calDataType, formattedData, calendarRange } = useCalendarViewStoreOrThrow()
+
+const hours = computed(() => {
+  const hours = []
+  for (let i = 0; i < 24; i++) {
+    hours.push(i)
+  }
+  return hours
+})
+
+const renderData = computed(() => {
+  console.log(data.value)
+  if (data.value) {
 
-const { pageDate, selectedDate, calDataType } = useCalendarViewStoreOrThrow()
-
-const events = ref([
-  {
-    Id: 1,
-    Title: 'Event 01',
-    from_date_time: '2023-12-15',
-    to_date_time: '2023-12-20',
-  },
-  {
-    Id: 2,
-    Title: 'Event 02',
-    from_date_time: '2023-12-20',
-    to_date_time: '2023-12-25',
-  },
-])
+    return data.value
+  }
+  return formattedData.value
+})
 </script>
 
 <template>
-  <div v-if="calDataType === UITypes.Date" class="flex flex-col px-2 gap-4 pt-4">
-    <LazySmartsheetCalendarRecordCard
-      v-for="event in events"
-      :key="event.Id"
-      :name="event.Title"
-      :date="event.from_date_time"
-      color="blue"
-      size="medium"
-      @click="emit('expand-record', 'xxx')"
-    />
-  </div>
+  <template v-if="formattedData.length">
+    <div
+      v-if="calDataType === UITypes.Date"
+      :class="{
+        'h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md': !props.isEmbed,
+        'border-r-1 h-full border-gray-200 hover:bg-gray-50 ': props.isEmbed,
+      }"
+      class="flex flex-col pt-3 gap-2 h-full w-full px-1"
+    >
+      <LazySmartSheetRow v-for="(record, rowIndex) in renderData" :row="record">
+        <LazySmartsheetCalendarRecordCard
+          :key="rowIndex"
+          :date="record.row[calendarRange[0].fk_from_col.title]"
+          :name="record.row[displayField.title]"
+          color="blue"
+          size="small"
+          @click="emit('expand-record', record)"
+        />
+      </LazySmartSheetRow>
+    </div>
+    <div
+      v-else-if="calDataType === UITypes.DateTime"
+      :class="{
+        'h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md': !props.isEmbed,
+        'border-r-1 h-full border-gray-200 ': props.isEmbed,
+      }"
+      class="flex flex-col mt-3 gap-2 w-full px-1"
+    ></div>
+  </template>
+  <div v-else-if="!data" class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center">No Records in this day</div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index 33ec2d7d59..13b7eab96d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -1,14 +1,10 @@
-<script setup lang="ts">
-import { CalendarViewTypeInj } from '#imports'
-
+<script lang="ts" setup>
 const props = defineProps<{
   visible: boolean
 }>()
 
 const emit = defineEmits(['expand-record'])
 
-const activeCalendarView = inject(CalendarViewTypeInj, ref<'month' | 'day' | 'year' | 'week'>('month' as const))
-
 const { t } = useI18n()
 
 const options = computed(() => {
@@ -44,9 +40,7 @@ const options = computed(() => {
   }
 })
 
-const { pageDate, selectedDate, selectedDateRange } = useCalendarViewStoreOrThrow()
-
-const activeDates = ref([new Date()])
+const { pageDate, selectedDate, selectedDateRange, activeDates, activeCalendarView } = useCalendarViewStoreOrThrow()
 </script>
 
 <template>
@@ -112,4 +106,4 @@ const activeDates = ref([new Date()])
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView.vue
new file mode 100644
index 0000000000..791aece31a
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import dayjs from 'dayjs';
+
+const { selectedDateRange, formattedData, calendarRange } = useCalendarViewStoreOrThrow()
+
+const weekDates = computed(() => {
+  const startOfWeek = new Date(selectedDateRange.value.start)
+  const endOfWeek = new Date(selectedDateRange.value.end)
+  const datesArray = []
+  while (startOfWeek <= endOfWeek) {
+    datesArray.push(new Date(startOfWeek))
+    startOfWeek.setDate(startOfWeek.getDate() + 1)
+  }
+  return datesArray
+})
+
+const getData = (date: Date) => {
+  const range = calendarRange.value[0]
+  return formattedData.value.filter((record) => dayjs(date).isSame(dayjs(record.row[range.fk_from_col.title])))
+}
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex">
+      <div
+        v-for="date in weekDates"
+        :key="date"
+        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 !last:mr-2.5 border-gray-200 border-b-1 border-r-1 bg-gray-50"
+      >
+        {{ dayjs(date).format('DD ddd') }}
+      </div>
+    </div>
+    <div class="flex overflow-auto nc-scrollbar-md h-[calc(100vh-12rem)]">
+      <div v-for="date in weekDates" :key="date" class="flex flex-col items-center w-1/7">
+        <LazySmartsheetCalendarDayView :data="getData(date)" :is-embed="true" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index 69c6b195e1..9ffee632ef 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -9,6 +9,11 @@ import {
   IsGridInj,
   IsKanbanInj,
   MetaInj,
+  ReloadViewDataHookInj,
+  ReloadViewMetaHookInj,
+  type Row as RowType,
+  computed,
+  extractPkFromRow,
   inject,
   provide,
   ref,
@@ -19,6 +24,9 @@ const meta = inject(MetaInj, ref())
 
 const view = inject(ActiveViewInj, ref())
 
+const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
+const reloadViewDataHook = inject(ReloadViewDataHookInj)
+
 const { isMobileMode } = useGlobal()
 
 const { t } = useI18n()
@@ -36,6 +44,8 @@ provide(IsCalendarInj, ref(true))
 const {
   formattedData,
   loadCalendarMeta,
+  loadCalendarData,
+  isCalendarDataLoading,
   updateCalendarMeta,
   calendarMetaData,
   selectedDate,
@@ -50,15 +60,58 @@ provide(CalendarViewTypeInj, activeCalendarView)
 
 const showSideMenu = ref(true)
 
-const isExpanded = ref(false)
+const expandedFormOnRowIdDlg = computed({
+  get() {
+    return !!route.query.rowId
+  },
+  set(val) {
+    if (!val)
+      router.push({
+        query: {
+          ...route.query,
+          rowId: undefined,
+        },
+      })
+  },
+})
+
+const expandedFormDlg = ref(false)
+const expandedFormRow = ref<RowType>()
+const expandedFormRowState = ref<Record<string, any>>()
+
+const router = useRouter()
+const route = useRoute()
 
-const expandedRecordId = ref<string | null>(null)
+const expandRecord = (row: RowType) => {
+  const rowId = extractPkFromRow(row.row, meta.value!.columns!)
 
-const expandRecord = (id: string) => {
-  isExpanded.value = true
-  expandedRecordId.value = id
+  if (rowId) {
+    router.push({
+      query: {
+        ...route.query,
+        rowId,
+      },
+    })
+  } else {
+    expandedFormRow.value = row
+    expandedFormRowState.value = state
+    expandedFormDlg.value = true
+  }
 }
 
+onMounted(async () => {
+  await loadCalendarMeta()
+  await loadCalendarData()
+})
+
+reloadViewMetaHook?.on(async () => {
+  await loadCalendarMeta()
+  await loadCalendarData()
+})
+reloadViewDataHook?.on(async () => {
+  await loadCalendarData()
+})
+
 const headerText = computed(() => {
   switch (activeCalendarView.value) {
     case 'day':
@@ -83,7 +136,7 @@ const headerText = computed(() => {
           <NcButton size="small" type="secondary" @click="paginateCalendarView('prev')">
             <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
           </NcButton>
-          <span class="font-bold text-gray-700">{{ headerText }}</span>
+          <span class="font-bold text-center text-gray-700">{{ headerText }}</span>
           <NcButton size="small" type="secondary" @click="paginateCalendarView('next')">
             <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
           </NcButton>
@@ -98,22 +151,39 @@ const headerText = computed(() => {
           />
         </NcButton>
       </div>
-      <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" class="flex-grow-1" />
-      <LazySmartsheetCalendarMonthView v-else-if="activeCalendarView === 'month'" class="flex-grow-1" />
-      <LazySmartsheetCalendarDayView v-else-if="activeCalendarView === 'day'" class="flex-grow-1" />
+      <template v-if="!isCalendarDataLoading">
+        <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" class="flex-grow-1" />
+        <LazySmartsheetCalendarMonthView
+          v-else-if="activeCalendarView === 'month'"
+          class="flex-grow-1"
+          @expand-record="expandRecord"
+        />
+        <LazySmartsheetCalendarWeekView
+          v-else-if="activeCalendarView === 'week'"
+          class="flex-grow-1"
+          @expand-record="expandRecord"
+        />
+        <LazySmartsheetCalendarDayView
+          v-else-if="activeCalendarView === 'day'"
+          class="flex-grow-1"
+          @expand-record="expandRecord"
+        />
+      </template>
+      <div v-if="isCalendarDataLoading" class="flex w-full items-center h-full justify-center">
+        <GeneralLoader size="xlarge" />
+      </div>
     </div>
     <LazySmartsheetCalendarSideMenu v-if="!isMobileMode" :visible="showSideMenu" @expand-record="expandRecord" />
   </div>
 
-  <LazySmartsheetExpandedForm
-    v-model="isExpanded"
-    :view="view"
-    :row="{
-      row: {},
-      rowMeta: {
-        new: !expandedRecordId,
-      },
-    }"
-    :meta="meta"
-  />
+  <Suspense>
+    <LazySmartsheetExpandedForm
+      v-if="expandedFormOnRowIdDlg"
+      v-model="expandedFormOnRowIdDlg"
+      :meta="meta"
+      :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+      :row-id="route.query.rowId"
+      :view="view"
+    />
+  </Suspense>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue b/packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue
index 934d438fb9..c891dee8c8 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue
@@ -10,11 +10,18 @@ const setActiveCalendarMode = (mode: 'day' | 'week' | 'month' | 'year', event: M
   const tabElement = event.target as HTMLElement
   highlightStyle.value.left = `${tabElement.offsetLeft}px`
 }
+
+onMounted(() => {
+  const activeTab = document.querySelector('.nc-calendar-mode-tab .tab.active') as HTMLElement
+  if (activeTab) {
+    highlightStyle.value.left = `${activeTab.offsetLeft}px`
+  }
+})
 </script>
 
 <template>
   <div class="flex flex-row relative p-1 mx-3 mt-3 mb-3 bg-gray-100 rounded-lg gap-x-0.5 nc-calendar-mode-tab">
-    <div class="highlight" :style="highlightStyle"></div>
+    <div :style="highlightStyle" class="highlight"></div>
     <div
       v-for="mode in ['day', 'week', 'month', 'year']"
       :key="mode"
diff --git a/packages/nc-gui/composables/useCalendarViewStore.ts b/packages/nc-gui/composables/useCalendarViewStore.ts
index 40fbb83909..e793b300e6 100644
--- a/packages/nc-gui/composables/useCalendarViewStore.ts
+++ b/packages/nc-gui/composables/useCalendarViewStore.ts
@@ -1,9 +1,8 @@
 import type { ComputedRef, Ref } from 'vue'
-import type { CalendarType, PaginatedType, ViewType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
+import type { CalendarType, PaginatedType, UITypes, ViewType } from 'nocodb-sdk'
+import dayjs from 'dayjs'
 import { addDays, addMonths, addYears } from '../utils'
-import { IsPublicInj, ref, storeToRefs, useBase, useInjectionState, useMetas } from '#imports'
-import type { Row } from '#imports'
+import { IsPublicInj, type Row, ref, storeToRefs, useBase, useInjectionState } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map(
@@ -28,15 +27,21 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     const pageDate = ref<Date>(new Date())
 
-    const activeCalendarView = ref<'month' | 'year' | 'day' | 'week'>('month')
+    const activeCalendarView = ref<'month' | 'year' | 'day' | 'week'>()
 
-    const calDataType = ref<UITypes.Date | UITypes.DateTime>(UITypes.Date)
+    const calDataType = ref<UITypes.Date | UITypes.DateTime>()
 
     const selectedDate = ref<Date>(new Date())
+
+    const isCalendarDataLoading = ref<boolean>(false)
+
     const selectedDateRange = ref<{
       start: Date | null
       end: Date | null
-    }>({ start: new Date(), end: null })
+    }>({
+      start: dayjs(selectedDate.value).startOf('week').toDate(), // This will be the previous Sunday
+      end: dayjs(selectedDate.value).startOf('week').add(6, 'day').toDate(), // This will be the following Saturday
+    })
 
     const defaultPageSize = 1000
 
@@ -58,9 +63,6 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     const calendarMetaData = ref<CalendarType>({})
 
-    // Not Required in Calendar View TODO: Remove
-    // const geoDataFieldColumn = ref<ColumnType | undefined>()
-
     const paginationData = ref<PaginatedType>({ page: 1, pageSize: defaultPageSize })
 
     const queryParams = computed(() => ({
@@ -68,43 +70,96 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       where: where?.value ?? '',
     }))
 
-    const changeCalendarView = (view: 'month' | 'year' | 'day' | 'week') => {
-      activeCalendarView.value = view
+    const calendarRange = computed(() => {
+      if (!meta.value || !meta.value.columns || !calendarMetaData.value || !calendarMetaData.value.calendar_range) return []
+      return calendarMetaData.value.calendar_range.map((range) => {
+        // Get the column data for the calendar range
+        return {
+          fk_from_col: meta.value.columns.find((col) => col.id === range.fk_from_column_id),
+          fk_to_col: meta.value.columns.find((col) => col.id === range.fk_to_column_id),
+        }
+      })
+    })
+
+    const xWhere = computed(() => {
+      if (!meta.value || !meta.value.columns || !calendarMetaData.value || !calendarMetaData.value.calendar_range) return ''
+      console.log(meta.value.columns.find((col) => col.id === calendarMetaData.value.calendar_range[0].fk_from_column_id))
+      // If CalendarView, then we need to add the date filter to the where clause
+      let whereClause = where?.value ?? ''
+      if (whereClause.length > 0) {
+        whereClause += '~and('
+      }
+      if (activeCalendarView.value === 'week') {
+        whereClause += `(${
+          meta.value.columns.find((col) => col.id === calendarMetaData.value.calendar_range[0].fk_from_column_id).title
+        },gte,exactDate,${dayjs(selectedDateRange.value.start).format('YYYY-MM-DD')})`
+        whereClause += `~and(${
+          meta.value.columns.find((col) => col.id === calendarMetaData.value.calendar_range[0].fk_from_column_id).title
+        },lte,exactDate,${dayjs(selectedDateRange.value.end).format('YYYY-MM-DD')})`
+        return whereClause
+      } else if (activeCalendarView.value === 'day') {
+        return `(${
+          meta.value.columns.find((col) => col.id === calendarMetaData.value.calendar_range[0].fk_from_column_id).title
+        },eq,exactDate,${dayjs(selectedDate.value).format('YYYY-MM-DD')})`
+      }
+    })
+
+    // Set of Dates that have data
+    const activeDates = computed(() => {
+      const dates = new Set<Date>()
+      formattedData.value.forEach((row) => {
+        const date = dayjs(row.row[calendarMetaData.value.calendar_range![0].fk_from_column_id!]).toDate()
+        dates.add(date)
+      })
+      return Array.from(dates)
+    })
+
+    const changeCalendarView = async (view: 'month' | 'year' | 'day' | 'week') => {
+      try {
+        activeCalendarView.value = view
+        await updateCalendarMeta({
+          meta: {
+            ...JSON.parse(calendarMetaData.value?.meta ?? '{}'),
+            active_view: view,
+          },
+        })
+      } catch (e) {
+        message.error('Error changing calendar view')
+        console.log(e)
+      }
     }
 
     async function loadCalendarMeta() {
       if (!viewMeta?.value?.id || !meta?.value?.columns) return
       // TODO: Fetch Calendar Meta
-      // calendarMetaData.value = isPublic.value ? (sharedView.value?.view as CalendarType) : await $api.dbView.calendarRead(viewMeta.value.id)
       calendarMetaData.value = isPublic.value
         ? (sharedView.value?.view as CalendarType)
-        : await $api.dbView.mapRead(viewMeta.value.id)
-
-      /* geoDataFieldColumn.value =
-                (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
-      */
+        : await $api.dbView.calendarRead(viewMeta.value.id)
+      activeCalendarView.value = JSON.parse(calendarMetaData.value?.meta ?? '{}')?.active_view ?? 'month'
+      calDataType.value = meta.value.columns.find((col) => col.id === calendarMetaData.value.calendar_range[0].fk_from_column_id)
+        ?.uidt as UITypes.Date | UITypes.DateTime
     }
 
     async function loadCalendarData() {
       if ((!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic?.value) return
-
+      isCalendarDataLoading.value = true
       const res = !isPublic.value
         ? await api.dbViewRow.list('noco', base.value.id!, meta.value!.id!, viewMeta.value!.id!, {
             ...queryParams.value,
             ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
-            where: where?.value,
+            where: xWhere?.value,
           })
         : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value })
       formattedData.value = formatData(res!.list)
+      isCalendarDataLoading.value = false
     }
 
     async function updateCalendarMeta(updateObj: Partial<CalendarType>) {
       if (!viewMeta?.value?.id || !isUIAllowed('dataEdit')) return
-      // await $api.dbView.calendarUpdate(viewMeta.value.id, updateObj)
-      await $api.dbView.mapUpdate(viewMeta.value.id, updateObj)
+      await $api.dbView.calendarUpdate(viewMeta.value.id, updateObj)
     }
 
-    const paginateCalendarView = (action: 'next' | 'prev') => {
+    const paginateCalendarView = async (action: 'next' | 'prev') => {
       switch (activeCalendarView.value) {
         case 'month':
           selectedDate.value = action === 'next' ? addMonths(selectedDate.value, 1) : addMonths(selectedDate.value, -1)
@@ -137,15 +192,35 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
                   start: addDays(selectedDateRange.value.start!, -7),
                   end: addDays(selectedDateRange.value.end!, -7),
                 }
+          if (pageDate.value.getMonth() !== selectedDateRange.value.end?.getMonth()) {
+            pageDate.value = selectedDateRange.value.start!
+          }
           break
       }
     }
 
+    watch(selectedDate, async () => {
+      await loadCalendarData()
+    })
+
+    watch(selectedDateRange, async () => {
+      if (activeCalendarView.value !== 'week') return
+      await loadCalendarData()
+    })
+
+    watch(activeCalendarView, async () => {
+      await loadCalendarData()
+    })
+
     return {
       formattedData,
+      activeDates,
+      isCalendarDataLoading,
       changeCalendarView,
       calDataType,
       loadCalendarMeta,
+      calendarRange,
+      loadCalendarData,
       updateCalendarMeta,
       calendarMetaData,
       activeCalendarView,