Added New Viewport Config

spaces/pages/planningBoard.vue

@@ -4,6 +4,14 @@ import dayGridPlugin from '@fullcalendar/daygrid'
 import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
 import deLocale from '@fullcalendar/core/locales/de'
 import interactionPlugin from '@fullcalendar/interaction'
+import listPlugin from '@fullcalendar/list';
+
+
+const viewport = useViewport()
+
+watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
+  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
+})
 
 const supabase = useSupabaseClient()
 
@@ -37,9 +45,15 @@ const createEvent = async () => {
 
 
 }
+const calendarOptionsList = reactive({
+  locale: deLocale,
+  plugins: [listPlugin],
+  initialView: "listWeek",
+  initialEvents: events,
+  nowIndicator: true
+})
 
-
-const calendarOptions = reactive({
+const calendarOptionsTimeline = reactive({
   schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
   locale: deLocale,
   plugins: [resourceTimelinePlugin, interactionPlugin],
@@ -140,12 +154,21 @@ const calendarOptions = reactive({
 
       </UCard>
     </UModal>
-    <FullCalendar
-      :options="calendarOptions"
-    />
+
+    <div v-if="viewport.isLessThan('tablet')">
+      <FullCalendar
+        :options="calendarOptionsList"
+      />
+    </div>
+    <div v-else>
+      <FullCalendar
+          :options="calendarOptionsTimeline"
+      />
+    </div>
+
+
   </div>
 </template>
 
 <style scoped>
-
 </style>