fix(nc-gui): enable calendar. update error handling

packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue

@@ -155,10 +155,7 @@ async function onOpenModal({
             <GeneralIcon v-else class="plus" icon="plus" />
           </div>
         </NcMenuItem>
-        <NcMenuItem
-          data-testid="sidebar-view-create-calendar"
-          @click="onOpenModal({ type: ViewTypes.CALENDAR })"
-        >
+        <NcMenuItem data-testid="sidebar-view-create-calendar" @click="onOpenModal({ type: ViewTypes.CALENDAR })">
           <div class="item">
             <div class="item-inner">
               <GeneralViewIcon :meta="{ type: ViewTypes.CALENDAR }" />

packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

@@ -369,7 +369,7 @@ onUnmounted(() => {
       </div>
 
       <div
-        v-if="calendarRange"
+        v-if="calendarRange?.length"
         :ref="sideBarListRef"
         :class="{
          '!h-[calc(100vh-10.5rem)]': width <= 1440,
@@ -440,6 +440,17 @@ onUnmounted(() => {
           </div>
         </template>
       </div>
+      <div
+        v-else
+        :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,
+      }"
+        class="flex items-center justify-center h-full"
+      >
+        {{ $t('activity.noRange') }}
+      </div>
     </div>
   </div>
 </template>

packages/nc-gui/components/smartsheet/calendar/index.vue

@@ -282,7 +282,7 @@ const headerText = computed(() => {
           </NcButton>
         </NcTooltip>
       </div>
-      <template v-if="calendarRange">
+      <template v-if="calendarRange?.length">
         <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" />
         <template v-if="!isCalendarDataLoading">
           <LazySmartsheetCalendarMonthView

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

@@ -44,7 +44,7 @@ watch(activeCalendarView, () => {
     <div
       v-for="mode in ['day', 'week', 'month', 'year']"
       :key="mode"
-      v-e="`['c:calendar:change-calendar-range-${mode}']`"
+      v-e="`['c:calendar:change-calendar-view-${mode}']`"
       :class="{ active: activeCalendarView === mode }"
       :data-testid="`nc-calendar-view-mode-${mode}`"
       class="tab"
@@ -64,7 +64,7 @@ watch(activeCalendarView, () => {
           <NcMenuItem
             v-for="mode in ['day', 'week', 'month', 'year']"
             :key="mode"
-            v-e="`['c:calendar:change-calendar-range-${mode}']`"
+            v-e="`['c:calendar:change-calendar-view-${mode}']`"
             @click="changeCalendarView(mode)"
           >
             {{ $t(`objects.${mode}`) }}

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

@@ -92,15 +92,14 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
       })) ?? []
   )
 })
-
-/* const addCalendarRange = async () => {
+const addCalendarRange = async () => {
   _calendar_ranges.value.push({
     fk_from_column_id: dateFieldOptions.value![0].value as string,
     fk_to_column_id: null,
   })
   await saveCalendarRanges()
 }
-
+/*
 const removeRange = async (id: number) => {
   _calendar_ranges.value = _calendar_ranges.value.filter((_, i) => i !== id)
   await saveCalendarRanges()
@@ -215,10 +214,17 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
           </NcButton>
             -->
         </div>
-        <!--        <NcButton class="mt-2" data-testid="nc-calendar-range-add-btn" size="small" type="secondary" @click="addCalendarRange">
+        <NcButton
+          v-if="_calendar_ranges.length === 0"
+          class="mt-2"
+          data-testid="nc-calendar-range-add-btn"
+          size="small"
+          type="secondary"
+          @click="addCalendarRange"
+        >
           <component :is="iconMap.plus" />
-          Add another date field
-        </NcButton> -->
+          Add date field
+        </NcButton>
       </div>
     </template>
   </NcDropdown>

packages/nc-gui/composables/useCalendarViewStore.ts

@@ -312,7 +312,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
     })
 
     async function loadMoreSidebarData(params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) {
-      if ((!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic.value) return
+      if (((!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic.value) || !calendarRange.value?.length)
+        return
       if (isSidebarLoading.value) return
       try {
         const response = !isPublic.value
@@ -339,7 +340,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
     }
 
     const fetchActiveDates = async () => {
-      if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id || !calendarRange.value) return
+      if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id || !calendarRange.value?.length) return
       let prevDate: dayjs.Dayjs | string | null = null
       let nextDate: dayjs.Dayjs | string | null = null
       let fromDate: dayjs.Dayjs | string | null = null
@@ -433,7 +434,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
     }
 
     async function loadCalendarData(showLoading = true) {
-      if ((!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic?.value) return
+      if (((!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic?.value) || !calendarRange.value?.length)
+        return
 
       if (activeCalendarView.value === 'year') {
         return
@@ -593,7 +595,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
     }
 
     const loadSidebarData = async (showLoading = true) => {
-      if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) return
+      if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id || !calendarRange.value?.length) return
       try {
         if (showLoading) isSidebarLoading.value = true
         const res = !isPublic.value

packages/nocodb/src/services/calendar-datas.service.ts

@@ -136,9 +136,9 @@ export class CalendarDatasService {
     if (view.type !== ViewTypes.CALENDAR)
       NcError.badRequest('View is not a calendar view');
 
-    const { ranges } = await CalendarRange.read(view.id);
+    const ranges = await CalendarRange.read(view.id);
 
-    if (!ranges.length) NcError.badRequest('No ranges found');
+    if (!ranges?.ranges.length) NcError.badRequest('No ranges found');
 
     const filterArr = await this.buildFilterArr({
       viewId,
@@ -165,7 +165,7 @@ export class CalendarDatasService {
 
     const columns = await model.getColumns();
 
-    ranges.forEach((range: CalendarRangeType) => {
+    ranges?.ranges?.forEach((range: CalendarRangeType) => {
       const fromCol = columns.find(
         (c) => c.id === range.fk_from_column_id,
       )?.title;
@@ -203,7 +203,7 @@ export class CalendarDatasService {
       children: [],
     };
 
-    calendarRange.ranges.forEach((range: CalendarRange) => {
+    calendarRange?.ranges.forEach((range: CalendarRange) => {
       const fromColumn = range.fk_from_column_id;
       let rangeFilter: any = [];
       if (fromColumn) {