feat(nc-gui): day view inital draft

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+
+import {UITypes} from "nocodb-sdk";
+
+const { pageDate, selectedDate, calDataType } = useCalendarViewStoreOrThrow();
+
+const emit = defineEmits(['expand-record']);
+
+const events = ref([
+  {
+    "Id": 1,
+    "Title": "Event 01",
+    "from_date_time": "2023-12-15",
+    "to_date_time": "2023-12-20"
+  },
+  {
+    "Id": 2,
+    "Title": "Event 02",
+    "from_date_time": "2023-12-20",
+    "to_date_time": "2023-12-25"
+  }
+])
+</script>
+
+<template>
+<div v-if="calDataType === UITypes.Date" class="flex flex-col px-2 gap-4 pt-4">
+  <LazySmartsheetCalendarRecordCard v-for="event in events" :name="event.Title" :date="event.from_date_time" color="blue" size="medium" @click="emit('expand-record', 'xxx')" />
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -4,6 +4,7 @@ interface Props {
   name: string;
   date?: string;
   color?: string;
+  size? : 'small' | 'medium' | 'large';
   showDate?: boolean;
 }
 
@@ -11,6 +12,7 @@ const props = withDefaults(defineProps<Props>(), {
   name: '',
   date: '',
   color: 'blue',
+  size: 'small',
   showDate: true,
 });
 
@@ -24,7 +26,10 @@ const props = withDefaults(defineProps<Props>(), {
       'bg-yellow-50': props.color === 'yellow',
       'bg-pink-50': props.color === 'pink',
       'bg-purple-50': props.color === 'purple',
-  }" class="flex w-full border-1 h-8 cursor-pointer border-gray-200 gap-2 items-center px-2 py-3 rounded-lg">
+      'h-12': props.size === 'medium',
+      'h-16': props.size === 'large',
+      'h-8': props.size === 'small',
+  }" class="flex items-center w-full border-1 cursor-pointer border-gray-200 gap-2 items-center px-2 py-3 rounded-lg">
     <span :class="{
       'bg-maroon-500': props.color === 'maroon',
       'bg-blue-500': props.color === 'blue',
@@ -33,8 +38,10 @@ const props = withDefaults(defineProps<Props>(), {
       'bg-pink-500': props.color === 'pink',
       'bg-purple-500': props.color === 'purple',
     }" class="block h-5 w-1 rounded"></span>
+    <div class="flex flex-row items-baseline gap-2">
       <span class="text-sm font-bold text-gray-800">{{name}}</span>
       <span v-if="showDate" class="text-xs text-gray-600">{{date}}</span>
+    </div>
   </div>
 </template>
 

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

@@ -99,6 +99,7 @@ const headerText = computed(() => {
       </div>
       <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" class="flex-grow-1" />
       <LazySmartsheetCalendarMonthView v-else-if="activeCalendarView === 'month'" class="flex-grow-1" />
+      <LazySmartsheetCalendarDayView v-else-if="activeCalendarView === 'day'" class="flex-grow-1" />
 
     </div>
     <LazySmartsheetCalendarSideMenu v-if="!isMobileMode" :visible="showSideMenu" @expand-record="expandRecord"/>