feat(nc-gui): calendar mode tab

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

@@ -23,7 +23,7 @@ const { allowCSVDownload } = useSharedView()
 
 <template>
   <div
-    class="nc-table-toolbar 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"
+    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">
       <a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" />
@@ -42,7 +42,11 @@ const { allowCSVDownload } = useSharedView()
 
       <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban || isCalendar" />
 
+      <div v-if="isCalendar" class="flex-1" />
+
       <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

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+
+const activeCalendarMode = ref<'day' | 'week' | 'month' | 'year'>('week' as const);
+
+const setActiveCalendarMode = (mode: 'day' | 'week' | 'month' | 'year') => {
+  activeCalendarMode.value = mode;
+};
+
+</script>
+
+<template>
+  <div class="flex flex-row p-1 mx-3 mt-3 mb-3 bg-gray-100 rounded-lg gap-x-0.5 nc-calendar-mode-tab">
+    <div
+        :class="{ active: activeCalendarMode === 'day' }"
+        class="tab"
+        @click="setActiveCalendarMode('day')"
+    >
+      <div class="tab-title nc-tab">{{ $t('objects.day') }}</div>
+    </div>
+    <div
+        :class="{ active: activeCalendarMode === 'week' }"
+        class="tab"
+        @click="setActiveCalendarMode('week')"
+    >
+      <div class="tab-title nc-tab">{{ $t('objects.week') }}</div>
+    </div>
+    <div
+        :class="{ active: activeCalendarMode === 'month' }"
+        class="tab"
+        @click="setActiveCalendarMode('month')"
+    >
+      <div class="tab-title nc-tab">{{ $t('objects.month') }}</div>
+    </div>
+    <div
+        :class="{ active: activeCalendarMode === 'year' }"
+        class="tab"
+        @click="setActiveCalendarMode('year')"
+    >
+      <div class="tab-title nc-tab">{{ $t('objects.year') }}</div>
+    </div>
+  </div>
+
+</template>
+
+<style lang="scss" scoped>
+
+.tab {
+  @apply flex flex-row items-center h-7.5 w-20 justify-center px-2 py-1 bg-gray-100 rounded-lg gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none;
+}
+
+.tab .tab-title {
+  @apply min-w-0;
+  word-break: 'keep-all';
+  white-space: 'nowrap';
+  display: 'inline';
+  line-height: 0.95;
+}
+
+.active {
+  @apply bg-white shadow text-black;
+}
+
+.nc-calendar-mode-tab {
+  @apply -ml-120;
+}
+
+</style>

packages/nc-gui/lang/en.json

@@ -195,6 +195,10 @@
     "restore": "Restore"
   },
   "objects": {
+    "day": "Day",
+    "week": "Week",
+    "month": "Month",
+    "year": "Year",
     "workspace": "Workspace",
     "workspaces": "Workspaces",
     "project": "Base",