From 2b2edec9df3b417ad580e3f44a196a4cd004b142 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:14 +0000
Subject: [PATCH] fix(nc-gui): refactor remove Dates & use dayjs

---
 .../nc-gui/components/nc/DateWeekSelector.vue | 52 ++++++------
 .../components/nc/MonthYearSelector.vue       | 42 +++++-----
 .../calendar/DayView/DateTimeField.vue        |  9 ++-
 .../smartsheet/calendar/MonthView.vue         | 25 +++---
 .../smartsheet/calendar/VRecordCard.vue       |  1 -
 .../calendar/WeekView/DateTimeField.vue       | 16 ++--
 .../smartsheet/calendar/YearView.vue          |  2 +-
 .../composables/useCalendarViewStore.ts       | 80 +++++++++----------
 8 files changed, 111 insertions(+), 116 deletions(-)

diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index 4810e284c9..e28e966788 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
 interface Props {
-  selectedDate?: Date | null
+  selectedDate?: dayjs.Dayjs | null
   isDisabled?: boolean
-  pageDate?: Date
-  activeDates?: Array<Date>
+  pageDate?: dayjs.Dayjs
+  activeDates?: Array<dayjs.Dayjs>
   isMondayFirst?: boolean
   weekPicker?: boolean
   disablePagination?: boolean
   selectedWeek?: {
-    start: Date
-    end: Date
+    start: dayjs.Dayjs
+    end: dayjs.Dayjs
   } | null
 }
 
@@ -18,10 +18,10 @@ const props = withDefaults(defineProps<Props>(), {
   selectedDate: null,
   isDisabled: false,
   isMondayFirst: true,
-  pageDate: new Date(),
+  pageDate: dayjs(),
   weekPicker: false,
   disablePagination: false,
-  activeDates: [],
+  activeDates: [] as Array<dayjs.Dayjs>,
   selectedWeek: null,
 })
 const emit = defineEmits(['change', 'update:selectedDate', 'update:pageDate', 'update:selectedWeek'])
@@ -41,17 +41,17 @@ const days = computed(() => {
 
 // Used to display the current month and year
 const currentMonth = computed(() => {
-  return `${pageDate.value.toLocaleString('default', { month: 'long' })} ${pageDate.value.getFullYear()}`
+  return dayjs(pageDate.value).format('MMMM YYYY')
 })
 
 const selectWeek = (date: dayjs.Dayjs) => {
   if (!date) return
   const dayOffset = props.isMondayFirst ? 1 : 0
-  const dayOfWeek = (date.get('day') - dayOffset + 7) % 7
+  const dayOfWeek = (date.day() - dayOffset + 7) % 7
   const startDate = date.subtract(dayOfWeek, 'day')
   selectedWeek.value = {
-    start: startDate.toDate(),
-    end: startDate.endOf('week').toDate(),
+    start: startDate,
+    end: startDate.endOf('week'),
   }
 }
 
@@ -91,7 +91,7 @@ const isSelectedDate = (dObj: dayjs.Dayjs) => {
 }
 
 const isDayInPagedMonth = (date: dayjs.Dayjs) => {
-  return date.month() === pageDate.value.getMonth()
+  return date.month() === dayjs(pageDate.value).month()
 }
 
 // Since we are using the same component for week picker and date picker we need to handle the date selection differently
@@ -100,22 +100,22 @@ const handleSelectDate = (date: dayjs.Dayjs) => {
     selectWeek(date)
   } else {
     if (!isDayInPagedMonth(date)) {
-      pageDate.value = date.toDate()
-      emit('update:pageDate', date.toDate())
+      pageDate.value = date
+      emit('update:pageDate', date)
     }
-    selectedDate.value = date.toDate()
-    emit('update:selectedDate', date.toDate())
+    selectedDate.value = date
+    emit('update:selectedDate', date)
   }
 }
 
 // Used to check if a date is in the current month
 const isDateInCurrentMonth = (date: dayjs.Dayjs) => {
-  return date.month() === pageDate.value.getMonth()
+  return date.month() === dayjs(pageDate.value).month()
 }
 
 // Used to Check if an event is in the date
 const isActiveDate = (date: dayjs.Dayjs) => {
-  return activeDates.value.some((d) => isSameDate(dayjs(d), date))
+  return activeDates.value.some((d) => isSameDate(d, date))
 }
 
 // Paginate the calendar
@@ -126,8 +126,8 @@ const paginate = (action: 'next' | 'prev') => {
   } else {
     newDate = newDate.subtract(1, 'month').clone()
   }
-  pageDate.value = newDate.toDate()
-  emit('update:pageDate', newDate.toDate())
+  pageDate.value = newDate
+  emit('update:pageDate', newDate)
 }
 </script>
 
@@ -161,20 +161,22 @@ const paginate = (action: 'next' | 'prev') => {
     </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 p-2">
-        <span v-for="day in days" :key="day" class="h-9 flex items-center justify-center w-9 text-gray-500">{{ day }}</span>
+        <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>
       <div class="grid grid-cols-7 gap-2 p-2">
         <span
-          v-for="date in dates"
-          :key="date"
+          v-for="(date, index) in dates"
+          :key="index"
           :class="{
             'rounded-lg': !weekPicker,
             'bg-brand-50 border-2 !border-brand-500': isSelectedDate(date) && !weekPicker && isDayInPagedMonth(date),
             'hover:(border-1 border-gray-200 bg-gray-100)': !isSelectedDate(date) && !weekPicker,
             'nc-selected-week z-1': isDateInSelectedWeek(date) && weekPicker,
             'text-gray-400': !isDateInCurrentMonth(date),
-            'nc-selected-week-start': isSameDate(date, dayjs(selectedWeek?.start)),
-            'nc-selected-week-end': isSameDate(date, dayjs(selectedWeek?.end)),
+            'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
+            'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
             'rounded-md bg-brand-50 text-brand-500': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
           }"
           class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
diff --git a/packages/nc-gui/components/nc/MonthYearSelector.vue b/packages/nc-gui/components/nc/MonthYearSelector.vue
index 9f53a312e6..dae6411e89 100644
--- a/packages/nc-gui/components/nc/MonthYearSelector.vue
+++ b/packages/nc-gui/components/nc/MonthYearSelector.vue
@@ -2,24 +2,24 @@
 import dayjs from 'dayjs'
 
 interface Props {
-  selectedDate?: Date | null
+  selectedDate?: dayjs.Dayjs | null
   isDisabled?: boolean
-  pageDate?: Date
+  pageDate?: dayjs.Dayjs
   yearPicker?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   selectedDate: null,
   isDisabled: false,
-  pageDate: new Date(),
+  pageDate: dayjs(),
   yearPicker: false,
 })
 const emit = defineEmits(['update:selectedDate', 'update:pageDate'])
-const pageDate = useVModel(props, 'pageDate', emit)
-const selectedDate = useVModel(props, 'selectedDate', emit)
+const pageDate = useVModel<dayjs.Dayjs>(props, 'pageDate', emit)
+const selectedDate = useVModel<dayjs.Dayjs>(props, 'selectedDate', emit)
 
 const years = computed(() => {
-  const date = dayjs(pageDate.value)
+  const date = pageDate.value
   const startOfYear = date.startOf('year')
   const years: dayjs.Dayjs[] = []
   for (let i = 0; i < 12; i++) {
@@ -28,16 +28,10 @@ const years = computed(() => {
   return years
 })
 
-const currentYear = computed(() => {
-  return pageDate.value.getFullYear()
-})
-
 const months = computed(() => {
-  const date = dayjs(pageDate.value)
-
   const months: dayjs.Dayjs[] = []
   for (let i = 0; i < 12; i++) {
-    months.push(date.set('month', i))
+    months.push(pageDate.value.set('month', i))
   }
   return months
 })
@@ -48,19 +42,19 @@ const compareDates = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
 }
 
 const isMonthSelected = (date: dayjs.Dayjs) => {
-  if (!selectedDate.value) return false
-  return compareDates(date, dayjs(selectedDate.value))
+  if (!dayjs(selectedDate.value).isValid()) return false
+  return compareDates(date, selectedDate.value)
 }
 
 const paginateMonth = (action: 'next' | 'prev') => {
-  let date = dayjs(pageDate.value)
+  let date = pageDate.value
   if (action === 'next') {
     date = date.add(1, 'year')
   } else {
     date = date.subtract(1, 'year')
   }
-  pageDate.value = date.toDate()
-  emit('update:pageDate', date.toDate())
+  pageDate.value = date
+  emit('update:pageDate', date)
 }
 
 const paginateYear = (action: 'next' | 'prev') => {
@@ -70,8 +64,8 @@ const paginateYear = (action: 'next' | 'prev') => {
   } else {
     date = date.subtract(12, 'year').clone()
   }
-  pageDate.value = date.toDate()
-  emit('update:pageDate', date.toDate())
+  pageDate.value = date
+  emit('update:pageDate', date)
 }
 
 const paginate = (action: 'next' | 'prev') => {
@@ -99,7 +93,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
           <span>{{ $t('labels.previousYear') }}</span>
         </template>
       </NcTooltip>
-      <span class="font-bold text-gray-700">{{ yearPicker ? 'Select Year' : currentYear }}</span>
+      <span class="font-bold text-gray-700">{{ yearPicker ? 'Select Year' : pageDate.year() }}</span>
       <NcTooltip>
         <NcButton size="small" type="secondary" @click="paginate('next')">
           <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
@@ -119,7 +113,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
               '!bg-brand-50 !border-2 !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"
-            @click="selectedDate = month.toDate()"
+            @click="selectedDate = month"
           >
             {{ month.format('MMM') }}
           </span>
@@ -129,10 +123,10 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
             v-for="(year, id) in years"
             :key="id"
             :class="{
-              '!bg-brand-50 !border-2 !border-brand-500': compareYear(year, dayjs(selectedDate)),
+              '!bg-brand-50 !border-2 !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"
-            @click="selectedDate = year.toDate()"
+            @click="selectedDate = year"
           >
             {{ year.format('YYYY') }}
           </span>
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 57f2112d98..4d6ab72978 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -17,6 +17,8 @@ const { selectedDate, selectedTime, formattedData, calendarRange, formattedSideB
 
 const hours = computed(() => {
   const hours: Array<dayjs.Dayjs> = []
+  const _selectedDate = dayjs(selectedDate.value)
+
   for (let i = 0; i < 24; i++) {
     hours.push(
       dayjs()
@@ -24,9 +26,9 @@ const hours = computed(() => {
         .minute(0)
         .second(0)
         .millisecond(0)
-        .year(selectedDate.value.getFullYear() || dayjs().year())
-        .month(selectedDate.value.getMonth() || dayjs().month())
-        .date(selectedDate.value.getDate() || dayjs().date()),
+        .year(_selectedDate.year())
+        .month(_selectedDate.month())
+        .date(_selectedDate.date()),
     )
   }
   return hours
@@ -639,7 +641,6 @@ const dragStart = (event: MouseEvent, record: Row) => {
               :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
               color="blue"
-              size="auto"
               @resize-start="onResizeStart"
             />
           </LazySmartsheetRow>
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index f2c6ab4c0e..39638c3708 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
-import { UITypes } from 'nocodb-sdk'
 
 import type { Row } from '#imports'
 
@@ -35,8 +34,8 @@ const calendarGridContainer = ref()
 
 const { width: gridContainerWidth, height: gridContainerHeight } = useElementSize(calendarGridContainer)
 
-const isDayInPagedMonth = (date: Date) => {
-  return date.getMonth() === selectedMonth.value.getMonth()
+const isDayInPagedMonth = (date: dayjs.Dayjs) => {
+  return date.month() === selectedMonth.value.month()
 }
 
 const dragElement = ref<HTMLElement | null>(null)
@@ -50,14 +49,14 @@ const dragRecord = ref<Row>()
 const hoverRecord = ref<string | null>()
 const dragTimeout = ref<ReturnType<typeof setTimeout>>()
 
-const focusedDate = ref<Date | null>(null)
+const focusedDate = ref<dayjs.Dayjs | null>(null)
 
 const resizeDirection = ref<'right' | 'left'>()
 const resizeRecord = ref<Row>()
 
 const dates = computed(() => {
-  const startOfMonth = dayjs(selectedMonth.value).startOf('month')
-  const endOfMonth = dayjs(selectedMonth.value).endOf('month')
+  const startOfMonth = selectedMonth.value.startOf('month')
+  const endOfMonth = selectedMonth.value.endOf('month')
 
   const firstDayToDisplay = startOfMonth.startOf('week').add(isMondayFirst.value ? 0 : -1, 'day')
   const lastDayToDisplay = endOfMonth.endOf('week').add(isMondayFirst.value ? 0 : -1, 'day')
@@ -71,7 +70,7 @@ const dates = computed(() => {
   for (let week = 0; week < numberOfRows; week++) {
     const weekArray = []
     for (let day = 0; day < 7; day++) {
-      weekArray.push(currentDay.toDate())
+      weekArray.push(currentDay)
       currentDay = currentDay.add(1, 'day')
     }
     weeksArray.push(weekArray)
@@ -669,7 +668,7 @@ const dropEvent = (event: DragEvent) => {
   }
 }
 
-const selectDate = (date: Date) => {
+const selectDate = (date: dayjs.Dayjs) => {
   dragRecord.value = undefined
   draggingId.value = null
   resizeRecord.value = undefined
@@ -679,12 +678,12 @@ const selectDate = (date: Date) => {
   selectedDate.value = date
 }
 
-const viewMore = (date: Date) => {
+const viewMore = (date: dayjs.Dayjs) => {
   sideBarFilterOption.value = 'selectedDate' as const
   selectedDate.value = date
 }
 
-const isDateSelected = (date: Date) => {
+const isDateSelected = (date: dayjs.Dayjs) => {
   if (!selectedDate.value) return false
   return dayjs(date).isSame(selectedDate.value, 'day')
 }
@@ -782,7 +781,7 @@ const isDateSelected = (date: Date) => {
                 () => {
                   const record = {
                     row: {
-                      [calendarRange[0].fk_from_col!.title!]: dayjs(day).format('YYYY-MM-DD HH:mm:ssZ'),
+                      [calendarRange[0].fk_from_col!.title!]: (day).format('YYYY-MM-DD HH:mm:ssZ'),
                     },
                   }
                   emit('new-record', record)
@@ -793,11 +792,11 @@ const isDateSelected = (date: Date) => {
             </NcButton>
             <span
               :class="{
-                'bg-brand-50  text-brand-500': dayjs(day).isSame(dayjs(), 'date'),
+                'bg-brand-50  text-brand-500': day.isSame(dayjs(), 'date'),
               }"
               class="px-1.5 rounded-lg py-1 my-1"
             >
-              {{ dayjs(day).format('DD') }}
+              {{ day.format('DD') }}
             </span>
           </div>
           <div v-if="!isUIAllowed('dataEdit')" class="p-3">{{ dayjs(day).format('DD') }}</div>
diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index 0b1a3905df..69b4737445 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -16,7 +16,6 @@ withDefaults(defineProps<Props>(), {
   resize: true,
   selected: false,
   color: 'blue',
-  size: 'small',
   showDate: true,
   position: 'rounded',
 })
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index c6c9e9b030..f7b53d8123 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -18,10 +18,10 @@ const meta = inject(MetaInj, ref())
 
 const datesHours = computed(() => {
   const datesHours: Array<Array<dayjs.Dayjs>> = []
-  const startOfWeek = new Date(selectedDateRange.value.start!)
-  const endOfWeek = new Date(selectedDateRange.value.end!)
+  let startOfWeek = dayjs(selectedDateRange.value.start) ?? dayjs().startOf('week')
+  const endOfWeek = dayjs(selectedDateRange.value.end) ?? dayjs().endOf('week')
 
-  while (startOfWeek.getTime() <= endOfWeek.getTime()) {
+  while (startOfWeek.isSameOrBefore(endOfWeek)) {
     const hours: Array<dayjs.Dayjs> = []
     for (let i = 0; i < 24; i++) {
       hours.push(
@@ -30,13 +30,13 @@ const datesHours = computed(() => {
           .minute(0)
           .second(0)
           .millisecond(0)
-          .year(startOfWeek.getFullYear())
-          .month(startOfWeek.getMonth())
-          .date(startOfWeek.getDate()),
+          .year(startOfWeek.year())
+          .month(startOfWeek.month())
+          .date(startOfWeek.date()),
       )
     }
     datesHours.push(hours)
-    startOfWeek.setDate(startOfWeek.getDate() + 1)
+    startOfWeek = startOfWeek.add(1, 'day')
   }
   return datesHours
 })
@@ -686,7 +686,7 @@ const dropEvent = (event: DragEvent) => {
           class="text-center relative h-56 text-sm text-gray-500 w-full py-1 border-gray-200 border-1 border-r-white border-t-white last:border-r-white bg-gray-50"
           @click="selectedTime = hour.toDate()"
         >
-          <span v-if="date[0].day() === selectedDateRange.start?.getDay()" class="absolute left-1">
+          <span v-if="date[0].day() === selectedDateRange.start?.day()" class="absolute left-1">
             {{ hour.format('h A') }}
           </span>
         </div>
diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
index 2dfeb5510c..6a747f61bc 100644
--- a/packages/nc-gui/components/smartsheet/calendar/YearView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
@@ -4,7 +4,7 @@ const { selectedDate, activeDates } = useCalendarViewStoreOrThrow()
 const months = computed(() => {
   const months = []
   for (let i = 0; i < 12; i++) {
-    months.push(new Date(selectedDate.value.getFullYear(), i, 1))
+    months.push(selectedDate.value.set('month', i).set('date', 1))
   }
   return months
 })
diff --git a/packages/nc-gui/composables/useCalendarViewStore.ts b/packages/nc-gui/composables/useCalendarViewStore.ts
index 31ecbd1ae9..eedf279788 100644
--- a/packages/nc-gui/composables/useCalendarViewStore.ts
+++ b/packages/nc-gui/composables/useCalendarViewStore.ts
@@ -25,7 +25,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       throw new Error('Table meta is not available')
     }
 
-    const pageDate = ref<Date>(new Date())
+    const pageDate = ref<dayjs.Dayjs>(dayjs())
 
     const { isUIAllowed } = useRoles()
 
@@ -38,20 +38,20 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       field: '',
     })
 
-    const selectedDate = ref<Date>(new Date())
+    const selectedDate = ref<dayjs.Dayjs>(dayjs())
 
-    const selectedTime = ref<Date | null>(null)
+    const selectedTime = ref<dayjs.Dayjs | null>(null)
 
-    const selectedMonth = ref<Date>(new Date())
+    const selectedMonth = ref<dayjs.Dayjs>(dayjs())
 
     const isCalendarDataLoading = ref<boolean>(false)
 
     const selectedDateRange = ref<{
-      start: Date | null
-      end: Date | null
+      start: dayjs.Dayjs | null
+      end: dayjs.Dayjs | null
     }>({
-      start: dayjs(selectedDate.value).startOf('week').toDate(), // This will be the previous Monday
-      end: dayjs(selectedDate.value).startOf('week').add(6, 'day').toDate(), // This will be the following Sunday
+      start: dayjs(selectedDate.value).startOf('week'), // This will be the previous Monday
+      end: dayjs(selectedDate.value).startOf('week').add(6, 'day'), // This will be the following Sunday
     })
 
     const defaultPageSize = 25
@@ -151,16 +151,16 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
         switch (sideBarFilterOption.value) {
           case 'day':
-            fromDate = dayjs(selectedDate.value).startOf('day')
-            toDate = dayjs(selectedDate.value).endOf('day')
+            fromDate = selectedDate.value.startOf('day')
+            toDate = selectedDate.value.endOf('day')
             break
           case 'week':
-            fromDate = dayjs(selectedDateRange.value.start).startOf('day')
-            toDate = dayjs(selectedDateRange.value.end).endOf('day')
+            fromDate = selectedDateRange.value.start.startOf('day')
+            toDate = selectedDateRange.value.end.endOf('day')
             break
           case 'month': {
-            const startOfMonth = dayjs(selectedMonth.value).startOf('month')
-            const endOfMonth = dayjs(selectedMonth.value).endOf('month')
+            const startOfMonth = selectedMonth.value.startOf('month')
+            const endOfMonth = selectedMonth.value.endOf('month')
 
             const daysToDisplay = Math.max(endOfMonth.diff(startOfMonth, 'day') + 1, 35)
             fromDate = startOfMonth.subtract((startOfMonth.day() + 7) % 7, 'day').add(1, 'day')
@@ -168,17 +168,17 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
             break
           }
           case 'year':
-            fromDate = dayjs(selectedDate.value).startOf('year')
-            toDate = dayjs(selectedDate.value).endOf('year')
+            fromDate = selectedDate.value.startOf('year')
+            toDate = selectedDate.value.endOf('year')
             break
           case 'selectedDate':
-            fromDate = dayjs(selectedDate.value).startOf('day')
-            toDate = dayjs(selectedDate.value).endOf('day')
+            fromDate = selectedDate.value.startOf('day')
+            toDate = selectedDate.value.endOf('day')
             break
         }
 
-        fromDate = dayjs(fromDate).format('YYYY-MM-DD HH:mm:ssZ')
-        toDate = dayjs(toDate).format('YYYY-MM-DD HH:mm:ssZ')
+        fromDate = fromDate!.format('YYYY-MM-DD HH:mm:ssZ')
+        toDate = toDate!.format('YYYY-MM-DD HH:mm:ssZ')
 
         calendarRange.value.forEach((range) => {
           const fromCol = range.fk_from_col
@@ -326,12 +326,12 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
       switch (activeCalendarView.value) {
         case 'week':
-          fromDate = dayjs(selectedDateRange.value.start).startOf('day')
-          toDate = dayjs(selectedDateRange.value.end).endOf('day')
+          fromDate = selectedDateRange.value.start.startOf('day')
+          toDate = selectedDateRange.value.end.endOf('day')
           break
         case 'month': {
-          const startOfMonth = dayjs(selectedMonth.value).startOf('month')
-          const endOfMonth = dayjs(selectedMonth.value).endOf('month')
+          const startOfMonth = selectedMonth.value.startOf('month')
+          const endOfMonth = selectedMonth.value.endOf('month')
 
           const daysToDisplay = Math.max(endOfMonth.diff(startOfMonth, 'day') + 1, 35)
           fromDate = startOfMonth.subtract((startOfMonth.day() + 7) % 7, 'day')
@@ -339,17 +339,17 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
           break
         }
         case 'year':
-          fromDate = dayjs(selectedDate.value).startOf('year')
-          toDate = dayjs(selectedDate.value).endOf('year')
+          fromDate = selectedDate.value.startOf('year')
+          toDate = selectedDate.value.endOf('year')
           break
         case 'day':
-          fromDate = dayjs(selectedDate.value).startOf('day')
-          toDate = dayjs(selectedDate.value).endOf('day')
+          fromDate = selectedDate.value.startOf('day')
+          toDate = selectedDate.value.endOf('day')
           break
       }
 
-      fromDate = dayjs(fromDate).format('YYYY-MM-DD HH:mm:ssZ')
-      toDate = dayjs(toDate).format('YYYY-MM-DD HH:mm:ssZ')
+      fromDate = fromDate!.format('YYYY-MM-DD HH:mm:ssZ')
+      toDate = toDate!.format('YYYY-MM-DD HH:mm:ssZ')
 
       calendarRange.value.forEach((range) => {
         const fromCol = range.fk_from_col
@@ -435,7 +435,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
     // Set of Dates that have data
     const activeDates = computed(() => {
       if (!formattedData.value || !calendarRange.value) return []
-      const dates = new Set<Date>()
+      const dates = new Set<dayjs.Dayjs>()
 
       calendarRange.value.forEach((range) => {
         formattedData.value.forEach((row) => {
@@ -454,11 +454,11 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
               currentDate = endDate
             }
             while (currentDate.isSameOrBefore(endDate)) {
-              dates.add(currentDate.toDate())
+              dates.add(currentDate)
               currentDate = currentDate.add(1, 'day')
             }
           } else if (start) {
-            dates.add(new Date(start))
+            dates.add(dayjs(start))
           }
         })
       })
@@ -641,7 +641,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
                 if (row) {
                   Object.assign(row.row, updatedRow)
                 }
-                Object.assign(row.oldRow, updatedRow)
+                Object.assign(row?.oldRow, updatedRow)
               },
               args: [clone(toUpdate), property],
             },
@@ -698,23 +698,23 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
         selectedDate.value = selectedMonth.value
         pageDate.value = selectedDate.value
         selectedDateRange.value = {
-          start: dayjs(selectedDate.value).startOf('week').toDate(),
-          end: dayjs(selectedDate.value).endOf('week').toDate(),
+          start: selectedDate.value.startOf('week'),
+          end: selectedDate.value.endOf('week'),
         }
       } else if (oldValue === 'day') {
         pageDate.value = selectedDate.value
 
         selectedMonth.value = selectedDate.value
         selectedDateRange.value = {
-          start: dayjs(selectedDate.value).startOf('week').toDate(),
-          end: dayjs(selectedDate.value).endOf('week').toDate(),
+          start: selectedDate.value.startOf('week'),
+          end: selectedDate.value.endOf('week'),
         }
       } else if (oldValue === 'year') {
         selectedMonth.value = selectedDate.value
         pageDate.value = selectedDate.value
         selectedDateRange.value = {
-          start: dayjs(selectedDate.value).startOf('week').toDate(),
-          end: dayjs(selectedDate.value).endOf('week').toDate(),
+          start: selectedDate.value.startOf('week'),
+          end: selectedDate.value.endOf('week'),
         }
       }
       sideBarFilterOption.value = activeCalendarView.value ?? 'allRecords'