fix(nc-gui): calendar mode in small display

packages/nc-gui/components/smartsheet/Toolbar.vue

@@ -18,12 +18,29 @@ const { isViewsLoading } = storeToRefs(useViewsStore())
 
 const { isMobileMode } = useGlobal()
 
+const containerRef = ref<HTMLElement>()
+
+const isTab = ref(true)
+
+const handleResize = () => {
+  isTab.value = containerRef.value.offsetWidth > 810
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
 const { allowCSVDownload } = useSharedView()
 </script>
 
 <template>
   <div
     v-if="!isMobileMode || !isCalendar"
+    ref="containerRef"
     class="nc-table-toolbar relative py-1 px-2.25 xs:(px-1) flex gap-2 items-center border-b border-gray-200 overflow-hidden xs:(min-h-14) max-h-[var(--topbar-height)] min-h-[var(--topbar-height)] z-7"
   >
     <template v-if="isViewsLoading">
@@ -46,11 +63,10 @@ const { allowCSVDownload } = useSharedView()
 
       <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban || isCalendar" />
 
-      <div v-if="isCalendar" class="flex-1" />
+      <div v-if="isCalendar && isTab" class="flex-1" />
+      <LazySmartsheetToolbarCalendarMode v-if="isCalendar" v-model:tab="isTab" />
 
       <template v-if="!isMobileMode">
-        <LazySmartsheetToolbarCalendarMode v-if="isCalendar" />
-
         <LazySmartsheetToolbarRowHeight v-if="isGrid" />
 
         <!-- <LazySmartsheetToolbarQrScannerButton v-if="isMobileMode && (isGrid || isKanban || isGallery)" /> -->

packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import { useCalendarViewStoreOrThrow } from '#imports'
 
+const props = defineProps<{
+  tab?: boolean
+}>()
+
 const { changeCalendarView, activeCalendarView } = useCalendarViewStoreOrThrow()
 
 const highlightStyle = ref({ left: '0px' })
@@ -20,7 +24,7 @@ onMounted(() => {
 </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 v-if="props.tab" 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 :style="highlightStyle" class="highlight"></div>
     <div
       v-for="mode in ['day', 'week', 'month', 'year']"
@@ -32,6 +36,21 @@ onMounted(() => {
       <div class="tab-title nc-tab">{{ $t(`objects.${mode}`) }}</div>
     </div>
   </div>
+  <div v-else>
+    <NcDropdown trigger="click">
+      <NcButton size="small" type="secondary">
+        {{ $t(`objects.${activeCalendarView}`) }}
+        <component :is="iconMap.arrowDown" />
+      </NcButton>
+      <template #overlay>
+        <NcMenu>
+          <NcMenuItem v-for="mode in ['day', 'week', 'month', 'year']" :key="mode" @click="changeCalendarView(mode)">
+            {{ $t(`objects.${mode}`) }}
+          </NcMenuItem>
+        </NcMenu>
+      </template>
+    </NcDropdown>
+  </div>
 </template>
 
 <style lang="scss" scoped>