Many Changes

spaces/pages/planningBoard.vue

@@ -4,6 +4,7 @@ import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
 import deLocale from '@fullcalendar/core/locales/de'
 import interactionPlugin from '@fullcalendar/interaction'
 import listPlugin from '@fullcalendar/list';
+import dayjs from "dayjs";
 
 
 const viewport = useViewport()
@@ -19,6 +20,7 @@ const eventTypes = dataStore.getEventTypes
 const events = dataStore.getEvents
 
 const openNewEventModal = ref(false)
+const showEventModal = ref(false)
 const newEventData = ref({
   resourceId: "",
   resourceType: "",
@@ -27,6 +29,9 @@ const newEventData = ref({
   start: "",
   end: null
 })
+
+const selectedEvent = ref({})
+
 const createEvent = async () => {
   const {data,error} = await supabase
       .from("events")
@@ -76,6 +81,9 @@ const calendarOptionsTimeline = reactive({
     openNewEventModal.value = true
   },
   eventClick: function (info){
+    selectedEvent.value = info.event
+    showEventModal.value = true
+
     console.log(info)
   },
   resourceGroupField: "type",
@@ -153,7 +161,28 @@ const calendarOptionsTimeline = reactive({
 
       </UCard>
     </UModal>
+    <UModal
+      v-model="showEventModal"
+    >
+      <UCard>
+        <template #header>
+          {{selectedEvent.title}}
+        </template>
 
+        Start: {{dayjs(selectedEvent.startStr).format("DD.MM.YYYY HH:mm")}}<br>
+        Ende: {{dayjs(selectedEvent.endStr).format("DD.MM.YYYY HH:mm")}}
+
+        <DevOnly>
+          <UDivider class="my-3"/>
+          {{selectedEvent}}
+        </DevOnly>
+
+
+
+      </UCard>
+
+
+    </UModal>
     <div v-if="viewport.isLessThan('tablet')">
       <FullCalendar
         :options="calendarOptionsList"