feat(nc-gui): month view

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

@@ -1,10 +1,33 @@
 <script setup lang="ts">
-import Draggable from 'vuedraggable'
 
 const { pageDate, selectedDate } = useCalendarViewStoreOrThrow();
 
+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"
+  }
+])
+
+interface EventData {
+  id: string;
+  from_col_id: string;
+  to_col_id: string | null;
+}
+
 const isMondayFirst = ref(false);
 
+
+const fields = inject(FieldsInj, ref([]))
+
 const days = computed(() => {
   if (isMondayFirst.value) {
     return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
@@ -30,6 +53,39 @@ const dates = computed(() => {
   return datesArray;
 });
 
+const getGridPosition = (event) => {
+
+  const firstDayOfMonth = new Date(pageDate.value.getFullYear(), pageDate.value.getMonth(), 1).getDay();
+
+  const startDate = new Date(event.from_date_time);
+  const startDayIndex = startDate.getDate() - 1 + firstDayOfMonth;
+  const endDate = new Date(event.to_date_time);
+  const endDayIndex = endDate.getDate() - 1 + firstDayOfMonth;
+
+  const startRow = Math.floor(startDayIndex / 7) + 1;
+  let endRow = Math.floor(endDayIndex / 7) + 1;
+
+  if (endDate.getMonth() !== pageDate.value.getMonth()) {
+    endRow = Math.ceil((new Date(pageDate.value.getFullYear(), pageDate.value.getMonth() + 1, 0).getDate() + firstDayOfMonth) / 7);
+  }
+
+  const startCol = startDayIndex % 7 + 1;
+  let endCol = endDayIndex % 7 + 1;
+
+  if (endCol === 1) {
+    endRow++;
+    endCol = 8;
+  }
+
+  return {
+    colStart: startCol,
+    colEnd: endCol,
+    rowStart: startRow,
+    rowEnd: endRow
+  };
+};
+
+
 const selectDate = (date: Date) => {
   if (!date) return;
   selectedDate.value = date;
@@ -46,16 +102,24 @@ 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);
+  }
+}
+
 </script>
 
 <template>
-  <div class="h-full">
+  <div class="h-full" @="handleScroll">
     <div class="grid grid-cols-7">
       <div v-for="day in days" :key="day" class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-200 font-semibold text-gray-800">
         {{ day }}
       </div>
     </div>
-    <div class="grid grid-cols-7 h-full" >
+    <div class="grid relative grid-cols-7 h-full" >
       <div v-for="date in dates" :key="date" :class="{
         '!border-x-2 !border-y-2 border-brand-500': isDateSelected(date),
         '!bg-gray-50 !text-gray-400': !isDayInPagedMonth(date),
@@ -77,7 +141,17 @@ const isDateSelected = (date: Date) => {
           </NcButton>
           <span class="px-1 py-2">{{ date.getDate() }}</span>
         </div>
+
+        </div>
       </div>
+      <div v-for="event in events" :key="event.Id" :class="[
+  'absolute w-full mt-16 px-2',
+  `!col-start-[${getGridPosition(event, pageDate).colStart}]`,
+  `!col-span-[${getGridPosition(event, pageDate).colEnd - getGridPosition(event, pageDate).colStart}]`,
+  `!row-start-[${getGridPosition(event, pageDate).rowStart}]`,
+  `!row-span-[${getGridPosition(event, pageDate).rowEnd - getGridPosition(event, pageDate).rowStart}]`
+]" class="event-display">
+       <LazySmartsheetCalendarRecordCard :name="event.Title" :date="event.from_date_time" color="blue" />
       </div>
     </div>
   </div>

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

@@ -17,7 +17,14 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="flex border-1 cursor-pointer border-gray-200 items-center px-2 py-3 rounded-lg">
+  <div :class="{
+    'bg-maroon-50': props.color === 'maroon',
+      'bg-blue-50': props.color === 'blue',
+      'bg-green-50': props.color === 'green',
+      '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">
     <span :class="{
       'bg-maroon-500': props.color === 'maroon',
       'bg-blue-500': props.color === 'blue',
@@ -25,11 +32,9 @@ const props = withDefaults(defineProps<Props>(), {
       'bg-yellow-500': props.color === 'yellow',
       'bg-pink-500': props.color === 'pink',
       'bg-purple-500': props.color === 'purple',
-    }" class="block h-10 w-1 rounded"></span>
-    <div class="flex flex-col gap-1 ml-3">
-      <span class="text-sm font-bold text-gray-700">{{name}}</span>
-      <span v-if="showDate" class="text-xs text-gray-500">{{date}}</span>
-    </div>
+    }" class="block h-5 w-1 rounded"></span>
+      <span class="text-sm font-bold text-gray-800">{{name}}</span>
+      <span v-if="showDate" class="text-xs text-gray-600">{{date}}</span>
   </div>
 </template>
 

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

@@ -79,7 +79,7 @@ const activeDates = ref([new Date()])
         'h-[calc(100vh-40rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
         'h-[calc(100vh-29rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const),
       }" class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height">
-        <LazySmartsheetCalendarRecordCard v-for="(x, id) in Array(50)" :color="x%2 === 0 ? 'maroon': 'blue'"
+        <LazySmartsheetCalendarSideRecordCard v-for="(x, id) in Array(50)" :color="x%2 === 0 ? 'maroon': 'blue'"
                                           date="27 April 2003" name="Saturday HackNight" @click="emit('expand-record', id)"/>
       </div>
     </div>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+
+interface Props {
+  name: string;
+  date?: string;
+  color?: string;
+  showDate?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: '',
+  date: '',
+  color: 'blue',
+  showDate: true,
+});
+
+</script>
+
+<template>
+  <div class="flex border-1 cursor-pointer border-gray-200 items-center px-2 py-3 rounded-lg">
+    <span :class="{
+      'bg-maroon-500': props.color === 'maroon',
+      'bg-blue-500': props.color === 'blue',
+      'bg-green-500': props.color === 'green',
+      'bg-yellow-500': props.color === 'yellow',
+      'bg-pink-500': props.color === 'pink',
+      'bg-purple-500': props.color === 'purple',
+    }" class="block h-10 w-1 rounded"></span>
+    <div class="flex flex-col gap-1 ml-3">
+      <span class="text-sm font-bold text-gray-700">{{name}}</span>
+      <span v-if="showDate" class="text-xs text-gray-500">{{date}}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>