diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
new file mode 100644
index 0000000000..d7ed1de761
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+
+const {t} = useI18n()
+
+const { pageDate, selectedDate, selectedDateRange } = useCalendarViewStoreOrThrow()
+
+const months = computed(() => {
+  const date = new Date()
+  const months = []
+  for (let i = 0; i < 12; i++) {
+    months.push(new Date(date.getFullYear(), i, selectedDate.value.getDate()))
+  }
+  return months
+})
+
+</script>
+
+<template>
+
+  <div class="grid justify-items-center gap-6 grid-cols-3 overflow-auto nc-scrollbar-md">
+      <NcDateWeekSelector v-for="(month, index) in months" disable-pagination :key="month" v-model:page-date="months[index]" v-model:selected-date="selectedDate" class="max-w-[350px]"/>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index 9b4af5b632..85788991e8 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -97,6 +97,7 @@ const headerText = computed(() => {
           }" class="h-4 w-4 transition-all"/>
         </NcButton>
       </div>
+      <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" />
     </div>
     <LazySmartsheetCalendarSideMenu v-if="!isMobileMode" :visible="showSideMenu" @expand-record="expandRecord"/>
   </div>