fix(nc-gui): misc changes

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

@@ -178,7 +178,6 @@ const getRecordStyle = (record: Row) => {
   const endCol = calendarRange.value[0].fk_to_col.title
   const scheduleStart = dayjs(selectedDate.value).startOf('day')
   const scheduleEnd = dayjs(selectedDate.value).endOf('day')
-
   let startDate = dayjs(record.row[startCol])
   let endDate = dayjs(record.row[endCol])
 
@@ -234,8 +233,6 @@ const dropEvent = (event: DragEvent) => {
   if (data) {
     const { record, initialClickOffsetY } = JSON.parse(data)
 
-    console.log('droppedRecord', record)
-
     const { top, height } = container.value.getBoundingClientRect()
 
     const percent = (event.clientY - top - initialClickOffsetY - window.scrollY) / height

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

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import dayjs from 'dayjs'
+
 const emit = defineEmits(['new-record', 'expand-record'])
 
 const { pageDate, selectedDate, formattedData, displayField, calendarRange } = useCalendarViewStoreOrThrow()
@@ -86,30 +88,23 @@ const isDateSelected = (date: Date) => {
   return isSameDate(propDate, date)
 }
 
-const handleScroll = (event) => {
-  if (event.deltaY > 0) {
-    pageDate.value.setMonth(pageDate.value.getMonth() + 1)
-  } else {
-    pageDate.value.setMonth(pageDate.value.getMonth() - 1)
-  }
-}
-
 const eventsByDate = computed(() => {
   if (!formattedData.value) return {}
   const events = {}
   formattedData.value.forEach((record) => {
     const date = record.row[calendarRange.value[0].fk_from_col.title]
-    if (!events[new Date().getDate()]) {
-      events[date] = []
+    const dateObj = dayjs(date).format('MM/DD/YYYY')
+    if (!events[dateObj]) {
+      events[dateObj] = []
     }
-    events[date].push(record)
+    events[dateObj].push(record)
   })
   return events
 })
 </script>
 
 <template>
-  <div v-if="calendarRange && calendarRange[0] && calendarRange[0].fk_from_col" class="h-full" @scroll="handleScroll">
+  <div v-if="calendarRange && calendarRange[0] && calendarRange[0].fk_from_col" class="h-full">
     <div class="grid grid-cols-7">
       <div
         v-for="(day, index) in days"
@@ -119,7 +114,7 @@ const eventsByDate = computed(() => {
         {{ day }}
       </div>
     </div>
-    <div class="grid relative grid-cols-7 h-full">
+    <div class="grid relative auto-rows-fr grid-cols-7 h-full">
       <div
         v-for="(date, id) in dates"
         :key="id"
@@ -130,39 +125,45 @@ const eventsByDate = computed(() => {
         class="text-right !h-[100%] group grid-cell py-1 text-sm hover:bg-gray-50 border-1 bg-white last:border-r-0 border-gray-200 font-semibold text-gray-800"
         @click="selectDate(date)"
       >
-        <div class="h-full">
-          <div class="flex justify-between p-1">
-            <span
-              :class="{
-                block: !isDateSelected(date),
-                hidden: isDateSelected(date),
-              }"
-              class="group-hover:hidden"
-            ></span>
-            <NcButton
-              :class="{
-                '!block': isDateSelected(date),
-                '!hidden': !isDateSelected(date),
-              }"
-              class="!group-hover:block"
-              size="small"
-              type="secondary"
-              @click="emit('new-record')"
-            >
-              <component :is="iconMap.plus" class="h-4 w-4" />
-            </NcButton>
-            <span class="px-1 py-2">{{ date.getDate() }}</span>
-          </div>
-          <pre></pre>
-          <LazySmartsheetRow v-for="(record, recordId) in eventsByDate[date.getDate()]" :key="recordId" :row="record">
+        <div class="flex justify-between p-1">
+          <span
+            :class="{
+              block: !isDateSelected(date),
+              hidden: isDateSelected(date),
+            }"
+            class="group-hover:hidden"
+          ></span>
+          <NcButton
+            :class="{
+              '!block': isDateSelected(date),
+              '!hidden': !isDateSelected(date),
+            }"
+            class="!group-hover:block"
+            size="small"
+            type="secondary"
+            @click="emit('new-record')"
+          >
+            <component :is="iconMap.plus" class="h-4 w-4" />
+          </NcButton>
+          <span class="px-1 py-2">{{ date.getDate() }}</span>
+        </div>
+        <div class="flex flex-col justify-center gap-1">
+          <LazySmartsheetRow
+            v-for="(record, recordId) in (eventsByDate[dayjs(date).format('MM/DD/YYYY')] ?? []).slice(0, 2)"
+            :key="recordId"
+            :row="record"
+          >
             <LazySmartsheetCalendarRecordCard
               v-if="calendarRange && calendarRange[0]"
-              :date="record.row[calendarRange[0].fk_from_col.title]"
+              :date="dayjs(record.row[calendarRange[0].fk_from_col.title]).format('MM/DD/YYYY HH:mm')"
               :name="record.row[displayField.title]"
               color="blue"
               @click="emit('expand-record', record)"
             />
           </LazySmartsheetRow>
+          <div v-if="eventsByDate[dayjs(date).format('MM/DD/YYYY')]?.length > 2" class="text-xs text-center text-gray-500">
+            +{{ eventsByDate[dayjs(date).format('MM/DD/YYYY')].length - 2 }} more
+          </div>
         </div>
       </div>
       <!--      <LazySmartsheetRow

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

@@ -21,9 +21,9 @@ withDefaults(defineProps<Props>(), {
 <template>
   <div
     :class="{
-      'h-8': size === 'small',
-      'h-10': size === 'medium',
-      'h-12': size === 'large',
+      'min-h-9': size === 'small',
+      'min-h-10': size === 'medium',
+      'min-h-12': size === 'large',
       'rounded-l-lg ml-3': position === 'leftRounded',
       'rounded-r-lg mr-3': position === 'rightRounded',
       'rounded-lg mx-3': position === 'rounded',