wrbapp/frontend/pages/calendar.vue

<template>
  <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
    <div v-if="calendarStore.events[0]" class="flex flex-col gap-3">
      <div v-for="(event, index) in calendarStore.events" :key="index">
        <div class="item container flex flex-col">
          <h2 class="">{{ longEventDate(event.date) }}</h2>
          <p class="whitespace-pre overflow-x-auto font-bold text-xl">{{ event.description}}</p>
        </div>
      </div>
    </div>
    <div class="w-full flex flex-col justify-center items-center" v-else>
      <Icon size="2em" name="ion:load-c" class="animate-spin" />
      <h2 class="mt-2 font-bold">Loading...</h2>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  title: 'Agenda'
})

const userStore = useUserStore()
const calendarStore = useCalendarStore()

onMounted(() => {
  getEvents()
})

const getEvents = () => {
  
  if (userStore.userPersons[0]) {
    const groups = [...new Set(userStore.userPersons.map(a => a.groups.join()).join().split(','))] 

    calendarStore.getEvents(groups)
  } else {
    setTimeout(() => { getEvents() }, 50)
  }
}

const longEventDate = (eventDate) => {
	const date = new Date(eventDate)

	return date.toLocaleString('nl-NL', {
    weekday: 'short',
    day: 'numeric',
    year: 'numeric',
    month: 'long',
    hour: 'numeric',
    minute: 'numeric'
  }
)}


</script>