From 93a274a365f00dedfd1dad5021439e0f51f91054 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sat, 2 Mar 2024 12:01:11 +0000
Subject: [PATCH 1/8] feat(nc-gui): refresh year view

---
 .../nc-gui/components/nc/DateWeekSelector.vue | 46 +++++++++++++++----
 .../smartsheet/calendar/SideMenu.vue          | 21 +++++----
 .../smartsheet/calendar/YearView.vue          |  3 +-
 .../components/smartsheet/calendar/index.vue  |  9 +++-
 4 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index fbc3cd604e..a1ea8b0a92 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -2,6 +2,7 @@
 import dayjs from 'dayjs'
 
 interface Props {
+  size?: 'small' | 'medium'
   selectedDate?: dayjs.Dayjs | null
   isDisabled?: boolean
   pageDate?: dayjs.Dayjs
@@ -16,6 +17,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
   selectedDate: null,
   isDisabled: false,
   isMondayFirst: true,
@@ -135,7 +137,7 @@ const paginate = (action: 'next' | 'prev') => {
 </script>
 
 <template>
-  <div class="px-4 pt-3 pb-4 flex flex-col gap-4">
+  <div class="flex flex-col gap-4">
     <div
       :class="{
         'justify-center': disablePagination,
@@ -163,12 +165,31 @@ const paginate = (action: 'next' | 'prev') => {
       </NcTooltip>
     </div>
     <div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
-      <div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between px-2">
-        <span v-for="(day, index) in days" :key="index" class="h-9 flex items-center justify-center w-9 text-gray-500">{{
-          day
-        }}</span>
+      <div
+        :class="{
+          'gap-1 px-1': size === 'small',
+          'gap-2 px-2': size === 'medium',
+        }"
+        class="flex flex-row bg-gray-100 rounded-t-xl justify-between"
+      >
+        <span
+          v-for="(day, index) in days"
+          :key="index"
+          :class="{
+            'w-9 h-9': size === 'medium',
+            'w-8 h-8': size === 'small',
+          }"
+          class="flex items-center justify-center text-gray-500"
+          >{{ day }}</span
+        >
       </div>
-      <div class="grid grid-cols-7 gap-2 p-2">
+      <div
+        :class="{
+          'gap-2 p-2': size === 'medium',
+          'gap-1 p-1': size === 'small',
+        }"
+        class="grid grid-cols-7"
+      >
         <span
           v-for="(date, index) in dates"
           :key="index"
@@ -181,12 +202,21 @@ const paginate = (action: 'next' | 'prev') => {
             'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
             'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
             'rounded-md bg-brand-50 nc-calendar-today text-brand-500': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
+            'h-9 w-9': size === 'medium',
+            'h-8 w-8': size === 'small',
           }"
-          class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
+          class="px-1 py-1 relative font-medium flex items-center cursor-pointer justify-center"
           data-testid="nc-calendar-date"
           @click="handleSelectDate(date)"
         >
-          <span v-if="isActiveDate(date)" class="absolute z-2 h-1.5 w-1.5 rounded-full bg-brand-500 top-1 right-1"></span>
+          <span
+            v-if="isActiveDate(date)"
+            :class="{
+              'h-1.5 w-1.5': size === 'medium',
+              'h-1 w-1': size === 'small',
+            }"
+            class="absolute z-2 rounded-full bg-brand-500 top-1 right-1"
+          ></span>
           <span class="z-2">
             {{ date.get('date') }}
           </span>
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index d8ac850f1f..250056a115 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -269,18 +269,18 @@ const newRecord = () => {
   emit('newRecord', { row, oldRow: {}, rowMeta: { new: true } })
 }
 
-const height = ref(0)
+const width = ref(0)
 
-const heightListener = () => {
-  height.value = window.innerHeight
+const widthListener = () => {
+  width.value = window.innerWidth
 }
 
 onMounted(() => {
-  window.addEventListener('resize', heightListener)
+  window.addEventListener('resize', widthListener)
 })
 
 onUnmounted(() => {
-  window.removeEventListener('resize', heightListener)
+  window.removeEventListener('resize', widthListener)
 })
 </script>
 
@@ -295,7 +295,8 @@ onUnmounted(() => {
   >
     <div
       :class="{
-        '!hidden': height < 918,
+        '!hidden': width < 1440,
+        'px-4 pt-3 pb-4 ': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
       }"
       class="flex flex-col"
     >
@@ -327,7 +328,7 @@ onUnmounted(() => {
 
     <div
       :class="{
-        '!border-t-0': height < 918,
+        '!border-t-0': width < 1440,
       }"
       class="px-4 border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-3"
     >
@@ -369,9 +370,9 @@ onUnmounted(() => {
         v-if="calendarRange"
         :ref="sideBarListRef"
         :class="{
-          '!h-[calc(100vh-10.5rem)]': height < 918,
-        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && height > 918,
-        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && height > 918,
+          '!h-[calc(100vh-10.5rem)]': width < 1440,
+        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width > 1440,
+        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && width > 1440,
       }"
         class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height"
         data-testid="nc-calendar-side-menu-list"
diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
index 6684ab27af..7f7fdb34b5 100644
--- a/packages/nc-gui/components/smartsheet/calendar/YearView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
@@ -12,7 +12,7 @@ const months = computed(() => {
 
 <template>
   <div
-    class="flex flex-wrap gap-6 pb-4 items-center justify-center overflow-auto nc-scrollbar-md"
+    class="flex flex-wrap gap-3 py-3 items-center justify-center overflow-auto nc-scrollbar-md"
     data-testid="nc-calendar-year-view"
   >
     <NcDateWeekSelector
@@ -21,6 +21,7 @@ const months = computed(() => {
       v-model:active-dates="activeDates"
       v-model:page-date="months[index]"
       v-model:selected-date="selectedDate"
+      size="small"
       class="max-w-[350px]"
       data-testid="nc-calendar-year-view-month-selector"
       disable-pagination
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index f36d3227fa..7a78f2e3f6 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -194,7 +194,14 @@ const headerText = computed(() => {
             </NcButton>
 
             <template #overlay>
-              <div v-if="calendarRangeDropdown" class="min-w-[22.1rem]" @click.stop>
+              <div
+                v-if="calendarRangeDropdown"
+                :class="{
+                  'px-4 pt-3 pb-4 ': activeCalendarView === 'week' || activeCalendarView === 'day',
+                }"
+                class="min-w-[22.1rem]"
+                @click.stop
+              >
                 <NcDateWeekSelector
                   v-if="activeCalendarView === ('day' as const)"
                   v-model:active-dates="activeDates"

From 871a41590f4886134ed6a0de4c0f6fd76b57053c Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sat, 2 Mar 2024 12:01:11 +0000
Subject: [PATCH 2/8] feat(nc-gui): sidebar scroll issue

---
 .../smartsheet/calendar/SideMenu.vue          | 91 ++++++++++---------
 packages/nc-gui/utils/browserUtils.ts         |  2 +-
 2 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index 250056a115..b7791a3031 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -287,15 +287,17 @@ onUnmounted(() => {
 <template>
   <div
     :class="{
-      'w-0': !props.visible,
-      'w-1/6 min-w-[22.1rem] nc-calendar-side-menu-open': props.visible,
+      '!w-0': !props.visible,
+      'min-w-[356px]': width > 1440 && props.visible,
+      'min-w-[264px]': width <= 1440 && props.visible,
+      'nc-calendar-side-menu-open': props.visible,
     }"
     class="h-full border-l-1 border-gray-200 transition-all"
     data-testid="nc-calendar-side-menu"
   >
     <div
       :class="{
-        '!hidden': width < 1440,
+        '!hidden': width <= 1440,
         'px-4 pt-3 pb-4 ': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
       }"
       class="flex flex-col"
@@ -328,11 +330,11 @@ onUnmounted(() => {
 
     <div
       :class="{
-        '!border-t-0': width < 1440,
+        '!border-t-0': width <= 1440,
       }"
-      class="px-4 border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-3"
+      class="border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-3"
     >
-      <div class="flex items-center gap-2">
+      <div class="flex px-4 items-center gap-2">
         <a-input
           v-model:value="searchQuery.value"
           :class="{
@@ -370,11 +372,12 @@ onUnmounted(() => {
         v-if="calendarRange"
         :ref="sideBarListRef"
         :class="{
-          '!h-[calc(100vh-10.5rem)]': width < 1440,
-        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width > 1440,
-        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && width > 1440,
+         '!h-[calc(100vh-10.5rem)]': width <= 1440,
+        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width >= 1440,
+        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && width >= 1440,
+   
       }"
-        class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height"
+        class="nc-scrollbar-md pl-4 pr-4 overflow-y-auto"
         data-testid="nc-calendar-side-menu-list"
         @scroll="sideBarListScrollHandle"
       >
@@ -398,56 +401,58 @@ onUnmounted(() => {
           </div>
         </div>
         <template v-else-if="renderData.length > 0">
-          <LazySmartsheetRow v-for="(record, rowIndex) in renderData" :key="rowIndex" :row="record">
-            <LazySmartsheetCalendarSideRecordCard
-              :draggable="sideBarFilterOption === 'withoutDates' && activeCalendarView !== 'year'"
-              :from-date="
+          <div class="gap-2 flex flex-col">
+            <LazySmartsheetRow v-for="(record, rowIndex) in renderData" :key="rowIndex" :row="record">
+              <LazySmartsheetCalendarSideRecordCard
+                :draggable="sideBarFilterOption === 'withoutDates' && activeCalendarView !== 'year'"
+                :from-date="
                 record.rowMeta.range?.fk_from_col
                   ? calDataType === UITypes.Date
                     ? dayjs(record.row[record.rowMeta.range.fk_from_col.title!]).format('DD MMM')
                     : dayjs(record.row[record.rowMeta.range.fk_from_col.title!]).format('DD MMM•HH:mm A')
                   : null
               "
-              :invalid="
+                :invalid="
                 record.rowMeta.range!.fk_to_col &&
                 dayjs(record.row[record.rowMeta.range!.fk_from_col.title!]).isAfter(
                   dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]),
                 )
               "
-              :row="record"
-              :to-date="
+                :row="record"
+                :to-date="
                 record.rowMeta.range!.fk_to_col
                   ? calDataType === UITypes.Date
                     ? dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]).format('DD MMM')
                     : dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]).format('DD MMM•HH:mm A')
                   : null
               "
-              color="blue"
-              data-testid="nc-sidebar-record-card"
-              @click="emit('expand-record', record)"
-              @dragstart="dragStart($event, record)"
-              @dragover.prevent
-            >
-              <template v-if="!isRowEmpty(record, displayField)">
-                <div :class="{}">
-                  <LazySmartsheetVirtualCell
-                    v-if="isVirtualCol(displayField)"
-                    v-model="record.row[displayField.title]"
-                    :column="displayField"
-                    :row="record"
-                  />
-
-                  <LazySmartsheetCell
-                    v-else
-                    v-model="record.row[displayField.title]"
-                    :column="displayField"
-                    :edit-enabled="false"
-                    :read-only="true"
-                  />
-                </div>
-              </template>
-            </LazySmartsheetCalendarSideRecordCard>
-          </LazySmartsheetRow>
+                color="blue"
+                data-testid="nc-sidebar-record-card"
+                @click="emit('expand-record', record)"
+                @dragstart="dragStart($event, record)"
+                @dragover.prevent
+              >
+                <template v-if="!isRowEmpty(record, displayField)">
+                  <div :class="{}">
+                    <LazySmartsheetVirtualCell
+                      v-if="isVirtualCol(displayField)"
+                      v-model="record.row[displayField.title]"
+                      :column="displayField"
+                      :row="record"
+                    />
+
+                    <LazySmartsheetCell
+                      v-else
+                      v-model="record.row[displayField.title]"
+                      :column="displayField"
+                      :edit-enabled="false"
+                      :read-only="true"
+                    />
+                  </div>
+                </template>
+              </LazySmartsheetCalendarSideRecordCard>
+            </LazySmartsheetRow>
+          </div>
         </template>
       </div>
     </div>
diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts
index 8f2f4b7ec2..22d928e104 100644
--- a/packages/nc-gui/utils/browserUtils.ts
+++ b/packages/nc-gui/utils/browserUtils.ts
@@ -19,6 +19,6 @@ export const getScrollbarWidth = () => {
   outer.appendChild(inner)
 
   const widthWithScroll = inner.offsetWidth
-  outer.parentNode.removeChild(outer)
+  outer?.parentNode?.removeChild(outer)
   return widthNoScroll - widthWithScroll
 }

From 5cd9dbe1f6d59e3e8193f770731e36051df8b872 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sat, 2 Mar 2024 12:01:11 +0000
Subject: [PATCH 3/8] feat(nc-gui): misc issues fix

---
 .../nc-gui/components/smartsheet/calendar/SideRecordCard.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
index 33a90399f9..78340d32cb 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="border-1 cursor-pointer border-gray-200 items-center px-2 py-3 rounded-lg">
-    <div class="flex items-center gap-2">
+    <div class="flex items-center pl-1 gap-2">
       <span
         :class="{
           'bg-maroon-500': props.color === 'maroon',

From cd8e5218d898951c08d7cb0359c2f440c8ad9f5b Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sat, 2 Mar 2024 12:01:11 +0000
Subject: [PATCH 4/8] feat(nc-gui): xsmall calendar

---
 .../nc-gui/components/nc/DateWeekSelector.vue     | 15 +++++++++++----
 .../components/smartsheet/calendar/YearView.vue   |  3 +--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index a1ea8b0a92..618d39b132 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -2,7 +2,7 @@
 import dayjs from 'dayjs'
 
 interface Props {
-  size?: 'small' | 'medium'
+  size?: 'small' | 'medium' | 'xsmall'
   selectedDate?: dayjs.Dayjs | null
   isDisabled?: boolean
   pageDate?: dayjs.Dayjs
@@ -137,7 +137,13 @@ const paginate = (action: 'next' | 'prev') => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <div
+    :class="{
+      'gap-1': size === 'xsmall',
+      'gap-4': size === 'small' || size === 'medium',
+    }"
+    class="flex flex-col"
+  >
     <div
       :class="{
         'justify-center': disablePagination,
@@ -169,6 +175,7 @@ const paginate = (action: 'next' | 'prev') => {
         :class="{
           'gap-1 px-1': size === 'small',
           'gap-2 px-2': size === 'medium',
+          'px-1': size === 'xsmall',
         }"
         class="flex flex-row bg-gray-100 rounded-t-xl justify-between"
       >
@@ -205,7 +212,7 @@ const paginate = (action: 'next' | 'prev') => {
             'h-9 w-9': size === 'medium',
             'h-8 w-8': size === 'small',
           }"
-          class="px-1 py-1 relative font-medium flex items-center cursor-pointer justify-center"
+          class="px-1 py-1 relative border-1 border-transparent font-medium flex items-center cursor-pointer justify-center"
           data-testid="nc-calendar-date"
           @click="handleSelectDate(date)"
         >
@@ -213,7 +220,7 @@ const paginate = (action: 'next' | 'prev') => {
             v-if="isActiveDate(date)"
             :class="{
               'h-1.5 w-1.5': size === 'medium',
-              'h-1 w-1': size === 'small',
+              'h-1 w-1': size === 'small' || size === 'xsmall',
             }"
             class="absolute z-2 rounded-full bg-brand-500 top-1 right-1"
           ></span>
diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
index 7f7fdb34b5..a6901d09bb 100644
--- a/packages/nc-gui/components/smartsheet/calendar/YearView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
@@ -21,8 +21,7 @@ const months = computed(() => {
       v-model:active-dates="activeDates"
       v-model:page-date="months[index]"
       v-model:selected-date="selectedDate"
-      size="small"
-      class="max-w-[350px]"
+      size="xsmall"
       data-testid="nc-calendar-year-view-month-selector"
       disable-pagination
     />

From 5df15aff3425630220b38c39279dd2195626d125 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sat, 2 Mar 2024 12:01:12 +0000
Subject: [PATCH 5/8] feat: configurable year size

---
 .../nc-gui/components/nc/DateWeekSelector.vue | 61 ++++++++++++-------
 .../smartsheet/calendar/YearView.vue          |  6 +-
 .../components/smartsheet/calendar/index.vue  | 34 ++++++++++-
 .../composables/useCalendarViewStore.ts       | 14 ++++-
 4 files changed, 89 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index 618d39b132..a9005b0819 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -2,7 +2,7 @@
 import dayjs from 'dayjs'
 
 interface Props {
-  size?: 'small' | 'medium' | 'xsmall'
+  size?: 'medium' | 'large' | 'small'
   selectedDate?: dayjs.Dayjs | null
   isDisabled?: boolean
   pageDate?: dayjs.Dayjs
@@ -17,7 +17,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  size: 'medium',
+  size: 'large',
   selectedDate: null,
   isDisabled: false,
   isMondayFirst: true,
@@ -139,8 +139,8 @@ const paginate = (action: 'next' | 'prev') => {
 <template>
   <div
     :class="{
-      'gap-1': size === 'xsmall',
-      'gap-4': size === 'small' || size === 'medium',
+      'gap-1': size === 'small',
+      'gap-4': size === 'medium' || size === 'large',
     }"
     class="flex flex-col"
   >
@@ -152,7 +152,7 @@ const paginate = (action: 'next' | 'prev') => {
       class="flex items-center"
     >
       <NcTooltip>
-        <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('prev')">
+        <NcButton v-if="!disablePagination" size="medium" type="secondary" @click="paginate('prev')">
           <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
         </NcButton>
         <template #title>
@@ -160,9 +160,16 @@ const paginate = (action: 'next' | 'prev') => {
         </template>
       </NcTooltip>
 
-      <span class="font-bold text-gray-700">{{ currentMonthYear }}</span>
+      <span
+        :class="{
+          'text-xs': size === 'small',
+          'text-sm': size === 'medium',
+        }"
+        class="font-bold text-gray-700"
+        >{{ currentMonthYear }}</span
+      >
       <NcTooltip>
-        <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('next')">
+        <NcButton v-if="!disablePagination" size="medium" type="secondary" @click="paginate('next')">
           <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
         </NcButton>
         <template #title>
@@ -170,30 +177,38 @@ const paginate = (action: 'next' | 'prev') => {
         </template>
       </NcTooltip>
     </div>
-    <div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
+    <div
+      :class="{
+        'rounded-lg': size === 'small',
+        'rounded-y-xl': size !== 'small',
+      }"
+      class="border-1 border-gray-200 max-w-[320px]"
+    >
       <div
         :class="{
-          'gap-1 px-1': size === 'small',
-          'gap-2 px-2': size === 'medium',
-          'px-1': size === 'xsmall',
+          'gap-1 px-1': size === 'medium',
+          'gap-2 px-2': size === 'large',
+          'px-1 py-1 !rounded-t-lg': size === 'small',
+          'rounded-t-xl': size !== 'small',
         }"
-        class="flex flex-row bg-gray-100 rounded-t-xl justify-between"
+        class="flex flex-row bg-gray-100 justify-between"
       >
         <span
           v-for="(day, index) in days"
           :key="index"
           :class="{
-            'w-9 h-9': size === 'medium',
-            'w-8 h-8': size === 'small',
+            'w-9 h-9': size === 'large',
+            'w-8 h-8': size === 'medium',
+            'text-[10px]': size === 'small',
           }"
-          class="flex items-center justify-center text-gray-500"
+          class="flex items-center uppercase justify-center text-gray-500"
           >{{ day }}</span
         >
       </div>
       <div
         :class="{
-          'gap-2 p-2': size === 'medium',
-          'gap-1 p-1': size === 'small',
+          'gap-2 p-2': size === 'large',
+          'gap-1 p-1': size === 'medium',
         }"
         class="grid grid-cols-7"
       >
@@ -209,18 +224,20 @@ const paginate = (action: 'next' | 'prev') => {
             'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
             'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
             'rounded-md bg-brand-50 nc-calendar-today text-brand-500': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
-            'h-9 w-9': size === 'medium',
-            'h-8 w-8': size === 'small',
+            'h-9 w-9': size === 'large',
+            'h-8 w-8': size === 'medium',
+            'text-xs': size === 'small',
           }"
-          class="px-1 py-1 relative border-1 border-transparent font-medium flex items-center cursor-pointer justify-center"
+          class="px-1 py-1 relative border-1 border-transparent font-large flex items-center cursor-pointer justify-center"
           data-testid="nc-calendar-date"
           @click="handleSelectDate(date)"
         >
           <span
             v-if="isActiveDate(date)"
             :class="{
-              'h-1.5 w-1.5': size === 'medium',
-              'h-1 w-1': size === 'small' || size === 'xsmall',
+              'h-1.5 w-1.5': size === 'large',
+              'h-1 w-1': size === 'medium',
+              'h-0.75 w-0.75': size === 'small',
             }"
             class="absolute z-2 rounded-full bg-brand-500 top-1 right-1"
           ></span>
diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
index a6901d09bb..9f03eaf828 100644
--- a/packages/nc-gui/components/smartsheet/calendar/YearView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { selectedDate, activeDates } = useCalendarViewStoreOrThrow()
+const { selectedDate, activeDates, calendarMetaData } = useCalendarViewStoreOrThrow()
 
 const months = computed(() => {
   const months = []
@@ -8,6 +8,8 @@ const months = computed(() => {
   }
   return months
 })
+
+const size = computed(() => calendarMetaData.value?.meta?.yearViewSize ?? 'small')
 </script>
 
 <template>
@@ -21,7 +23,7 @@ const months = computed(() => {
       v-model:active-dates="activeDates"
       v-model:page-date="months[index]"
       v-model:selected-date="selectedDate"
-      size="xsmall"
+      :size="size"
       data-testid="nc-calendar-year-view-month-selector"
       disable-pagination
     />
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index 7a78f2e3f6..2631767503 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -54,6 +54,7 @@ const {
   pageDate,
   showSideMenu,
   selectedDateRange,
+  updateCalendarMeta,
   paginateCalendarView,
 } = useCalendarViewStoreOrThrow()
 
@@ -165,6 +166,14 @@ const headerText = computed(() => {
       return dayjs(selectedDate.value).format('YYYY')
   }
 })
+
+const updateCalendarSize = async (size: string) => {
+  await updateCalendarMeta({
+    meta: {
+      yearViewSize: size,
+    },
+  })
+}
 </script>
 
 <template>
@@ -242,7 +251,6 @@ const headerText = computed(() => {
             </NcButton>
           </NcTooltip>
           <NcButton
-            v-if="!isMobileMode"
             v-e="`['c:calendar:calendar-${activeCalendarView}-today-btn']`"
             data-testid="nc-calendar-today-btn"
             size="small"
@@ -253,6 +261,30 @@ const headerText = computed(() => {
               {{ $t('activity.goToToday') }}
             </span>
           </NcButton>
+          <NcDropdown v-if="activeCalendarView === 'year'" :auto-close="false" :trigger="['click']">
+            <NcButton
+              v-if="!isMobileMode"
+              v-e="`['c:calendar:calendar-${activeCalendarView}-toggle-sidebar']`"
+              data-testid="nc-calendar-side-bar-btn"
+              size="small"
+              type="secondary"
+            >
+              Calendar Size
+            </NcButton>
+            <template #overlay>
+              <NcMenu>
+                <NcMenuItem
+                  v-for="size in ['small', 'medium', 'large']"
+                  :key="size"
+                  class="capitalize"
+                  data-testid="nc-calendar-view-size"
+                  @click="updateCalendarSize(size)"
+                >
+                  {{ size }}
+                </NcMenuItem>
+              </NcMenu>
+            </template>
+          </NcDropdown>
           <span class="opacity-0" data-testid="nc-active-calendar-view">
             {{ activeCalendarView }}
           </span>
diff --git a/packages/nc-gui/composables/useCalendarViewStore.ts b/packages/nc-gui/composables/useCalendarViewStore.ts
index 432ba3554a..b780843743 100644
--- a/packages/nc-gui/composables/useCalendarViewStore.ts
+++ b/packages/nc-gui/composables/useCalendarViewStore.ts
@@ -620,11 +620,23 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     async function updateCalendarMeta(updateObj: Partial<CalendarType>) {
       if (!viewMeta?.value?.id || !isUIAllowed('dataEdit') || isPublic.value) return
+
+      const updateValue = {
+        ...(typeof calendarMetaData.value.meta === 'string'
+          ? JSON.parse(calendarMetaData.value.meta)
+          : calendarMetaData.value.meta),
+        ...(typeof updateObj.meta === 'string' ? JSON.parse(updateObj.meta) : updateObj.meta),
+      }
+
       try {
-        await $api.dbView.calendarUpdate(viewMeta.value.id, updateObj)
+        await $api.dbView.calendarUpdate(viewMeta.value.id, {
+          ...updateObj,
+          meta: JSON.stringify(updateValue),
+        })
         calendarMetaData.value = {
           ...calendarMetaData.value,
           ...updateObj,
+          meta: updateValue,
         }
       } catch (e) {
         message.error('Error updating changes')

From 62ec989dc1b3d643e1020bb43cd282cb8361d733 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sat, 2 Mar 2024 12:01:12 +0000
Subject: [PATCH 6/8] feat: update size

---
 packages/nc-gui/components/nc/DateWeekSelector.vue  | 4 +++-
 packages/nc-gui/components/nc/MonthYearSelector.vue | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index a9005b0819..b5ca5504b1 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -220,6 +220,8 @@ const paginate = (action: 'next' | 'prev') => {
             'bg-brand-50 border-1 !border-brand-500': isSelectedDate(date) && !isWeekPicker && isDayInPagedMonth(date),
             'hover:(border-1 border-gray-200 bg-gray-100)': !isSelectedDate(date) && !isWeekPicker,
             'nc-selected-week z-1': isDateInSelectedWeek(date) && isWeekPicker,
+            'border-none': isWeekPicker,
+            'border-transparent': !isWeekPicker,
             'text-gray-400': !isDateInCurrentMonth(date),
             'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
             'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
@@ -228,7 +230,7 @@ const paginate = (action: 'next' | 'prev') => {
             'h-8 w-8': size === 'medium',
             'text-xs': size === 'small',
           }"
-          class="px-1 py-1 relative border-1 border-transparent font-large flex items-center cursor-pointer justify-center"
+          class="px-1 py-1 relative border-1 font-large flex items-center cursor-pointer justify-center"
           data-testid="nc-calendar-date"
           @click="handleSelectDate(date)"
         >
diff --git a/packages/nc-gui/components/nc/MonthYearSelector.vue b/packages/nc-gui/components/nc/MonthYearSelector.vue
index c5c2b94346..a012817551 100644
--- a/packages/nc-gui/components/nc/MonthYearSelector.vue
+++ b/packages/nc-gui/components/nc/MonthYearSelector.vue
@@ -114,7 +114,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
             :class="{
               '!bg-brand-50 border-1 !border-brand-500': isMonthSelected(month),
             }"
-            class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-500 cursor-pointer"
+            class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-900 cursor-pointer"
             @click="selectedDate = month"
           >
             {{ month.format('MMM') }}
@@ -127,7 +127,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
             :class="{
               '!bg-brand-50 !border-1 !border-brand-500': compareYear(year, selectedDate),
             }"
-            class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-500 cursor-pointer"
+            class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-900 cursor-pointer"
             @click="selectedDate = year"
           >
             {{ year.format('YYYY') }}

From fb48f589685e51625805a17e21138cd039c3a4df Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sat, 2 Mar 2024 12:01:12 +0000
Subject: [PATCH 7/8] fix(nc-gui): modified widths

---
 packages/nc-gui/components/nc/DateWeekSelector.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index b5ca5504b1..10817907e7 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -188,7 +188,7 @@ const paginate = (action: 'next' | 'prev') => {
         :class="{
           'gap-1 px-1': size === 'medium',
           'gap-2 px-2': size === 'large',
-          'px-1 py-1 !rounded-t-lg': size === 'small',
+          'px-2 py-1 !rounded-t-lg': size === 'small',
           'rounded-t-xl': size !== 'small',
         }"
         class="flex flex-row bg-gray-100 justify-between"
@@ -202,7 +202,7 @@ const paginate = (action: 'next' | 'prev') => {
             'text-[10px]': size === 'small',
           }"
           class="flex items-center uppercase justify-center text-gray-500"
-          >{{ day }}</span
+          >{{ size === 'small' ? day[0] : day }}</span
         >
       </div>
       <div
@@ -228,7 +228,7 @@ const paginate = (action: 'next' | 'prev') => {
             'rounded-md bg-brand-50 nc-calendar-today text-brand-500': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
             'h-9 w-9': size === 'large',
             'h-8 w-8': size === 'medium',
-            'text-xs': size === 'small',
+            'h-6 w-6 text-[10px]': size === 'small',
           }"
           class="px-1 py-1 relative border-1 font-large flex items-center cursor-pointer justify-center"
           data-testid="nc-calendar-date"
@@ -240,8 +240,10 @@ const paginate = (action: 'next' | 'prev') => {
               'h-1.5 w-1.5': size === 'large',
               'h-1 w-1': size === 'medium',
               'h-0.75 w-0.75': size === 'small',
+              'top-1 right-1': size != 'small',
+              'top-0.5 right-0.5': size === 'small',
             }"
-            class="absolute z-2 rounded-full bg-brand-500 top-1 right-1"
+            class="absolute z-2 rounded-full bg-brand-500"
           ></span>
           <span class="z-2">
             {{ date.get('date') }}

From abf25dd0d09d9bfb1f4612e628906c6356f4333a Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sat, 2 Mar 2024 12:01:12 +0000
Subject: [PATCH 8/8] fix(nc-gui): change size automatically

---
 .../nc-gui/components/nc/DateWeekSelector.vue |  4 +-
 .../smartsheet/calendar/YearView.vue          | 51 +++++++++++++------
 .../components/smartsheet/calendar/index.vue  | 33 ------------
 3 files changed, 37 insertions(+), 51 deletions(-)

diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index 10817907e7..63e1a6fb09 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -202,7 +202,7 @@ const paginate = (action: 'next' | 'prev') => {
             'text-[10px]': size === 'small',
           }"
           class="flex items-center uppercase justify-center text-gray-500"
-          >{{ size === 'small' ? day[0] : day }}</span
+          >{{ day[0] }}</span
         >
       </div>
       <div
@@ -240,7 +240,7 @@ const paginate = (action: 'next' | 'prev') => {
               'h-1.5 w-1.5': size === 'large',
               'h-1 w-1': size === 'medium',
               'h-0.75 w-0.75': size === 'small',
-              'top-1 right-1': size != 'small',
+              'top-1 right-1': size !== 'small',
               'top-0.5 right-0.5': size === 'small',
             }"
             class="absolute z-2 rounded-full bg-brand-500"
diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
index 9f03eaf828..f5dfe08944 100644
--- a/packages/nc-gui/components/smartsheet/calendar/YearView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { selectedDate, activeDates, calendarMetaData } = useCalendarViewStoreOrThrow()
+const { selectedDate, activeDates } = useCalendarViewStoreOrThrow()
 
 const months = computed(() => {
   const months = []
@@ -9,24 +9,43 @@ const months = computed(() => {
   return months
 })
 
-const size = computed(() => calendarMetaData.value?.meta?.yearViewSize ?? 'small')
+const calendarContainer = ref<HTMLElement | null>(null)
+
+const { width } = useWindowSize()
+
+const size = ref('small')
+
+const handleResize = () => {
+  if (width.value < 1608) {
+    size.value = 'small'
+  } else if (width.value < 2000) {
+    size.value = 'medium'
+  } else {
+    size.value = 'large'
+  }
+}
+
+onMounted(() => {
+  handleResize()
+})
+
+watch(width, handleResize)
 </script>
 
 <template>
-  <div
-    class="flex flex-wrap gap-3 py-3 items-center justify-center overflow-auto nc-scrollbar-md"
-    data-testid="nc-calendar-year-view"
-  >
-    <NcDateWeekSelector
-      v-for="(_, index) in months"
-      :key="index"
-      v-model:active-dates="activeDates"
-      v-model:page-date="months[index]"
-      v-model:selected-date="selectedDate"
-      :size="size"
-      data-testid="nc-calendar-year-view-month-selector"
-      disable-pagination
-    />
+  <div ref="calendarContainer" class="overflow-auto flex my-3 justify-center nc-scrollbar-md">
+    <div class="grid grid-cols-4 justify-items-center gap-3" data-testid="nc-calendar-year-view">
+      <NcDateWeekSelector
+        v-for="(_, index) in months"
+        :key="index"
+        v-model:active-dates="activeDates"
+        v-model:page-date="months[index]"
+        v-model:selected-date="selectedDate"
+        :size="size"
+        data-testid="nc-calendar-year-view-month-selector"
+        disable-pagination
+      />
+    </div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index 2631767503..89008f8669 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -54,7 +54,6 @@ const {
   pageDate,
   showSideMenu,
   selectedDateRange,
-  updateCalendarMeta,
   paginateCalendarView,
 } = useCalendarViewStoreOrThrow()
 
@@ -166,14 +165,6 @@ const headerText = computed(() => {
       return dayjs(selectedDate.value).format('YYYY')
   }
 })
-
-const updateCalendarSize = async (size: string) => {
-  await updateCalendarMeta({
-    meta: {
-      yearViewSize: size,
-    },
-  })
-}
 </script>
 
 <template>
@@ -261,30 +252,6 @@ const updateCalendarSize = async (size: string) => {
               {{ $t('activity.goToToday') }}
             </span>
           </NcButton>
-          <NcDropdown v-if="activeCalendarView === 'year'" :auto-close="false" :trigger="['click']">
-            <NcButton
-              v-if="!isMobileMode"
-              v-e="`['c:calendar:calendar-${activeCalendarView}-toggle-sidebar']`"
-              data-testid="nc-calendar-side-bar-btn"
-              size="small"
-              type="secondary"
-            >
-              Calendar Size
-            </NcButton>
-            <template #overlay>
-              <NcMenu>
-                <NcMenuItem
-                  v-for="size in ['small', 'medium', 'large']"
-                  :key="size"
-                  class="capitalize"
-                  data-testid="nc-calendar-view-size"
-                  @click="updateCalendarSize(size)"
-                >
-                  {{ size }}
-                </NcMenuItem>
-              </NcMenu>
-            </template>
-          </NcDropdown>
           <span class="opacity-0" data-testid="nc-active-calendar-view">
             {{ activeCalendarView }}
           </span>