From f391504cd865eb91c60ad23a533598c73ec403bf Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Sun, 24 Dec 2023 04:03:32 +0100
Subject: [PATCH 01/13] Revert "Delete program planner"

This reverts commit 99c8f2f5b43dcdde6541364616bbdaaf77433c57.
---
 .../programPlanner/CalendarItem.vue           |  91 ++++
 frontend/src/layouts/CampManagementLayout.vue |   7 +
 .../campManagement/ProgramPlannerPage.vue     | 496 ++++++++++++++++++
 frontend/src/router/routes.ts                 |   6 +
 4 files changed, 600 insertions(+)
 create mode 100644 frontend/src/components/campManagement/programPlanner/CalendarItem.vue
 create mode 100644 frontend/src/pages/campManagement/ProgramPlannerPage.vue

diff --git a/frontend/src/components/campManagement/programPlanner/CalendarItem.vue b/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
new file mode 100644
index 00000000..28f4290c
--- /dev/null
+++ b/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
@@ -0,0 +1,91 @@
+<template>
+  <div
+    v-if="props.event.time !== undefined"
+    class="my-event"
+    :class="badgeClasses"
+    :style="badgeStyles"
+    :draggable="true"
+  >
+    <span class="title q-calendar__ellipsis">
+      {{ props.event.title }}
+      <q-tooltip>
+        {{ props.event.details }}
+      </q-tooltip>
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ProgramEvent } from '@camp-registration/common/entities';
+import { computed } from 'vue';
+
+interface Props {
+  event: ProgramEvent;
+  timeStartPosition?: (time?: string) => number;
+  timeDurationHeight?: (duration?: number) => number;
+}
+
+const props = defineProps<Props>();
+
+const backgroundColor = computed<string>(() => {
+  return props.event.backgroundColor ?? '#0000ff';
+});
+
+const badgeClasses = computed<Record<string, string | boolean>>(() => {
+  return {
+    [`text-white bg-${props.event.backgroundColor}`]: true,
+    'full-width': !props.event.side || props.event.side === 'full',
+    'left-side': props.event.side === 'left',
+    'right-side': props.event.side === 'right',
+    'rounded-border': true,
+  };
+});
+
+const badgeStyles = computed(() => {
+  const s: {
+    top: string;
+    height: string;
+    backgroundColor: string;
+  } = {};
+  if (props.timeStartPosition && props.timeDurationHeight) {
+    s.top = props.timeStartPosition(props.event.time) + 'px';
+    s.height = props.timeDurationHeight(props.event.duration) + 'px';
+    s.backgroundColor = backgroundColor.value;
+  }
+  s['align-items'] = 'flex-start';
+  return s;
+});
+</script>
+
+<style lang="sass" scoped>
+.my-event
+  position: absolute
+  font-size: 12px
+  justify-content: center
+  margin: 0 1px
+  text-overflow: ellipsis
+  overflow: hidden
+  cursor: pointer
+
+.title
+  position: relative
+  display: flex
+  justify-content: center
+  align-items: center
+  height: 100%
+
+.full-width
+  left: 0
+  width: calc(100% - 2px)
+
+.left-side
+  left: 0
+  width: calc(50% - 3px)
+
+.right-side
+  left: 50%
+  width: calc(50% - 3px)
+
+.rounded-border
+  border-radius: 2px
+</style>
diff --git a/frontend/src/layouts/CampManagementLayout.vue b/frontend/src/layouts/CampManagementLayout.vue
index 5743b559..0c858e8b 100644
--- a/frontend/src/layouts/CampManagementLayout.vue
+++ b/frontend/src/layouts/CampManagementLayout.vue
@@ -163,6 +163,13 @@ const items: NavigationItem[] = [
     icon: 'email',
     to: undefined,
   },
+  {
+    name: 'program_planner',
+    preview: true,
+    label: t('program_planner'),
+    icon: 'event',
+    to: { name: 'program-planner' },
+  },
   {
     name: 'room_planner',
     label: t('room_planner'),
diff --git a/frontend/src/pages/campManagement/ProgramPlannerPage.vue b/frontend/src/pages/campManagement/ProgramPlannerPage.vue
new file mode 100644
index 00000000..b12323ba
--- /dev/null
+++ b/frontend/src/pages/campManagement/ProgramPlannerPage.vue
@@ -0,0 +1,496 @@
+<template>
+  <!-- https://github.com/quasarframework/quasar-ui-qcalendar/blob/dev/demo/src/pages/Calendar.vue -->
+  <page-state-handler
+    :loading="loading"
+    :error="error"
+    padding
+    class="column"
+  >
+    <div class="col-shrink">Header</div>
+
+    <!-- TODO FIx element height -->
+    <!-- Classes absolute fit is currently not working due to other style classes -->
+    <q-calendar
+      v-model="startAt"
+      :view="view"
+      :mood="mode"
+      :weekdays="weekDays"
+      :locale="locale"
+      :max-days="maxDays"
+      transition-prev="slide-right"
+      transition-next="slide-left"
+      :interval-minutes="intervalMinutes"
+      :interval-start="intervalStart"
+      :interval-count="intervalCount"
+      :drag-enter-func="onDragEnter"
+      :drag-over-func="onDragOver"
+      :drag-leave-func="onDragLeave"
+      :drag-end-func="onDragEnd"
+      :drop-func="onDrop"
+      hour24-format
+      animated
+    >
+      <template
+        #day-body="{ scope: { timestamp, timeStartPos, timeDurationHeight } }"
+      >
+        <calendar-item
+          v-for="event in getEvents(timestamp.date)"
+          :key="event.id"
+          :event="event"
+          :time-start-position="timeStartPos"
+          :time-duration-height="timeDurationHeight"
+        />
+      </template>
+    </q-calendar>
+  </page-state-handler>
+</template>
+
+<script lang="ts" setup>
+import PageStateHandler from 'components/common/PageStateHandler.vue';
+import {
+  addToDate,
+  compareTimestamps,
+  diffTimestamp,
+  isBetweenDates,
+  parsed,
+  parseTime,
+  QCalendar,
+  Timestamp,
+} from '@quasar/quasar-ui-qcalendar';
+import { computed, CSSProperties, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useCampDetailsStore } from 'stores/camp-details-store';
+import CalendarItem from 'components/campManagement/programPlanner/CalendarItem.vue';
+import type { ProgramEvent } from '@camp-registration/common/entities';
+import { prevent, stop, stopAndPrevent } from 'quasar/src/utils/event';
+import { colors } from 'quasar';
+
+const campDetailsStore = useCampDetailsStore();
+const { t, locale } = useI18n();
+
+const loading = computed<boolean>(() => {
+  return campDetailsStore.isLoading;
+});
+
+const error = computed<unknown>(() => {
+  return campDetailsStore.error;
+});
+
+const settings = ref({
+  daysPerWeek: 8,
+  dayStart: '09:30',
+  dayEnd: '18:15',
+  timeIntervalMinutes: 30,
+});
+
+const startAt = ref('2023-07-29');
+const mode = ref('day');
+const view = ref();
+const weekDays = ref<number[]>([1, 2, 3, 4, 5, 6, 0]);
+
+const dragging = ref(false);
+const draggedEvent = ref<ProgramEvent>();
+
+const intervalMinutes = computed<number | undefined>(() => {
+  return settings.value.timeIntervalMinutes;
+});
+
+const intervalCount = computed<number | undefined>(() => {
+  const intervalMinutes = settings.value.timeIntervalMinutes;
+  const dayStart = settings.value.dayStart ?? '00:00';
+  const dayEnt = settings.value.dayEnd ?? '24:00';
+
+  if (intervalMinutes === undefined || intervalMinutes === 0) {
+    return undefined;
+  }
+
+  const start = getTime(dayStart);
+  const end = getTime(dayEnt);
+  const diff = end - start;
+
+  return Math.floor(diff / intervalMinutes);
+});
+
+const intervalStart = computed<number | undefined>(() => {
+  const intervalMinutes = settings.value.timeIntervalMinutes;
+  const dayStart = settings.value.dayStart;
+  if (
+    dayStart === undefined ||
+    intervalMinutes === undefined ||
+    intervalMinutes === 0
+  ) {
+    return undefined;
+  }
+
+  const start = getTime(dayStart);
+
+  return Math.floor(start / intervalMinutes);
+});
+
+const maxDays = computed<number>(() => {
+  if (campDetailsStore.data === undefined) {
+    return 0;
+  }
+
+  return calculateDaysBetween(
+    campDetailsStore.data.startAt,
+    campDetailsStore.data.endAt,
+  );
+});
+
+// TODO https://qcalendar.netlify.app/developing/qcalendarday-week/week-drag-and-drop
+// TODO https://qcalendar.netlify.app/developing/qcalendarday-week/week-slot-day-body
+
+function isCssColor(color) {
+  return !!color && !!color.match(/^(#|(rgb|hsl)a?\()/);
+}
+
+function badgeClasses(event: ProgramEvent, type: string) {
+  const cssColor = isCssColor(event.backgroundColor);
+  const isHeader = type === 'header';
+  return {
+    [`text-white bg-${event.backgroundColor}`]: !cssColor,
+    'full-width': !isHeader && (!event.side || event.side === 'full'),
+    'left-side': !isHeader && event.side === 'left',
+    'right-side': !isHeader && event.side === 'right',
+  };
+}
+
+function badgeStyles(
+  event: ProgramEvent,
+  type: string,
+  timeStartPos?,
+  timeDurationHeight?,
+) {
+  const s: CSSProperties = {};
+  if (isCssColor(event.backgroundColor)) {
+    s.backgroundColor = event.backgroundColor;
+    s.color =
+      colors.luminosity(event.backgroundColor) > 0.5 ? 'black' : 'white';
+  }
+  if (timeStartPos) {
+    // don't clamp position to 0px
+    s.top = timeStartPos(event.time, false) + 'px';
+    s.position = 'absolute';
+    if (event.side !== undefined) {
+      s.width = '50%';
+      if (event.side === 'right') {
+        s.left = '50%';
+      }
+    } else {
+      s.width = '100%';
+    }
+  }
+  if (timeDurationHeight) {
+    s.height = timeDurationHeight(event.duration) + 'px';
+  }
+  s.alignItems = 'flex-start';
+  return s;
+}
+
+function showEvent(event: ProgramEvent) {
+  // TODO Open dialog
+}
+
+function onDragStart(e, event) {
+  dragging.value = true;
+  draggedEvent.value = event;
+  stop(e);
+
+  // TODO Is this needed?
+  // e.dataTransfer.dropEffect = 'copy';
+  // e.dataTransfer.effectAllowed = 'move';
+  // e.dataTransfer.setData('ID', event.id);
+}
+
+function onDragEnter(e, event) {
+  prevent(e);
+}
+
+function onDragOver(e, event: ProgramEvent, type: string) {
+  // TODO
+  // if (type === 'day') {
+  //   stopAndPrevent(e);
+  //   return draggedEvent.value.date !== day.date;
+  // } else if (type === 'interval') {
+  //   stopAndPrevent(ev);
+  //   return (
+  //     this.draggedEvent.date !== day.date && this.draggedEvent.time !== day.time
+  //   );
+  // }
+}
+
+function onDragEnd(e, event) {
+  stopAndPrevent(e);
+  // TODO Reset drag
+}
+
+function onDragLeave(e, type, scope) {
+  console.log('onDragLeave');
+  return false;
+}
+
+function onDrop(e, type, scope) {
+  // console.log('onDrop', type, scope)
+  // const itemID = parseInt(e.dataTransfer.getData('ID'), 10)
+  // const event = { ...this.defaultEvent }
+  // event.id = this.events.length + 1
+  // const item = this.dragItems.filter(item => item.id === itemID)
+  // event.type = item[ 0 ].id
+  // event.name = item[ 0 ].name
+  // event.date = scope.timestamp.date
+  // if (type === 'interval') {
+  //   event.time = scope.timestamp.time
+  // }
+  // else { // head-day
+  //   event.allDay = true
+  // }
+  // this.events.push(event)
+  return false;
+}
+
+function getTime(timeString: string): number {
+  const [hours, minutes] = timeString.split(':').map(Number);
+  return hours * 60 + minutes;
+}
+
+function calculateDaysBetween(startAt: string, endAt: string): number {
+  const ONE_DAY_IN_MS = 1000 * 60 * 60 * 24; // number of milliseconds in one day
+  const start = new Date(startAt); // make a copy of the start date
+  const end = new Date(endAt); // make a copy of the end date
+  start.setHours(0, 0, 0, 0); // set the time to midnight
+  end.setHours(0, 0, 0, 0); // set the time to midnight
+  const diffInMs = end.getTime() - start.getTime(); // calculate the difference in milliseconds
+  const diffInDays = Math.floor(diffInMs / ONE_DAY_IN_MS); // calculate the difference in days
+  return diffInDays + 1; // add one to count every started day
+}
+
+const events = ref<ProgramEvent[]>([
+  {
+    id: '1',
+    title: '1st of the Month',
+    details: 'Everything is funny as long as it is happening to someone else',
+    date: '2023-07-29',
+    backgroundColor: 'orange',
+  },
+  {
+    id: '2',
+    title: 'Sisters Birthday',
+    details: 'Buy a nice present',
+    date: '2023-07-30',
+    backgroundColor: 'green',
+    icon: 'fas fa-birthday-cake',
+  },
+  {
+    id: '3',
+    title: 'Meeting',
+    details: 'Time to pitch my idea to the company',
+    date: '2023-07-31',
+    time: '10:00',
+    duration: 120,
+    backgroundColor: 'red',
+    icon: 'fas fa-handshake',
+  },
+  {
+    id: '4',
+    title: 'Lunch',
+    details: 'Company is paying!',
+    date: '2023-07-31',
+    time: '11:15',
+    duration: 90,
+    backgroundColor: 'teal',
+    icon: 'fas fa-hamburger',
+  },
+  {
+    id: '41',
+    title: 'Second Lunch',
+    details: 'Company is paying!',
+    date: '2023-07-31',
+    time: '12:00',
+    duration: 90,
+    backgroundColor: 'green',
+    icon: 'fas fa-hamburger',
+  },
+  {
+    id: '5',
+    title: 'Visit mom',
+    details: 'Always a nice chat with mom',
+    date: '2023-07-30',
+    time: '17:00',
+    duration: 90,
+    backgroundColor: 'grey',
+    icon: 'fas fa-car',
+  },
+  {
+    id: '6',
+    title: 'Conference',
+    details: 'Teaching Javascript 101',
+    date: '2023-08-03',
+    time: '08:00',
+    duration: 540,
+    backgroundColor: 'blue',
+    icon: 'fas fa-chalkboard-teacher',
+  },
+  {
+    id: '7',
+    title: 'Girlfriend',
+    details: 'Meet GF for dinner at Swanky Restaurant',
+    date: '2023-08-04',
+    time: '19:00',
+    duration: 180,
+    backgroundColor: 'teal',
+    icon: 'fas fa-utensils',
+  },
+]);
+
+const eventsMap = computed(() => {
+  const map = {};
+  // this.events.forEach(event => (map[ event.date ] = map[ event.date ] || []).push(event))
+  events.value.forEach((event) => {
+    if (!map[event.date]) {
+      map[event.date] = [];
+    }
+    map[event.date].push(event);
+  });
+
+  return map;
+});
+
+function getEvents(date: string): ProgramEvent[] {
+  // get all events for the specified date
+  const events = eventsMap.value[date] || [];
+
+  // Convert all times to timestamps first
+  const eventTimes: {
+    start: Timestamp;
+    end: Timestamp;
+  }[] = events.map((event) => {
+    const start = addToDate(parsed(event.date), {
+      minute: parseTime(event.time),
+    });
+    const end = addToDate(start, { minute: event.duration });
+
+    return {
+      start: start,
+      end: end,
+    };
+  });
+
+  // Set the side of all events
+  for (let i = 0; i < events.length; i++) {
+    // Look ahead - all events in the past are already assigned
+    // Technically, the last element could be skipped as it can't be compared
+    for (let j = i + 1; j < events.length; j++) {
+      // Check if timestamps overlap
+      const overlapping =
+        isBetweenDates(
+          eventTimes[j].start,
+          eventTimes[i].start,
+          eventTimes[i].end,
+          true,
+        ) ||
+        isBetweenDates(
+          eventTimes[j].end,
+          eventTimes[i].start,
+          eventTimes[i].end,
+          true,
+        );
+      // Check if start and end are equal. This is considered as between but
+      //  should be ignored here.
+      const continuous =
+        compareTimestamps(eventTimes[i].start, eventTimes[j].end) ||
+        compareTimestamps(eventTimes[j].start, eventTimes[i].end);
+
+      // Skip all event that do not overlap
+      if (!overlapping || continuous) {
+        continue;
+      }
+
+      // Both events overlap. If one event has a side defined, assign the
+      //  other side to the other element. If both elements don't have a side
+      //  defined, the earlier event gets the left side.
+      if (events[i].side === undefined) {
+        // Other element has already a side. So take the other one
+        if (events[j].side !== undefined) {
+          events[i].side = events[j].side === 'left' ? 'right' : 'left';
+          continue;
+        }
+
+        // Compare who starts first
+        events[i].side =
+          diffTimestamp(eventTimes[i].start, eventTimes[j].start, true) >= 0
+            ? 'left'
+            : 'right';
+      }
+
+      // Set side of second element if not already set
+      if (events[j].side !== undefined) {
+        continue;
+      }
+
+      events[j].side = events[i].side === 'left' ? 'right' : 'left';
+    }
+
+    events[i] ??= 'full';
+  }
+
+  return events;
+}
+</script>
+
+<style lang="sass" scoped>
+.my-event
+  position: absolute
+  font-size: 12px
+  justify-content: center
+  margin: 0 1px
+  text-overflow: ellipsis
+  overflow: hidden
+  cursor: pointer
+
+.title
+  position: relative
+  display: flex
+  justify-content: center
+  align-items: center
+  height: 100%
+
+.text-white
+  color: white
+
+.bg-blue
+  background: blue
+
+.bg-green
+  background: green
+
+.bg-orange
+  background: orange
+
+.bg-red
+  background: red
+
+.bg-teal
+  background: teal
+
+.bg-grey
+  background: grey
+
+.bg-purple
+  background: purple
+
+.full-width
+  left: 0
+  width: calc(100% - 2px)
+
+.left-side
+  left: 0
+  width: calc(50% - 3px)
+
+.right-side
+  left: 50%
+  width: calc(50% - 3px)
+
+  .rounded-border
+    border-radius: 2px
+</style>
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index c5fe5e70..b814b659 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -107,6 +107,12 @@ const routes: RouteRecordRaw[] = [
             component: () =>
               import('pages/campManagement/ParticipantsIndexPage.vue'),
           },
+          {
+            path: 'program-planner',
+            name: 'program-planner',
+            component: () =>
+              import('pages/campManagement/ProgramPlannerPage.vue'),
+          },
           {
             path: 'room-planner',
             name: 'room-planner',

From 490bf80cdc9eace24f3e886de0abb6b40a38bc94 Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Fri, 2 Feb 2024 05:08:29 +0100
Subject: [PATCH 02/13] Wip: Work for program planner

---
 frontend/quasar.extensions.json               |   2 +-
 .../programPlanner/CalendarDayItem.vue        |  34 ++
 .../programPlanner/CalendarItem.vue           |  25 +-
 .../programPlanner/CalendarNavigationBar.vue  |  85 +++
 .../programPlanner/DragAndDropScope.ts        |   4 +
 .../programPlanner/ProgramCalendar.vue        | 265 +++++++++
 .../dialogs/CalendarSettingsDialog.vue        | 147 +++++
 .../campManagement/ParticipantsIndexPage.vue  |   1 -
 .../campManagement/ProgramPlannerPage.vue     | 504 ++----------------
 package-lock.json                             |  11 +-
 10 files changed, 603 insertions(+), 475 deletions(-)
 create mode 100644 frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue
 create mode 100644 frontend/src/components/campManagement/programPlanner/CalendarNavigationBar.vue
 create mode 100644 frontend/src/components/campManagement/programPlanner/DragAndDropScope.ts
 create mode 100644 frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
 create mode 100644 frontend/src/components/campManagement/programPlanner/dialogs/CalendarSettingsDialog.vue

diff --git a/frontend/quasar.extensions.json b/frontend/quasar.extensions.json
index bf5bfecb..e239c306 100644
--- a/frontend/quasar.extensions.json
+++ b/frontend/quasar.extensions.json
@@ -1,3 +1,3 @@
 {
   "@quasar/qcalendar": {}
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue b/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue
new file mode 100644
index 00000000..8d05f246
--- /dev/null
+++ b/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue
@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="text-center rounded-borders"
+    :style="badgeStyles"
+  >
+    {{ to(event.title) }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ProgramEvent } from '@camp-registration/common/entities';
+import { computed, StyleValue } from 'vue';
+import { useObjectTranslation } from 'src/composables/objectTranslation';
+
+interface Props {
+  event: ProgramEvent;
+}
+
+const props = defineProps<Props>();
+
+const { to } = useObjectTranslation();
+
+const backgroundColor = computed<string>(() => {
+  return props.event.backgroundColor ?? '#0000ff';
+});
+
+const badgeStyles = computed<StyleValue>(() => {
+  return {
+    backgroundColor: backgroundColor.value,
+  };
+});
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/campManagement/programPlanner/CalendarItem.vue b/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
index 28f4290c..503fa35c 100644
--- a/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
+++ b/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
@@ -4,12 +4,11 @@
     class="my-event"
     :class="badgeClasses"
     :style="badgeStyles"
-    :draggable="true"
   >
     <span class="title q-calendar__ellipsis">
-      {{ props.event.title }}
+      {{ to(props.event.title) }}
       <q-tooltip>
-        {{ props.event.details }}
+        {{ to(props.event.details) }}
       </q-tooltip>
     </span>
   </div>
@@ -17,8 +16,8 @@
 
 <script lang="ts" setup>
 import type { ProgramEvent } from '@camp-registration/common/entities';
-import { computed } from 'vue';
-
+import { computed, StyleValue } from 'vue';
+import { useObjectTranslation } from 'src/composables/objectTranslation';
 interface Props {
   event: ProgramEvent;
   timeStartPosition?: (time?: string) => number;
@@ -27,6 +26,8 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const { to } = useObjectTranslation();
+
 const backgroundColor = computed<string>(() => {
   return props.event.backgroundColor ?? '#0000ff';
 });
@@ -34,25 +35,21 @@ const backgroundColor = computed<string>(() => {
 const badgeClasses = computed<Record<string, string | boolean>>(() => {
   return {
     [`text-white bg-${props.event.backgroundColor}`]: true,
-    'full-width': !props.event.side || props.event.side === 'full',
+    'full-width': !props.event.side || props.event.side === 'auto',
     'left-side': props.event.side === 'left',
     'right-side': props.event.side === 'right',
     'rounded-border': true,
   };
 });
 
-const badgeStyles = computed(() => {
-  const s: {
-    top: string;
-    height: string;
-    backgroundColor: string;
-  } = {};
+const badgeStyles = computed<StyleValue>(() => {
+  const s: StyleValue = {};
   if (props.timeStartPosition && props.timeDurationHeight) {
     s.top = props.timeStartPosition(props.event.time) + 'px';
     s.height = props.timeDurationHeight(props.event.duration) + 'px';
-    s.backgroundColor = backgroundColor.value;
   }
-  s['align-items'] = 'flex-start';
+  s.backgroundColor = backgroundColor.value;
+  s.alignItems = 'flex-start';
   return s;
 });
 </script>
diff --git a/frontend/src/components/campManagement/programPlanner/CalendarNavigationBar.vue b/frontend/src/components/campManagement/programPlanner/CalendarNavigationBar.vue
new file mode 100644
index 00000000..4d9dbd6b
--- /dev/null
+++ b/frontend/src/components/campManagement/programPlanner/CalendarNavigationBar.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="row justify-between q-pa-sm">
+    <div>Header</div>
+
+    <div>
+      <q-btn
+        icon="arrow_back"
+        rounded
+        dense
+        @click="previous"
+      />
+      <q-btn
+        icon="arrow_forward"
+        rounded
+        dense
+        @click="next"
+      />
+    </div>
+
+    <q-select
+      v-model="daysRange"
+      :label="t('options.range.label')"
+      :options="dateRangeOptions"
+      rounded
+      outlined
+      dense
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { computed, onMounted } from 'vue';
+
+const { t } = useI18n();
+
+interface Props {
+  modelValue: number;
+  start: string | Date;
+  end: string | Date;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: number);
+  (e: 'next'): void;
+  (e: 'previous'): void;
+}>();
+
+onMounted(() => {
+  daysRange.value = maxDays.value;
+});
+
+const daysRange = computed({
+  get: () => props.modelValue,
+  set: (val: number) => emit('update:modelValue', val),
+});
+
+function next() {
+  emit('next');
+}
+
+function previous() {
+  emit('previous');
+}
+
+const dateRangeOptions = computed(() =>
+  Array.from({ length: maxDays.value }, (_, index) => index + 1),
+);
+
+const maxDays = computed<number>(() => {
+  return daysBetweenDates(new Date(props.start), new Date(props.end));
+});
+
+function daysBetweenDates(startDate: Date, endDate: Date): number {
+  // Calculate the time difference in milliseconds
+  const timeDifference = endDate.getTime() - startDate.getTime();
+
+  // Calculate the number of days and round up
+  return Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
+}
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/campManagement/programPlanner/DragAndDropScope.ts b/frontend/src/components/campManagement/programPlanner/DragAndDropScope.ts
new file mode 100644
index 00000000..2a7ea1d5
--- /dev/null
+++ b/frontend/src/components/campManagement/programPlanner/DragAndDropScope.ts
@@ -0,0 +1,4 @@
+export interface DragAndDropScope {
+  timestamp: Timestamp;
+  droppable: boolean;
+}
diff --git a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
new file mode 100644
index 00000000..3bdf4a7f
--- /dev/null
+++ b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="column">
+    <calendar-navigation-bar
+      v-model="range"
+      class="col-shrink"
+      :start="props.camp.startAt"
+      :end="props.camp.endAt"
+      @next="onNextNavigation"
+      @previous="onPreciousNavigation"
+    />
+
+    <div class="col relative-position">
+      <q-calendar-day
+        ref="calendar"
+        v-model="selectedDate"
+        view="day"
+        :drag-enter-func="onDragEnter"
+        :drag-over-func="onDragOver"
+        :drag-leave-func="onDragLeave"
+        :drop-func="onDrop"
+        :weekday-class="onWeekdayClass"
+        :interval-class="onIntervalClass"
+        :max-days="range"
+        :interval-start="intervalStart"
+        :interval-count="intervalCount"
+        :interval-minutes="props.timeInterval"
+        hour24-format
+        bordered
+        hoverable
+        animated
+        transition-next="slide-left"
+        transition-prev="slide-right"
+        class="fit absolute"
+      >
+        <template #head-day-event="{ scope: { timestamp } }">
+          <div class="column">
+            <calendar-day-item
+              v-for="event in getFullDayEvents(timestamp.date)"
+              :key="event.id"
+              :event="event"
+              :draggable="true"
+              @dragstart="onDragStart($event, event)"
+            />
+          </div>
+        </template>
+
+        <template
+          #day-body="{ scope: { timestamp, timeStartPos, timeDurationHeight } }"
+        >
+          <calendar-item
+            v-for="event in getEvents(timestamp.date)"
+            :key="event.id"
+            :event="event"
+            :time-start-position="timeStartPos"
+            :time-duration-height="timeDurationHeight"
+            :draggable="true"
+            @dragstart="onDragStart($event, event)"
+          />
+        </template>
+      </q-calendar-day>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { QCalendarDay } from '@quasar/quasar-ui-qcalendar';
+import { useI18n } from 'vue-i18n';
+import type {
+  CampDetails,
+  ProgramEvent,
+} from '@camp-registration/common/entities';
+import { useQuasar } from 'quasar';
+import { computed, onMounted, ref } from 'vue';
+import CalendarNavigationBar from 'components/campManagement/programPlanner/CalendarNavigationBar.vue';
+import CalendarItem from 'components/campManagement/programPlanner/CalendarItem.vue';
+import CalendarDayItem from 'components/campManagement/programPlanner/CalendarDayItem.vue';
+import { DragAndDropScope } from 'components/campManagement/programPlanner/DragAndDropScope';
+
+interface Props {
+  camp: CampDetails;
+  events: ProgramEvent[];
+  dayStart?: string;
+  dayEnd?: string;
+  timeInterval?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dayStart: '08:00',
+  dayEnd: '21:00',
+  timeInterval: 30,
+});
+
+const emit = defineEmits<{
+  (e: 'update', id: string, event: Partial<ProgramEvent>): void;
+  (e: 'add', event: Omit<ProgramEvent, 'id'>): void;
+  (e: 'delete', id: string): void;
+}>();
+
+const { t, locale } = useI18n();
+const quasar = useQuasar();
+
+const selectedDate = ref<string>(initialSelectedDate());
+
+const range = ref<number>(1);
+
+const intervalStart = computed<number>(() => {
+  const start = props.dayStart.split(':');
+  if (start.length !== 2) {
+    return 0;
+  }
+  const minutes = parseInt(start[0]) * 60 + parseInt(start[1]);
+
+  return minutes / props.timeInterval;
+});
+
+const intervalCount = computed<number>(() => {
+  const end = props.dayEnd.split(':');
+  if (end.length !== 2) {
+    return 0;
+  }
+  const minutes = parseInt(end[0]) * 60 + parseInt(end[1]);
+
+  return minutes / props.timeInterval - intervalStart.value;
+});
+
+function initialSelectedDate(): string {
+  return props.camp.startAt.split('T')[0];
+}
+
+const eventsMap = computed<Record<string, ProgramEvent[]>>(() => {
+  return props.events
+    .filter(
+      (event): event is ProgramEvent & Required<Pick<ProgramEvent, 'date'>> =>
+        !!event.date,
+    )
+    .reduce(
+      (map, event) => {
+        if (!(event.date in map)) {
+          map[event.date] = [];
+        }
+        map[event.date].push(event);
+
+        return map;
+      },
+      {} as Record<string, ProgramEvent[]>,
+    );
+});
+
+function getFullDayEvents(date: string) {
+  const events = eventsMap.value[date] || [];
+
+  return events.filter((value) => !value.time);
+}
+
+function getEvents(date: string) {
+  const events = eventsMap.value[date] || [];
+
+  // TODO Apply side when side is auto
+
+  return events;
+}
+
+function onDragStart(e: DragEvent, event: ProgramEvent): void {
+  if (!e.dataTransfer) {
+    return;
+  }
+
+  e.dataTransfer.dropEffect = 'copy';
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('eventId', event.id);
+}
+
+function onDragEnter(
+  e: DragEvent,
+  type: string,
+  scope: DragAndDropScope,
+): boolean {
+  e.preventDefault();
+  return true;
+}
+
+function onDragOver(
+  e: DragEvent,
+  type: string,
+  scope: DragAndDropScope,
+): boolean {
+  e.preventDefault();
+  return true;
+}
+
+function onDragLeave(
+  e: DragEvent,
+  type: string,
+  scope: DragAndDropScope,
+): boolean {
+  return false;
+}
+
+function onDrop(e: DragEvent, type: string, scope: DragAndDropScope): boolean {
+  const eventId = e.dataTransfer?.getData('eventId');
+  if (!eventId) {
+    return false;
+  }
+
+  const event = props.events.find((value) => value.id === eventId);
+  if (!event) {
+    return false;
+  }
+
+  let eventUpdate: Pick<ProgramEvent, 'time' | 'date' | 'duration' | 'side'>;
+  switch (type) {
+    case 'interval':
+      // Dropped on a time slot
+      eventUpdate = {
+        date: scope.timestamp.date,
+        time: scope.timestamp.time,
+        duration: event.duration ?? 60,
+        side: event.side ?? 'auto',
+      };
+      break;
+    case 'head-day':
+      // Dropped on the header
+      eventUpdate = {
+        date: scope.timestamp.date,
+        time: undefined,
+      };
+      break;
+    default:
+      eventUpdate = {
+        date: undefined,
+        time: undefined,
+      };
+  }
+
+  emit('update', eventId, eventUpdate);
+
+  return false;
+}
+
+function onIntervalClass({ scope }: { scope: DragAndDropScope }) {
+  return {
+    droppable: scope.droppable,
+  };
+}
+
+function onWeekdayClass({ scope }: { scope: DragAndDropScope }) {
+  return {
+    droppable: scope.droppable,
+  };
+}
+
+function onNextNavigation() {
+  // TODO How to shift
+}
+
+function onPreciousNavigation() {
+  // TODO How to shift
+}
+</script>
+
+<style lang="scss">
+.droppable {
+  box-shadow: inset 0 0 0 1px rgba(0, 140, 200, 0.8);
+}
+</style>
diff --git a/frontend/src/components/campManagement/programPlanner/dialogs/CalendarSettingsDialog.vue b/frontend/src/components/campManagement/programPlanner/dialogs/CalendarSettingsDialog.vue
new file mode 100644
index 00000000..87545aff
--- /dev/null
+++ b/frontend/src/components/campManagement/programPlanner/dialogs/CalendarSettingsDialog.vue
@@ -0,0 +1,147 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    @hide="onDialogHide"
+  >
+    <q-card class="q-dialog-plugin q-pb-none">
+      <q-form
+        @submit="onOKClick"
+        @reset="onCancelClick"
+      >
+        <q-card-section>
+          <div class="text-h6">
+            {{ t('title') }}
+          </div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none q-gutter-y-sm column">
+          <!-- Time interval -->
+          <q-input
+            v-model.number="data.timeInterval"
+            :label="t('field.timeInterval.label')"
+            :hint="t('field.timeInterval.hint')"
+            hide-bottom-space
+            outlined
+            rounded
+          />
+
+          <!-- Day start -->
+          <time-input
+            v-model="data.dayStart"
+            :label="t('field.dayStart.label')"
+            :hint="t('field.dayStart.hint')"
+            hide-bottom-space
+            outlined
+            rounded
+          />
+
+          <!-- Day end -->
+          <time-input
+            v-model="data.dayEnd"
+            :label="t('field.dayEnd.label')"
+            :hint="t('field.dayEnd.hint')"
+            hide-bottom-space
+            outlined
+            rounded
+          />
+        </q-card-section>
+
+        <!-- action buttons -->
+        <q-card-actions align="right">
+          <q-btn
+            type="reset"
+            outline
+            rounded
+            color="primary"
+            :label="t('actions.cancel')"
+          />
+          <q-btn
+            type="submit"
+            rounded
+            color="primary"
+            :label="t('actions.save')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" setup>
+import TimeInput from 'components/common/inputs/TimeInput.vue';
+import { useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { reactive, toRaw } from 'vue';
+
+interface CalendarSettings {
+  dayStart: string;
+  dayEnd: string;
+  timeInterval: number;
+}
+
+interface Props {
+  modelValue: object;
+}
+
+const props = defineProps<Props>();
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const data = reactive<Partial<CalendarSettings>>(initialValue());
+
+function initialValue(): Partial<CalendarSettings> {
+  return structuredClone(toRaw(props.modelValue));
+}
+
+const { t } = useI18n();
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+// dialogRef      - Vue ref to be applied to QDialog
+// onDialogHide   - Function to be used as handler for @hide on QDialog
+// onDialogOK     - Function to call to settle dialog with "ok" outcome
+//                    example: onDialogOK() - no payload
+//                    example: onDialogOK({ /*...*/ }) - with payload
+// onDialogCancel - Function to call to settle dialog with "cancel" outcome
+
+function onOKClick(): void {
+  onDialogOK();
+}
+
+function onCancelClick() {
+  onDialogCancel();
+}
+</script>
+
+<style scoped></style>
+
+<i18n lang="yaml" locale="en">
+title: 'Calendar Settings'
+
+fields:
+  dayStart:
+    label: 'Day start'
+    hint: ''
+  dayEnd:
+    label: 'Day end'
+    hint: ''
+  timeInterval:
+    label: 'Time interval'
+    hint: 'How many minutes should one interval have'
+
+actions:
+  save: 'Save'
+  cancel: 'Cancel'
+</i18n>
+
+<i18n lang="yaml" locale="de"></i18n>
+
+<i18n lang="yaml" locale="fr"></i18n>
+
+<style lang="scss">
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>
diff --git a/frontend/src/pages/campManagement/ParticipantsIndexPage.vue b/frontend/src/pages/campManagement/ParticipantsIndexPage.vue
index 0704f103..771e953f 100644
--- a/frontend/src/pages/campManagement/ParticipantsIndexPage.vue
+++ b/frontend/src/pages/campManagement/ParticipantsIndexPage.vue
@@ -5,7 +5,6 @@
   >
     <result-table
       v-if="camp.data.value"
-      ref="table"
       class="absolute fit"
       :questions="columns"
       :results="results"
diff --git a/frontend/src/pages/campManagement/ProgramPlannerPage.vue b/frontend/src/pages/campManagement/ProgramPlannerPage.vue
index b12323ba..c616270a 100644
--- a/frontend/src/pages/campManagement/ProgramPlannerPage.vue
+++ b/frontend/src/pages/campManagement/ProgramPlannerPage.vue
@@ -1,72 +1,34 @@
 <template>
-  <!-- https://github.com/quasarframework/quasar-ui-qcalendar/blob/dev/demo/src/pages/Calendar.vue -->
   <page-state-handler
     :loading="loading"
     :error="error"
-    padding
-    class="column"
   >
-    <div class="col-shrink">Header</div>
-
-    <!-- TODO FIx element height -->
-    <!-- Classes absolute fit is currently not working due to other style classes -->
-    <q-calendar
-      v-model="startAt"
-      :view="view"
-      :mood="mode"
-      :weekdays="weekDays"
-      :locale="locale"
-      :max-days="maxDays"
-      transition-prev="slide-right"
-      transition-next="slide-left"
-      :interval-minutes="intervalMinutes"
-      :interval-start="intervalStart"
-      :interval-count="intervalCount"
-      :drag-enter-func="onDragEnter"
-      :drag-over-func="onDragOver"
-      :drag-leave-func="onDragLeave"
-      :drag-end-func="onDragEnd"
-      :drop-func="onDrop"
-      hour24-format
-      animated
-    >
-      <template
-        #day-body="{ scope: { timestamp, timeStartPos, timeDurationHeight } }"
-      >
-        <calendar-item
-          v-for="event in getEvents(timestamp.date)"
-          :key="event.id"
-          :event="event"
-          :time-start-position="timeStartPos"
-          :time-duration-height="timeDurationHeight"
-        />
-      </template>
-    </q-calendar>
+    <program-calendar
+      v-if="data"
+      :camp="data"
+      :events="events"
+      class="absolute fit"
+      @add="onEventAdd"
+      @update="onEventUpdate"
+      @delete="onEventDelete"
+    />
   </page-state-handler>
 </template>
 
 <script lang="ts" setup>
 import PageStateHandler from 'components/common/PageStateHandler.vue';
-import {
-  addToDate,
-  compareTimestamps,
-  diffTimestamp,
-  isBetweenDates,
-  parsed,
-  parseTime,
-  QCalendar,
-  Timestamp,
-} from '@quasar/quasar-ui-qcalendar';
-import { computed, CSSProperties, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { computed, onMounted, ref } from 'vue';
 import { useCampDetailsStore } from 'stores/camp-details-store';
-import CalendarItem from 'components/campManagement/programPlanner/CalendarItem.vue';
+import ProgramCalendar from 'components/campManagement/programPlanner/ProgramCalendar.vue';
+import { storeToRefs } from 'pinia';
 import type { ProgramEvent } from '@camp-registration/common/entities';
-import { prevent, stop, stopAndPrevent } from 'quasar/src/utils/event';
-import { colors } from 'quasar';
 
 const campDetailsStore = useCampDetailsStore();
-const { t, locale } = useI18n();
+const { data } = storeToRefs(campDetailsStore);
+
+onMounted(async () => {
+  await campDetailsStore.fetchData();
+});
 
 const loading = computed<boolean>(() => {
   return campDetailsStore.isLoading;
@@ -76,421 +38,53 @@ const error = computed<unknown>(() => {
   return campDetailsStore.error;
 });
 
-const settings = ref({
-  daysPerWeek: 8,
-  dayStart: '09:30',
-  dayEnd: '18:15',
-  timeIntervalMinutes: 30,
-});
-
-const startAt = ref('2023-07-29');
-const mode = ref('day');
-const view = ref();
-const weekDays = ref<number[]>([1, 2, 3, 4, 5, 6, 0]);
-
-const dragging = ref(false);
-const draggedEvent = ref<ProgramEvent>();
-
-const intervalMinutes = computed<number | undefined>(() => {
-  return settings.value.timeIntervalMinutes;
-});
-
-const intervalCount = computed<number | undefined>(() => {
-  const intervalMinutes = settings.value.timeIntervalMinutes;
-  const dayStart = settings.value.dayStart ?? '00:00';
-  const dayEnt = settings.value.dayEnd ?? '24:00';
-
-  if (intervalMinutes === undefined || intervalMinutes === 0) {
-    return undefined;
-  }
-
-  const start = getTime(dayStart);
-  const end = getTime(dayEnt);
-  const diff = end - start;
-
-  return Math.floor(diff / intervalMinutes);
-});
-
-const intervalStart = computed<number | undefined>(() => {
-  const intervalMinutes = settings.value.timeIntervalMinutes;
-  const dayStart = settings.value.dayStart;
-  if (
-    dayStart === undefined ||
-    intervalMinutes === undefined ||
-    intervalMinutes === 0
-  ) {
-    return undefined;
-  }
-
-  const start = getTime(dayStart);
-
-  return Math.floor(start / intervalMinutes);
-});
-
-const maxDays = computed<number>(() => {
-  if (campDetailsStore.data === undefined) {
-    return 0;
-  }
-
-  return calculateDaysBetween(
-    campDetailsStore.data.startAt,
-    campDetailsStore.data.endAt,
-  );
-});
-
-// TODO https://qcalendar.netlify.app/developing/qcalendarday-week/week-drag-and-drop
-// TODO https://qcalendar.netlify.app/developing/qcalendarday-week/week-slot-day-body
-
-function isCssColor(color) {
-  return !!color && !!color.match(/^(#|(rgb|hsl)a?\()/);
-}
-
-function badgeClasses(event: ProgramEvent, type: string) {
-  const cssColor = isCssColor(event.backgroundColor);
-  const isHeader = type === 'header';
-  return {
-    [`text-white bg-${event.backgroundColor}`]: !cssColor,
-    'full-width': !isHeader && (!event.side || event.side === 'full'),
-    'left-side': !isHeader && event.side === 'left',
-    'right-side': !isHeader && event.side === 'right',
-  };
-}
-
-function badgeStyles(
-  event: ProgramEvent,
-  type: string,
-  timeStartPos?,
-  timeDurationHeight?,
-) {
-  const s: CSSProperties = {};
-  if (isCssColor(event.backgroundColor)) {
-    s.backgroundColor = event.backgroundColor;
-    s.color =
-      colors.luminosity(event.backgroundColor) > 0.5 ? 'black' : 'white';
-  }
-  if (timeStartPos) {
-    // don't clamp position to 0px
-    s.top = timeStartPos(event.time, false) + 'px';
-    s.position = 'absolute';
-    if (event.side !== undefined) {
-      s.width = '50%';
-      if (event.side === 'right') {
-        s.left = '50%';
-      }
-    } else {
-      s.width = '100%';
-    }
-  }
-  if (timeDurationHeight) {
-    s.height = timeDurationHeight(event.duration) + 'px';
-  }
-  s.alignItems = 'flex-start';
-  return s;
-}
-
-function showEvent(event: ProgramEvent) {
-  // TODO Open dialog
-}
-
-function onDragStart(e, event) {
-  dragging.value = true;
-  draggedEvent.value = event;
-  stop(e);
-
-  // TODO Is this needed?
-  // e.dataTransfer.dropEffect = 'copy';
-  // e.dataTransfer.effectAllowed = 'move';
-  // e.dataTransfer.setData('ID', event.id);
-}
-
-function onDragEnter(e, event) {
-  prevent(e);
-}
-
-function onDragOver(e, event: ProgramEvent, type: string) {
-  // TODO
-  // if (type === 'day') {
-  //   stopAndPrevent(e);
-  //   return draggedEvent.value.date !== day.date;
-  // } else if (type === 'interval') {
-  //   stopAndPrevent(ev);
-  //   return (
-  //     this.draggedEvent.date !== day.date && this.draggedEvent.time !== day.time
-  //   );
-  // }
-}
-
-function onDragEnd(e, event) {
-  stopAndPrevent(e);
-  // TODO Reset drag
-}
-
-function onDragLeave(e, type, scope) {
-  console.log('onDragLeave');
-  return false;
-}
-
-function onDrop(e, type, scope) {
-  // console.log('onDrop', type, scope)
-  // const itemID = parseInt(e.dataTransfer.getData('ID'), 10)
-  // const event = { ...this.defaultEvent }
-  // event.id = this.events.length + 1
-  // const item = this.dragItems.filter(item => item.id === itemID)
-  // event.type = item[ 0 ].id
-  // event.name = item[ 0 ].name
-  // event.date = scope.timestamp.date
-  // if (type === 'interval') {
-  //   event.time = scope.timestamp.time
-  // }
-  // else { // head-day
-  //   event.allDay = true
-  // }
-  // this.events.push(event)
-  return false;
-}
-
-function getTime(timeString: string): number {
-  const [hours, minutes] = timeString.split(':').map(Number);
-  return hours * 60 + minutes;
-}
-
-function calculateDaysBetween(startAt: string, endAt: string): number {
-  const ONE_DAY_IN_MS = 1000 * 60 * 60 * 24; // number of milliseconds in one day
-  const start = new Date(startAt); // make a copy of the start date
-  const end = new Date(endAt); // make a copy of the end date
-  start.setHours(0, 0, 0, 0); // set the time to midnight
-  end.setHours(0, 0, 0, 0); // set the time to midnight
-  const diffInMs = end.getTime() - start.getTime(); // calculate the difference in milliseconds
-  const diffInDays = Math.floor(diffInMs / ONE_DAY_IN_MS); // calculate the difference in days
-  return diffInDays + 1; // add one to count every started day
-}
-
 const events = ref<ProgramEvent[]>([
   {
-    id: '1',
-    title: '1st of the Month',
-    details: 'Everything is funny as long as it is happening to someone else',
-    date: '2023-07-29',
-    backgroundColor: 'orange',
-  },
-  {
-    id: '2',
-    title: 'Sisters Birthday',
-    details: 'Buy a nice present',
-    date: '2023-07-30',
-    backgroundColor: 'green',
-    icon: 'fas fa-birthday-cake',
-  },
-  {
-    id: '3',
-    title: 'Meeting',
-    details: 'Time to pitch my idea to the company',
-    date: '2023-07-31',
-    time: '10:00',
-    duration: 120,
+    id: crypto.randomUUID(),
+    title: 'Left Test',
+    details: 'Full day',
     backgroundColor: 'red',
-    icon: 'fas fa-handshake',
-  },
-  {
-    id: '4',
-    title: 'Lunch',
-    details: 'Company is paying!',
-    date: '2023-07-31',
-    time: '11:15',
-    duration: 90,
-    backgroundColor: 'teal',
-    icon: 'fas fa-hamburger',
-  },
-  {
-    id: '41',
-    title: 'Second Lunch',
-    details: 'Company is paying!',
-    date: '2023-07-31',
-    time: '12:00',
-    duration: 90,
-    backgroundColor: 'green',
-    icon: 'fas fa-hamburger',
+    side: 'left',
+    date: '2024-07-31',
   },
   {
-    id: '5',
-    title: 'Visit mom',
-    details: 'Always a nice chat with mom',
-    date: '2023-07-30',
-    time: '17:00',
-    duration: 90,
-    backgroundColor: 'grey',
-    icon: 'fas fa-car',
-  },
-  {
-    id: '6',
-    title: 'Conference',
-    details: 'Teaching Javascript 101',
-    date: '2023-08-03',
-    time: '08:00',
-    duration: 540,
-    backgroundColor: 'blue',
-    icon: 'fas fa-chalkboard-teacher',
-  },
-  {
-    id: '7',
-    title: 'Girlfriend',
-    details: 'Meet GF for dinner at Swanky Restaurant',
-    date: '2023-08-04',
-    time: '19:00',
-    duration: 180,
-    backgroundColor: 'teal',
-    icon: 'fas fa-utensils',
+    id: crypto.randomUUID(),
+    title: 'Auto test',
+    details: 'Full day',
+    backgroundColor: 'red',
+    side: 'auto',
+    date: '2024-08-01',
+    time: '10:30',
+    duration: 60,
   },
 ]);
 
-const eventsMap = computed(() => {
-  const map = {};
-  // this.events.forEach(event => (map[ event.date ] = map[ event.date ] || []).push(event))
-  events.value.forEach((event) => {
-    if (!map[event.date]) {
-      map[event.date] = [];
-    }
-    map[event.date].push(event);
+function onEventAdd(event: Omit<ProgramEvent, 'id'>) {
+  // TODO Call Store
+  events.value.push({
+    ...event,
+    id: crypto.randomUUID(),
   });
+}
 
-  return map;
-});
-
-function getEvents(date: string): ProgramEvent[] {
-  // get all events for the specified date
-  const events = eventsMap.value[date] || [];
-
-  // Convert all times to timestamps first
-  const eventTimes: {
-    start: Timestamp;
-    end: Timestamp;
-  }[] = events.map((event) => {
-    const start = addToDate(parsed(event.date), {
-      minute: parseTime(event.time),
-    });
-    const end = addToDate(start, { minute: event.duration });
+function onEventUpdate(id: string, eventUpdate: Partial<ProgramEvent>) {
+  // TODO Call Store
+  events.value = events.value.map((event) => {
+    if (event.id !== id) {
+      return event;
+    }
 
     return {
-      start: start,
-      end: end,
+      ...event,
+      ...eventUpdate,
     };
   });
+}
 
-  // Set the side of all events
-  for (let i = 0; i < events.length; i++) {
-    // Look ahead - all events in the past are already assigned
-    // Technically, the last element could be skipped as it can't be compared
-    for (let j = i + 1; j < events.length; j++) {
-      // Check if timestamps overlap
-      const overlapping =
-        isBetweenDates(
-          eventTimes[j].start,
-          eventTimes[i].start,
-          eventTimes[i].end,
-          true,
-        ) ||
-        isBetweenDates(
-          eventTimes[j].end,
-          eventTimes[i].start,
-          eventTimes[i].end,
-          true,
-        );
-      // Check if start and end are equal. This is considered as between but
-      //  should be ignored here.
-      const continuous =
-        compareTimestamps(eventTimes[i].start, eventTimes[j].end) ||
-        compareTimestamps(eventTimes[j].start, eventTimes[i].end);
-
-      // Skip all event that do not overlap
-      if (!overlapping || continuous) {
-        continue;
-      }
-
-      // Both events overlap. If one event has a side defined, assign the
-      //  other side to the other element. If both elements don't have a side
-      //  defined, the earlier event gets the left side.
-      if (events[i].side === undefined) {
-        // Other element has already a side. So take the other one
-        if (events[j].side !== undefined) {
-          events[i].side = events[j].side === 'left' ? 'right' : 'left';
-          continue;
-        }
-
-        // Compare who starts first
-        events[i].side =
-          diffTimestamp(eventTimes[i].start, eventTimes[j].start, true) >= 0
-            ? 'left'
-            : 'right';
-      }
-
-      // Set side of second element if not already set
-      if (events[j].side !== undefined) {
-        continue;
-      }
-
-      events[j].side = events[i].side === 'left' ? 'right' : 'left';
-    }
-
-    events[i] ??= 'full';
-  }
-
-  return events;
+function onEventDelete(id: string) {
+  // TODO Call Store
+  events.value = events.value.filter((event) => event.id === id);
 }
 </script>
 
-<style lang="sass" scoped>
-.my-event
-  position: absolute
-  font-size: 12px
-  justify-content: center
-  margin: 0 1px
-  text-overflow: ellipsis
-  overflow: hidden
-  cursor: pointer
-
-.title
-  position: relative
-  display: flex
-  justify-content: center
-  align-items: center
-  height: 100%
-
-.text-white
-  color: white
-
-.bg-blue
-  background: blue
-
-.bg-green
-  background: green
-
-.bg-orange
-  background: orange
-
-.bg-red
-  background: red
-
-.bg-teal
-  background: teal
-
-.bg-grey
-  background: grey
-
-.bg-purple
-  background: purple
-
-.full-width
-  left: 0
-  width: calc(100% - 2px)
-
-.left-side
-  left: 0
-  width: calc(50% - 3px)
-
-.right-side
-  left: 50%
-  width: calc(50% - 3px)
-
-  .rounded-border
-    border-radius: 2px
-</style>
+<style scoped></style>
diff --git a/package-lock.json b/package-lock.json
index 616a2e92..ae49f844 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
       "devDependencies": {}
     },
     "backend": {
+      "name": "@camp-registration/api",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
@@ -105,6 +106,7 @@
       }
     },
     "common": {
+      "name": "@camp-registration/common",
       "version": "0.0.1",
       "license": "ISC",
       "devDependencies": {
@@ -128,6 +130,7 @@
       }
     },
     "frontend": {
+      "name": "@camp-registration/web",
       "version": "0.0.1",
       "dependencies": {
         "@camp-registration/common": "*",
@@ -2610,12 +2613,12 @@
       }
     },
     "node_modules/@quasar/quasar-app-extension-qcalendar": {
-      "version": "4.0.0-beta.16",
-      "resolved": "https://registry.npmjs.org/@quasar/quasar-app-extension-qcalendar/-/quasar-app-extension-qcalendar-4.0.0-beta.16.tgz",
-      "integrity": "sha512-Rj3KKjPFrE13cswlZAPcqdqi1YH9CeHMpWIw8xsNqdLhCoaRhMGbRas9fvHFLJOXpnsDaVwWINNgN/bBUyn99w==",
+      "version": "4.0.0-beta.15",
+      "resolved": "https://registry.npmjs.org/@quasar/quasar-app-extension-qcalendar/-/quasar-app-extension-qcalendar-4.0.0-beta.15.tgz",
+      "integrity": "sha512-i6hQkcP70LXLfVMPZMKQjSg3681gjZmASV3vq6ULzc0LhtBiPneLdVNNtH2itkWxAmaUj+1heQDI5Pa0F7VKLQ==",
       "dev": true,
       "dependencies": {
-        "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.16"
+        "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.15"
       },
       "engines": {
         "node": ">= 10.0.0",

From ffcc547e098bad44963bcff526615d03764812d1 Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Mon, 5 Feb 2024 09:06:24 +0100
Subject: [PATCH 03/13] Wip: Work for program planner

---
 backend/prisma/schema.prisma                  |  16 +++
 backend/src/controllers/index.ts              |   1 +
 .../controllers/program-event.controller.ts   |  66 +++++++++
 backend/src/resources/index.ts                |   1 +
 .../src/resources/program-event.resource.ts   |  20 +++
 .../api/v1/camps/program-event.routes.ts      |  55 +++++++
 backend/src/services/index.ts                 |   1 +
 .../src/services/program-planner.service.ts   |  50 +++++++
 backend/src/validations/index.ts              |   1 +
 .../validations/program-event.validation.ts   |  72 ++++++++++
 common/src/entities/ProgramEvent.ts           |  10 +-
 .../programPlanner/ProgramCalendar.vue        |  38 ++++-
 frontend/src/composables/serviceHandler.ts    |   4 +-
 .../campManagement/ProgramPlannerPage.vue     |  66 +++------
 frontend/src/services/APIService.ts           |   2 +
 frontend/src/services/ProgramEventService.ts  |  58 ++++++++
 frontend/src/stores/program-planner-store.ts  | 135 ++++++++++++++++++
 frontend/src/stores/room-planner-store.ts     |   4 +-
 18 files changed, 542 insertions(+), 58 deletions(-)
 create mode 100644 backend/src/controllers/program-event.controller.ts
 create mode 100644 backend/src/resources/program-event.resource.ts
 create mode 100644 backend/src/routes/api/v1/camps/program-event.routes.ts
 create mode 100644 backend/src/services/program-planner.service.ts
 create mode 100644 backend/src/validations/program-event.validation.ts
 create mode 100644 frontend/src/services/ProgramEventService.ts
 create mode 100644 frontend/src/stores/program-planner-store.ts

diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
index e41e66dd..66be6474 100644
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -181,3 +181,19 @@ model File {
 
   @@map("files")
 }
+
+model ProgramEvent {
+  id       String  @id @unique(map: "program_event_id_unique") @db.Char(26)
+  /// [StringOrTranslation]
+  title    Json
+  /// [StringOrTranslation]
+  details  Json?
+  location String?
+  date     String?
+  duration String?
+  time     String?
+  color    String? @map("background_color")
+  side     String?
+
+  @@map("program_events")
+}
diff --git a/backend/src/controllers/index.ts b/backend/src/controllers/index.ts
index e51ea15b..559fcb88 100644
--- a/backend/src/controllers/index.ts
+++ b/backend/src/controllers/index.ts
@@ -8,3 +8,4 @@ export { default as roomController } from './room.controller';
 export { default as bedController } from './bed.controller';
 export { default as fileController } from './file.controller';
 export { default as feedbackController } from './feedback.controller';
+export { default as programEventController } from './program-event.controller';
diff --git a/backend/src/controllers/program-event.controller.ts b/backend/src/controllers/program-event.controller.ts
new file mode 100644
index 00000000..b0f64c97
--- /dev/null
+++ b/backend/src/controllers/program-event.controller.ts
@@ -0,0 +1,66 @@
+import { catchRequestAsync } from 'utils/catchAsync';
+import httpStatus from 'http-status';
+import { collection, resource } from 'resources/resource';
+import { programPlannerService } from 'services';
+import { programEventResource } from 'resources';
+import { routeModel } from 'utils/verifyModel';
+
+const show = catchRequestAsync(async (req, res) => {
+  const room = routeModel(req.models.room);
+
+  res.json(resource(programEventResource(room)));
+});
+
+const index = catchRequestAsync(async (req, res) => {
+  const { campId } = req.params;
+  const events = await programPlannerService.queryProgramEvent(campId);
+  const resources = events.map((value) => programEventResource(value));
+
+  res.json(collection(resources));
+});
+
+const store = catchRequestAsync(async (req, res) => {
+  const { campId } = req.params;
+  const data = req.body;
+  const event = await programPlannerService.createProgramEvent(campId, {
+    title: data.title,
+    details: data.details,
+    location: data.location,
+    date: data.date,
+    time: data.time,
+    duration: data.duration,
+    color: data.color,
+    side: data.side,
+  });
+  res.status(httpStatus.CREATED).json(resource(programEventResource(event)));
+});
+
+const update = catchRequestAsync(async (req, res) => {
+  const { roomId } = req.params;
+  const data = req.body;
+  const event = await programPlannerService.updateProgramEventById(roomId, {
+    title: data.title,
+    details: data.details,
+    location: data.location,
+    date: data.date,
+    time: data.time,
+    duration: data.duration,
+    color: data.color,
+    side: data.side,
+  });
+  res.json(resource(programEventResource(event)));
+});
+
+const destroy = catchRequestAsync(async (req, res) => {
+  const { roomId } = req.params;
+  await programPlannerService.deleteProgramEventById(roomId);
+  res.status(httpStatus.NO_CONTENT).send();
+});
+
+export default {
+  index,
+  show,
+  store,
+  update,
+  destroy,
+};
diff --git a/backend/src/resources/index.ts b/backend/src/resources/index.ts
index 7908c316..355e317f 100644
--- a/backend/src/resources/index.ts
+++ b/backend/src/resources/index.ts
@@ -10,3 +10,4 @@ export { default as campManagerResource } from './manager.resource';
 export { default as roomResource } from './room.resource';
 export { default as bedResource } from './bed.rescource';
 export { default as fileResource } from './file.rescource';
+export { default as programEventResource } from './program-event.resource';
diff --git a/backend/src/resources/program-event.resource.ts b/backend/src/resources/program-event.resource.ts
new file mode 100644
index 00000000..fc484980
--- /dev/null
+++ b/backend/src/resources/program-event.resource.ts
@@ -0,0 +1,20 @@
+import { ProgramEvent } from '@prisma/client';
+import type { ProgramEvent as ProgramEventResource } from '@camp-registration/common/entities';
+
+const programEventResource = (
+  programEvent: ProgramEvent,
+): ProgramEventResource => {
+  return {
+    id: programEvent.id,
+    title: programEvent.title,
+    details: programEvent.details,
+    location: programEvent.location,
+    date: programEvent.date,
+    time: programEvent.time,
+    duration: programEvent.duration,
+    color: programEvent.color,
+    side: programEvent.side,
+  };
+};
+
+export default programEventResource;
diff --git a/backend/src/routes/api/v1/camps/program-event.routes.ts b/backend/src/routes/api/v1/camps/program-event.routes.ts
new file mode 100644
index 00000000..e5d10f2d
--- /dev/null
+++ b/backend/src/routes/api/v1/camps/program-event.routes.ts
@@ -0,0 +1,55 @@
+import express from 'express';
+import { auth, guard, validate } from 'middlewares';
+import { campManager } from 'guards';
+import { routeModel, verifyModelExists } from 'utils/verifyModel';
+import { catchParamAsync } from 'utils/catchAsync';
+import { programPlannerService } from 'services';
+import { programEventController } from 'controllers';
+import { programEventValidation } from 'validations';
+
+const router = express.Router({ mergeParams: true });
+
+router.param(
+  'programEventId',
+  catchParamAsync(async (req, res, next, id) => {
+    const camp = routeModel(req.models.camp);
+    const template = await programPlannerService.getProgramEventById(
+      camp.id,
+      id,
+    );
+    req.models.template = verifyModelExists(template);
+    next();
+  }),
+);
+
+router.get(
+  '/',
+  auth(),
+  guard([campManager]),
+  validate(programEventValidation.index),
+  programEventController.index,
+);
+router.get(
+  '/:programEventId',
+  auth(),
+  guard([campManager]),
+  validate(programEventValidation.show),
+  programEventController.show,
+);
+router.post('/', auth(), guard([campManager]), programEventController.store);
+router.put(
+  '/:programEventId',
+  auth(),
+  guard([campManager]),
+  validate(programEventValidation.update),
+  programEventController.update,
+);
+router.delete(
+  '/:programEventId',
+  auth(),
+  guard([campManager]),
+  validate(programEventValidation.destroy),
+  programEventController.destroy,
+);
+
+export default router;
diff --git a/backend/src/services/index.ts b/backend/src/services/index.ts
index 9febd79b..04190d41 100644
--- a/backend/src/services/index.ts
+++ b/backend/src/services/index.ts
@@ -10,3 +10,4 @@ export { default as fileService } from './file.service';
 export { default as roomService } from './room.service';
 export { default as bedService } from './bed.service';
 export { default as feedbackService } from './feedback.service';
+export { default as programPlannerService } from './program-planner.service';
diff --git a/backend/src/services/program-planner.service.ts b/backend/src/services/program-planner.service.ts
new file mode 100644
index 00000000..c5a13c02
--- /dev/null
+++ b/backend/src/services/program-planner.service.ts
@@ -0,0 +1,50 @@
+import { type Prisma } from '@prisma/client';
+import prisma from 'client';
+import { ulid } from 'utils/ulid';
+
+const getProgramEventById = async (campId: string, id: string) => {
+  return prisma.programEvent.findFirst({
+    where: { id, campId },
+  });
+};
+
+const queryProgramEvent = async (campId: string) => {
+  return prisma.programEvent.findMany({
+    where: { campId },
+  });
+};
+
+const createProgramEvent = async (
+  campId: string,
+  data: Omit<Prisma.ProgramEventCreateInput, 'id'>,
+) => {
+  return prisma.programEvent.create({
+    data: {
+      id: ulid(),
+      campId,
+      ...data,
+    },
+  });
+};
+
+const updateProgramEventById = async (
+  roomId: string,
+  updateBody: Omit<Prisma.ProgramEventUpdateInput, 'id'>,
+) => {
+  return prisma.room.update({
+    where: { id: roomId },
+    data: updateBody,
+  });
+};
+
+const deleteProgramEventById = async (id: string) => {
+  await prisma.programEvent.delete({ where: { id: id } });
+};
+
+export default {
+  getProgramEventById,
+  queryProgramEvent,
+  createProgramEvent,
+  updateProgramEventById,
+  deleteProgramEventById,
+};
diff --git a/backend/src/validations/index.ts b/backend/src/validations/index.ts
index d335a461..d15ed993 100644
--- a/backend/src/validations/index.ts
+++ b/backend/src/validations/index.ts
@@ -9,3 +9,4 @@ export { default as roomValidation } from './room.validation';
 export { default as bedValidation } from './bed.validation';
 export { default as fileValidation } from './file.validation';
 export { default as feedbackValidation } from './feedback.validation';
+export { default as programEventValidation } from './program-event.validation';
diff --git a/backend/src/validations/program-event.validation.ts b/backend/src/validations/program-event.validation.ts
new file mode 100644
index 00000000..cf533bcc
--- /dev/null
+++ b/backend/src/validations/program-event.validation.ts
@@ -0,0 +1,72 @@
+import Joi from 'joi';
+import JoiDate from '@joi/date';
+import { ProgramEvent } from '@camp-registration/common/entities';
+
+const extendedJoi = Joi.extend(JoiDate);
+
+const translatableSchema = Joi.alternatives()
+  .try(Joi.string(), Joi.object().pattern(Joi.string(), Joi.string()))
+  .required();
+const timeSchema = Joi.string().regex(/^([01]\d|2[0-3]):([0-5]\d)$/);
+const dateSchema = extendedJoi.date().format('YYYY-MM-DD');
+
+const show = {
+  params: Joi.object({
+    campId: Joi.string().required(),
+    programEventId: Joi.string().required(),
+  }),
+};
+
+const index = {
+  params: Joi.object({
+    campId: Joi.string().required(),
+  }),
+};
+
+const store = {
+  params: Joi.object({
+    campId: Joi.string().required(),
+  }),
+  body: Joi.object<ProgramEvent>({
+    title: translatableSchema.required(),
+    details: translatableSchema.optional(),
+    location: translatableSchema.optional(),
+    date: dateSchema.optional(),
+    time: timeSchema.optional(),
+    duration: Joi.number().min(0).optional(),
+    color: Joi.string().required(),
+    side: Joi.string().optional(),
+  }),
+};
+
+const update = {
+  params: Joi.object({
+    campId: Joi.string().required(),
+    programEventId: Joi.string().required(),
+  }),
+  body: Joi.object({
+    title: translatableSchema.optional(),
+    details: translatableSchema.optional(),
+    location: translatableSchema.optional(),
+    date: dateSchema.optional(),
+    time: timeSchema.optional(),
+    duration: Joi.number().min(0).optional(),
+    color: Joi.string().optional(),
+    side: Joi.string().optional(),
+  }),
+};
+
+const destroy = {
+  params: Joi.object({
+    campId: Joi.string().required(),
+    programEventId: Joi.string().required(),
+  }),
+};
+
+export default {
+  show,
+  index,
+  store,
+  update,
+  destroy,
+};
diff --git a/common/src/entities/ProgramEvent.ts b/common/src/entities/ProgramEvent.ts
index 2961f447..8a4c3b18 100644
--- a/common/src/entities/ProgramEvent.ts
+++ b/common/src/entities/ProgramEvent.ts
@@ -2,12 +2,16 @@ import type { Identifiable } from './Identifiable';
 import type { Translatable } from './Translatable';
 
 export interface ProgramEvent extends Identifiable {
-  seriesId?: string;
   title: Translatable;
   details?: Translatable;
+  location?: Translatable;
   date?: string;
-  duration?: number;
   time?: string;
-  backgroundColor: string;
+  duration?: number;
+  color: string;
   side?: 'left' | 'right' | 'auto';
 }
+
+export type ProgramEventCreateData = Omit<ProgramEvent, 'id'>;
+
+export type ProgramEventUpdateData = Partial<ProgramEventCreateData>;
diff --git a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
index 3bdf4a7f..9b56d080 100644
--- a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
+++ b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
@@ -9,6 +9,8 @@
       @previous="onPreciousNavigation"
     />
 
+    <q-resize-observer @resize="onPageResize" />
+
     <div class="col relative-position">
       <q-calendar-day
         ref="calendar"
@@ -24,6 +26,7 @@
         :interval-start="intervalStart"
         :interval-count="intervalCount"
         :interval-minutes="props.timeInterval"
+        :interval-height="intervalHeight"
         hour24-format
         bordered
         hoverable
@@ -68,9 +71,11 @@ import { useI18n } from 'vue-i18n';
 import type {
   CampDetails,
   ProgramEvent,
+  ProgramEventCreateData,
+  ProgramEventUpdateData,
 } from '@camp-registration/common/entities';
 import { useQuasar } from 'quasar';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import CalendarNavigationBar from 'components/campManagement/programPlanner/CalendarNavigationBar.vue';
 import CalendarItem from 'components/campManagement/programPlanner/CalendarItem.vue';
 import CalendarDayItem from 'components/campManagement/programPlanner/CalendarDayItem.vue';
@@ -91,8 +96,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  (e: 'update', id: string, event: Partial<ProgramEvent>): void;
-  (e: 'add', event: Omit<ProgramEvent, 'id'>): void;
+  (e: 'update', id: string, event: ProgramEventUpdateData): void;
+  (e: 'add', event: ProgramEventCreateData): void;
   (e: 'delete', id: string): void;
 }>();
 
@@ -103,6 +108,13 @@ const selectedDate = ref<string>(initialSelectedDate());
 
 const range = ref<number>(1);
 
+onMounted(() => {
+  // TODO Find better solution
+  setTimeout(() => {
+    updateIntervalHeight();
+  }, 500);
+});
+
 const intervalStart = computed<number>(() => {
   const start = props.dayStart.split(':');
   if (start.length !== 2) {
@@ -123,6 +135,26 @@ const intervalCount = computed<number>(() => {
   return minutes / props.timeInterval - intervalStart.value;
 });
 
+const intervalHeight = ref<number>(10);
+
+watch(intervalCount, () => {
+  updateIntervalHeight();
+});
+
+function onPageResize() {
+  updateIntervalHeight();
+}
+
+function updateIntervalHeight() {
+  const el = document.getElementsByClassName('q-calendar-day__body')[0];
+  if (!el) {
+    return;
+  }
+
+  const height = el.clientHeight - 10;
+  intervalHeight.value = height / intervalCount.value;
+}
+
 function initialSelectedDate(): string {
   return props.camp.startAt.split('T')[0];
 }
diff --git a/frontend/src/composables/serviceHandler.ts b/frontend/src/composables/serviceHandler.ts
index b6e6eb0c..cc006929 100644
--- a/frontend/src/composables/serviceHandler.ts
+++ b/frontend/src/composables/serviceHandler.ts
@@ -219,7 +219,7 @@ export function useServiceHandler<T>(storeName: string) {
     needsUpdate.value = false;
   }
 
-  function asyncUpdate(fn: () => Promise<unknown>) {
+  function asyncAction(fn: () => Promise<unknown>) {
     pendingRequests.value++;
     fn().finally(() => pendingRequests.value--);
   }
@@ -333,7 +333,7 @@ export function useServiceHandler<T>(storeName: string) {
     errorOnFailure,
     forceFetch,
     lazyFetch,
-    asyncUpdate,
+    asyncAction,
     handlerByType,
     withProgressNotification,
     withMultiProgressNotification,
diff --git a/frontend/src/pages/campManagement/ProgramPlannerPage.vue b/frontend/src/pages/campManagement/ProgramPlannerPage.vue
index c616270a..867f2482 100644
--- a/frontend/src/pages/campManagement/ProgramPlannerPage.vue
+++ b/frontend/src/pages/campManagement/ProgramPlannerPage.vue
@@ -4,8 +4,8 @@
     :error="error"
   >
     <program-calendar
-      v-if="data"
-      :camp="data"
+      v-if="camp && events"
+      :camp="camp"
       :events="events"
       class="absolute fit"
       @add="onEventAdd"
@@ -17,73 +17,43 @@
 
 <script lang="ts" setup>
 import PageStateHandler from 'components/common/PageStateHandler.vue';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useCampDetailsStore } from 'stores/camp-details-store';
 import ProgramCalendar from 'components/campManagement/programPlanner/ProgramCalendar.vue';
 import { storeToRefs } from 'pinia';
-import type { ProgramEvent } from '@camp-registration/common/entities';
-
+import type {
+  ProgramEvent,
+  ProgramEventCreateData,
+} from '@camp-registration/common/entities';
+import { useProgramPlannerStore } from 'stores/program-planner-store';
+
+const programPlannerStore = useProgramPlannerStore();
+const { data: events } = storeToRefs(programPlannerStore);
 const campDetailsStore = useCampDetailsStore();
-const { data } = storeToRefs(campDetailsStore);
+const { data: camp } = storeToRefs(campDetailsStore);
 
 onMounted(async () => {
   await campDetailsStore.fetchData();
 });
 
 const loading = computed<boolean>(() => {
-  return campDetailsStore.isLoading;
+  return campDetailsStore.isLoading || programPlannerStore.isLoading;
 });
 
 const error = computed<unknown>(() => {
-  return campDetailsStore.error;
+  return campDetailsStore.error ?? programPlannerStore.error;
 });
 
-const events = ref<ProgramEvent[]>([
-  {
-    id: crypto.randomUUID(),
-    title: 'Left Test',
-    details: 'Full day',
-    backgroundColor: 'red',
-    side: 'left',
-    date: '2024-07-31',
-  },
-  {
-    id: crypto.randomUUID(),
-    title: 'Auto test',
-    details: 'Full day',
-    backgroundColor: 'red',
-    side: 'auto',
-    date: '2024-08-01',
-    time: '10:30',
-    duration: 60,
-  },
-]);
-
-function onEventAdd(event: Omit<ProgramEvent, 'id'>) {
-  // TODO Call Store
-  events.value.push({
-    ...event,
-    id: crypto.randomUUID(),
-  });
+function onEventAdd(event: ProgramEventCreateData) {
+  programPlannerStore.createEntry(event);
 }
 
 function onEventUpdate(id: string, eventUpdate: Partial<ProgramEvent>) {
-  // TODO Call Store
-  events.value = events.value.map((event) => {
-    if (event.id !== id) {
-      return event;
-    }
-
-    return {
-      ...event,
-      ...eventUpdate,
-    };
-  });
+  programPlannerStore.updateEntry(id, eventUpdate);
 }
 
 function onEventDelete(id: string) {
-  // TODO Call Store
-  events.value = events.value.filter((event) => event.id === id);
+  programPlannerStore.deleteEntry(id);
 }
 </script>
 
diff --git a/frontend/src/services/APIService.ts b/frontend/src/services/APIService.ts
index 42b45bd0..8c375f27 100644
--- a/frontend/src/services/APIService.ts
+++ b/frontend/src/services/APIService.ts
@@ -8,6 +8,7 @@ import { useCampManagerService } from 'src/services/CampManagerService';
 import axios, { AxiosError } from 'axios';
 import { useFileService } from 'src/services/FileService';
 import { useFeedbackService } from 'src/services/FeedbackService';
+import { useProgramEventService } from 'src/services/ProgramEventService';
 
 export function useAPIService() {
   return {
@@ -20,6 +21,7 @@ export function useAPIService() {
     ...useRoomService(),
     ...useFileService(),
     ...useFeedbackService(),
+    ...useProgramEventService(),
   };
 }
 
diff --git a/frontend/src/services/ProgramEventService.ts b/frontend/src/services/ProgramEventService.ts
new file mode 100644
index 00000000..e305bb0b
--- /dev/null
+++ b/frontend/src/services/ProgramEventService.ts
@@ -0,0 +1,58 @@
+import type { ProgramEvent } from '@camp-registration/common/entities';
+import { api } from 'boot/axios';
+
+export function useProgramEventService() {
+  async function fetchProgramEvents(campId: string): Promise<ProgramEvent[]> {
+    const response = await api.get(`camps/${campId}/program-events/`);
+
+    return response?.data?.data;
+  }
+
+  async function fetchProgramEvent(
+    campId: string,
+    programEventId: string,
+  ): Promise<ProgramEvent[]> {
+    const response = await api.get(
+      `camps/${campId}/program-events/${programEventId}/`,
+    );
+
+    return response?.data?.data;
+  }
+
+  async function createProgramEvent(
+    campId: string,
+    data: ProgramEvent,
+  ): Promise<ProgramEvent> {
+    const response = await api.post(`camps/${campId}/program-events/`, data);
+
+    return response?.data?.data;
+  }
+
+  async function updateProgramEvent(
+    campId: string,
+    programEventId: string,
+    data: ProgramEvent,
+  ): Promise<ProgramEvent> {
+    const response = await api.put(
+      `camps/${campId}/program-events/${programEventId}/`,
+      data,
+    );
+
+    return response?.data?.data;
+  }
+
+  async function deleteProgramEvent(
+    campId: string,
+    programEventId: string,
+  ): Promise<void> {
+    await api.delete(`camps/${campId}/program-events/${programEventId}/`);
+  }
+
+  return {
+    fetchProgramEvents,
+    fetchProgramEvent,
+    createProgramEvent,
+    updateProgramEvent,
+    deleteProgramEvent,
+  };
+}
diff --git a/frontend/src/stores/program-planner-store.ts b/frontend/src/stores/program-planner-store.ts
new file mode 100644
index 00000000..d65322f4
--- /dev/null
+++ b/frontend/src/stores/program-planner-store.ts
@@ -0,0 +1,135 @@
+import { defineStore } from 'pinia';
+import type {
+  ProgramEvent,
+  ProgramEventCreateData,
+  ProgramEventUpdateData,
+} from '@camp-registration/common/entities';
+import { useRoute } from 'vue-router';
+import { useAPIService } from 'src/services/APIService';
+import { useServiceHandler } from 'src/composables/serviceHandler';
+import { useAuthBus, useCampBus } from 'src/composables/bus';
+
+export const useProgramPlannerStore = defineStore('program-planner', () => {
+  const route = useRoute();
+  const apiService = useAPIService();
+  const authBus = useAuthBus();
+  const campBus = useCampBus();
+  const {
+    data,
+    isLoading,
+    error,
+    reset,
+    invalidate,
+    withErrorNotification,
+    lazyFetch,
+    asyncAction,
+    checkNotNullWithError,
+  } = useServiceHandler<ProgramEvent[]>('programPlanner');
+
+  // TODO Add translations
+
+  authBus.on('logout', () => {
+    reset();
+  });
+
+  campBus.on('change', () => {
+    invalidate();
+  });
+
+  async function fetchData(id?: string): Promise<void> {
+    const campId = id ?? (route.params.camp as string | undefined);
+
+    const cid = checkNotNullWithError(campId);
+    await lazyFetch(async () => await apiService.fetchProgramEvents(cid));
+  }
+
+  async function createEntry(event: ProgramEventCreateData) {
+    const campId = route.params.camp as string;
+    checkNotNullWithError(campId);
+
+    asyncAction(() =>
+      withErrorNotification('create', async () => {
+        const result = await apiService.createProgramEvent(campId, event);
+
+        // Add item to data
+        data.value = data.value?.map((value) =>
+          value.id === event.id ? result : value,
+        );
+
+        return result;
+      }),
+    );
+
+    // Optimistic update
+    const tmpEvent = {
+      id: `#${crypto.randomUUID()}`,
+      ...event,
+    };
+
+    data.value?.push(tmpEvent);
+  }
+
+  function isIdOptimistic(id: string): boolean {
+    return id.startsWith('#');
+  }
+
+  async function updateEntry(id: string, event: ProgramEventCreateData) {
+    const campId = route.params.camp as string;
+    checkNotNullWithError(campId);
+
+    if (isIdOptimistic(id)) {
+      return withErrorNotification('update', () => {
+        throw 'Please wait...';
+      });
+    }
+
+    asyncAction(() =>
+      withErrorNotification('update', () =>
+        apiService.updateProgramEvent(campId, id, event),
+      ),
+    );
+
+    // Optimistic update
+    const currentEvent = data.value?.find((event) => event.id === id);
+    if (!currentEvent) {
+      return;
+    }
+    const resultEvent: ProgramEvent = {
+      ...currentEvent,
+      ...event,
+    };
+    data.value = data.value?.map((value) =>
+      value.id === event.id ? resultEvent : value,
+    );
+  }
+
+  async function deleteEntry(id: string) {
+    const campId = route.params.camp as string;
+    checkNotNullWithError(campId);
+
+    if (isIdOptimistic(id)) {
+      return withErrorNotification('update', () => {
+        throw 'Please wait...';
+      });
+    }
+
+    asyncAction(() =>
+      withErrorNotification('delete', () =>
+        apiService.deleteProgramEvent(campId, id),
+      ),
+    );
+
+    data.value = data.value?.filter((event) => event.id === id);
+  }
+
+  return {
+    reset,
+    data,
+    isLoading,
+    error,
+    fetchData,
+    createEntry,
+    updateEntry,
+    deleteEntry,
+  };
+});
diff --git a/frontend/src/stores/room-planner-store.ts b/frontend/src/stores/room-planner-store.ts
index f33ee3c1..dc51c543 100644
--- a/frontend/src/stores/room-planner-store.ts
+++ b/frontend/src/stores/room-planner-store.ts
@@ -31,7 +31,7 @@ export const useRoomPlannerStore = defineStore('room-planner', () => {
     withProgressNotification,
     withErrorNotification,
     lazyFetch,
-    asyncUpdate,
+    asyncAction,
     requestPending,
     checkNotNullWithError,
     checkNotNullWithNotification,
@@ -125,7 +125,7 @@ export const useRoomPlannerStore = defineStore('room-planner', () => {
     const bedId = room.beds[position].id;
     const registrationId = person?.id ?? null;
 
-    asyncUpdate(() => {
+    asyncAction(() => {
       return withErrorNotification('update-bed', () => {
         return apiService.updateBed(campId, roomId, bedId, registrationId);
       });

From 5b60867ce5ee6769e07ae89d47c3ea22ff196cf8 Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Thu, 8 Feb 2024 07:58:20 +0100
Subject: [PATCH 04/13] Wip: Work for program planner

---
 backend/@types/express/index.d.ts             |   2 +
 backend/prisma/schema.prisma                  |   8 +-
 .../controllers/program-event.controller.ts   |   4 +-
 backend/src/resources/camp.resource.ts        |   2 +-
 .../src/resources/program-event.resource.ts   |  10 +-
 .../src/routes/api/v1/camps/camp.routes.ts    |   2 +
 .../api/v1/camps/program-event.routes.ts      |   7 +-
 .../src/services/program-planner.service.ts   |   4 +-
 common/src/entities/Camp.ts                   |   2 +-
 common/src/entities/Expense.ts                |   6 +-
 common/src/entities/ProgramEvent.ts           |  14 +-
 .../programPlanner/DragAndDropScope.ts        |   2 +
 .../programPlanner/ProgramCalendar.vue        |  33 ++++-
 .../dialogs/CalendarSettingsDialog.vue        |   6 +-
 .../ProgramEventModificationDialog.vue        | 129 ++++++++++++++++++
 .../campManagement/ProgramPlannerPage.vue     |   1 +
 frontend/src/services/ProgramEventService.ts  |  10 +-
 frontend/src/stores/program-planner-store.ts  |  12 +-
 18 files changed, 214 insertions(+), 40 deletions(-)
 create mode 100644 frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventModificationDialog.vue

diff --git a/backend/@types/express/index.d.ts b/backend/@types/express/index.d.ts
index 3e12596a..c3693822 100644
--- a/backend/@types/express/index.d.ts
+++ b/backend/@types/express/index.d.ts
@@ -8,6 +8,7 @@ import {
   Bed,
   Room,
   File,
+  ProgramEvent,
 } from '@prisma/client';
 
 declare global {
@@ -23,6 +24,7 @@ declare global {
         room?: Room & { beds: Bed[] };
         bed?: Bed;
         file?: File;
+        programEvent?: ProgramEvent;
       };
     }
   }
diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
index 66be6474..c9bc28ad 100644
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -66,6 +66,7 @@ model Camp {
   rooms           Room[]
   templates       Template[]
   files           File[]
+  ProgramEvent    ProgramEvent[]
 
   @@map("camps")
 }
@@ -184,16 +185,19 @@ model File {
 
 model ProgramEvent {
   id       String  @id @unique(map: "program_event_id_unique") @db.Char(26)
+  campId   String  @map("camp_id") @db.Char(36) // Prisma does not support morth
   /// [StringOrTranslation]
   title    Json
   /// [StringOrTranslation]
   details  Json?
-  location String?
+  /// [StringOrTranslation]
+  location Json?
   date     String?
-  duration String?
+  duration Int?
   time     String?
   color    String? @map("background_color")
   side     String?
+  camp     Camp?   @relation(fields: [campId], references: [id], onDelete: Cascade)
 
   @@map("program_events")
 }
diff --git a/backend/src/controllers/program-event.controller.ts b/backend/src/controllers/program-event.controller.ts
index b0f64c97..2c4d5966 100644
--- a/backend/src/controllers/program-event.controller.ts
+++ b/backend/src/controllers/program-event.controller.ts
@@ -6,9 +6,9 @@ import { programEventResource } from 'resources';
 import { routeModel } from 'utils/verifyModel';
 
 const show = catchRequestAsync(async (req, res) => {
-  const room = routeModel(req.models.room);
+  const event = routeModel(req.models.programEvent);
 
-  res.json(resource(programEventResource(room)));
+  res.json(resource(programEventResource(event)));
 });
 
 const index = catchRequestAsync(async (req, res) => {
diff --git a/backend/src/resources/camp.resource.ts b/backend/src/resources/camp.resource.ts
index 6dbecbfd..cf5ad662 100644
--- a/backend/src/resources/camp.resource.ts
+++ b/backend/src/resources/camp.resource.ts
@@ -24,7 +24,7 @@ const campResource = (camp: CampWithFreePlaces): CampResource => {
     endAt: camp.endAt.toISOString(),
     price: camp.price ?? null,
     location: camp.location ?? null,
-    freePlaces: camp.freePlaces,
+    freePlaces: camp.freePlaces ?? null,
   };
 };
 
diff --git a/backend/src/resources/program-event.resource.ts b/backend/src/resources/program-event.resource.ts
index fc484980..2a0ca332 100644
--- a/backend/src/resources/program-event.resource.ts
+++ b/backend/src/resources/program-event.resource.ts
@@ -9,11 +9,11 @@ const programEventResource = (
     title: programEvent.title,
     details: programEvent.details,
     location: programEvent.location,
-    date: programEvent.date,
-    time: programEvent.time,
-    duration: programEvent.duration,
-    color: programEvent.color,
-    side: programEvent.side,
+    date: programEvent.date ?? null,
+    time: programEvent.time ?? null,
+    duration: programEvent.duration ?? null,
+    color: programEvent.color ?? 'white',
+    side: (programEvent.side as ProgramEventResource['side']) ?? null,
   };
 };
 
diff --git a/backend/src/routes/api/v1/camps/camp.routes.ts b/backend/src/routes/api/v1/camps/camp.routes.ts
index 284383a3..1eb16cde 100644
--- a/backend/src/routes/api/v1/camps/camp.routes.ts
+++ b/backend/src/routes/api/v1/camps/camp.routes.ts
@@ -11,6 +11,7 @@ import templateRoutes from './template.routes';
 import roomRoutes from './rooms/room.routes';
 import managerRoutes from './manager.routes';
 import campFileRoutes from './files.routes';
+import programEventRoutes from './program-event.routes';
 
 const router = express.Router({ mergeParams: true });
 
@@ -28,6 +29,7 @@ router.use('/:campId/templates', templateRoutes);
 router.use('/:campId/managers', managerRoutes);
 router.use('/:campId/rooms', roomRoutes);
 router.use('/:campId/files', campFileRoutes);
+router.use('/:campId/program-events', programEventRoutes);
 
 router.get('/', validate(campValidation.index), campController.index);
 router.get(
diff --git a/backend/src/routes/api/v1/camps/program-event.routes.ts b/backend/src/routes/api/v1/camps/program-event.routes.ts
index e5d10f2d..3a040a73 100644
--- a/backend/src/routes/api/v1/camps/program-event.routes.ts
+++ b/backend/src/routes/api/v1/camps/program-event.routes.ts
@@ -13,11 +13,8 @@ router.param(
   'programEventId',
   catchParamAsync(async (req, res, next, id) => {
     const camp = routeModel(req.models.camp);
-    const template = await programPlannerService.getProgramEventById(
-      camp.id,
-      id,
-    );
-    req.models.template = verifyModelExists(template);
+    const event = await programPlannerService.getProgramEventById(camp.id, id);
+    req.models.programEvent = verifyModelExists(event);
     next();
   }),
 );
diff --git a/backend/src/services/program-planner.service.ts b/backend/src/services/program-planner.service.ts
index c5a13c02..84ec2e3c 100644
--- a/backend/src/services/program-planner.service.ts
+++ b/backend/src/services/program-planner.service.ts
@@ -16,7 +16,7 @@ const queryProgramEvent = async (campId: string) => {
 
 const createProgramEvent = async (
   campId: string,
-  data: Omit<Prisma.ProgramEventCreateInput, 'id'>,
+  data: Omit<Prisma.ProgramEventCreateInput, 'id' | 'camp'>,
 ) => {
   return prisma.programEvent.create({
     data: {
@@ -31,7 +31,7 @@ const updateProgramEventById = async (
   roomId: string,
   updateBody: Omit<Prisma.ProgramEventUpdateInput, 'id'>,
 ) => {
-  return prisma.room.update({
+  return prisma.programEvent.update({
     where: { id: roomId },
     data: updateBody,
   });
diff --git a/common/src/entities/Camp.ts b/common/src/entities/Camp.ts
index 0d7c3783..64b15c4c 100644
--- a/common/src/entities/Camp.ts
+++ b/common/src/entities/Camp.ts
@@ -17,7 +17,7 @@ export interface Camp extends Identifiable {
   maxAge: number;
   location: Translatable;
   price: number;
-  freePlaces?: Translatable<number>;
+  freePlaces: Translatable<number> | null;
 }
 
 export interface CampDetails extends Camp {
diff --git a/common/src/entities/Expense.ts b/common/src/entities/Expense.ts
index 2d4b645f..b33ae669 100644
--- a/common/src/entities/Expense.ts
+++ b/common/src/entities/Expense.ts
@@ -1,10 +1,10 @@
 export interface Expense {
   id: number;
   name: string;
-  category?: string;
+  category: string | null;
   price: number;
   paid: boolean;
   paidBy: string;
-  date?: string;
-  recipient?: string;
+  date: string | null;
+  recipient: string | null;
 }
diff --git a/common/src/entities/ProgramEvent.ts b/common/src/entities/ProgramEvent.ts
index 8a4c3b18..7bd0ddac 100644
--- a/common/src/entities/ProgramEvent.ts
+++ b/common/src/entities/ProgramEvent.ts
@@ -3,13 +3,13 @@ import type { Translatable } from './Translatable';
 
 export interface ProgramEvent extends Identifiable {
   title: Translatable;
-  details?: Translatable;
-  location?: Translatable;
-  date?: string;
-  time?: string;
-  duration?: number;
-  color: string;
-  side?: 'left' | 'right' | 'auto';
+  details: Translatable | null;
+  location: Translatable | null;
+  date: string | null;
+  time: string | null;
+  duration: number | null;
+  color: string | null;
+  side: 'left' | 'right' | 'auto' | null;
 }
 
 export type ProgramEventCreateData = Omit<ProgramEvent, 'id'>;
diff --git a/frontend/src/components/campManagement/programPlanner/DragAndDropScope.ts b/frontend/src/components/campManagement/programPlanner/DragAndDropScope.ts
index 2a7ea1d5..9e5e530e 100644
--- a/frontend/src/components/campManagement/programPlanner/DragAndDropScope.ts
+++ b/frontend/src/components/campManagement/programPlanner/DragAndDropScope.ts
@@ -1,3 +1,5 @@
+import { Timestamp } from '@quasar/quasar-ui-qcalendar';
+
 export interface DragAndDropScope {
   timestamp: Timestamp;
   droppable: boolean;
diff --git a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
index 9b56d080..ae24baf0 100644
--- a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
+++ b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
@@ -34,6 +34,9 @@
         transition-next="slide-left"
         transition-prev="slide-right"
         class="fit absolute"
+        @click-time="onTimeEventAdd"
+        @click-day="onDayEventAdd"
+        @click-head-day="onDayEventAdd"
       >
         <template #head-day-event="{ scope: { timestamp } }">
           <div class="column">
@@ -66,7 +69,7 @@
 </template>
 
 <script lang="ts" setup>
-import { QCalendarDay } from '@quasar/quasar-ui-qcalendar';
+import { QCalendarDay, Timestamp } from '@quasar/quasar-ui-qcalendar';
 import { useI18n } from 'vue-i18n';
 import type {
   CampDetails,
@@ -80,6 +83,7 @@ import CalendarNavigationBar from 'components/campManagement/programPlanner/Cale
 import CalendarItem from 'components/campManagement/programPlanner/CalendarItem.vue';
 import CalendarDayItem from 'components/campManagement/programPlanner/CalendarDayItem.vue';
 import { DragAndDropScope } from 'components/campManagement/programPlanner/DragAndDropScope';
+import PointerEvent from 'happy-dom/lib/event/events/PointerEvent';
 
 interface Props {
   camp: CampDetails;
@@ -192,6 +196,33 @@ function getEvents(date: string) {
   return events;
 }
 
+interface Scope {
+  timestamp: Timestamp;
+}
+
+function onDayEventAdd({
+  event,
+  scope,
+}: {
+  event: PointerEvent;
+  scope: Scope;
+}) {
+  console.log(scope.timestamp.date);
+  console.log(props.timeInterval);
+}
+
+function onTimeEventAdd({
+  event,
+  scope,
+}: {
+  event: PointerEvent;
+  scope: Scope;
+}) {
+  console.log(scope.timestamp.date);
+  console.log(scope.timestamp.time);
+  console.log(props.timeInterval);
+}
+
 function onDragStart(e: DragEvent, event: ProgramEvent): void {
   if (!e.dataTransfer) {
     return;
diff --git a/frontend/src/components/campManagement/programPlanner/dialogs/CalendarSettingsDialog.vue b/frontend/src/components/campManagement/programPlanner/dialogs/CalendarSettingsDialog.vue
index 87545aff..8d2b7696 100644
--- a/frontend/src/components/campManagement/programPlanner/dialogs/CalendarSettingsDialog.vue
+++ b/frontend/src/components/campManagement/programPlanner/dialogs/CalendarSettingsDialog.vue
@@ -105,7 +105,7 @@ const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
 // onDialogCancel - Function to call to settle dialog with "cancel" outcome
 
 function onOKClick(): void {
-  onDialogOK();
+  onDialogOK(data);
 }
 
 function onCancelClick() {
@@ -134,9 +134,7 @@ actions:
   cancel: 'Cancel'
 </i18n>
 
-<i18n lang="yaml" locale="de"></i18n>
-
-<i18n lang="yaml" locale="fr"></i18n>
+<!-- TODO Add translations -->
 
 <style lang="scss">
 input[type='number']::-webkit-outer-spin-button,
diff --git a/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventModificationDialog.vue b/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventModificationDialog.vue
new file mode 100644
index 00000000..b56b3938
--- /dev/null
+++ b/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventModificationDialog.vue
@@ -0,0 +1,129 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    @hide="onDialogHide"
+  >
+    <q-card class="q-dialog-plugin q-pb-none">
+      <q-form
+        @submit="onOKClick"
+        @reset="onCancelClick"
+      >
+        <q-card-section>
+          <div class="text-h6">
+            {{ t('title') }}
+          </div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none q-gutter-y-sm column">
+          <translated-input
+            v-model="data.title"
+            outline
+            rounded
+          />
+
+          <translated-input
+            v-model="data.details"
+            type="textarea"
+            outline
+            rounded
+          />
+
+          <!-- TODO Full day -->
+
+          <!-- TODO Start -->
+          <!-- TODO End -->
+        </q-card-section>
+
+        <!-- action buttons -->
+        <q-card-actions align="right">
+          <q-btn
+            type="reset"
+            outline
+            rounded
+            color="primary"
+            :label="t('actions.cancel')"
+          />
+          <q-btn
+            type="submit"
+            rounded
+            color="primary"
+            :label="t('actions.save')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { reactive, toRaw } from 'vue';
+import TranslatedInput from 'components/common/inputs/TranslatedInput.vue';
+import {
+  ProgramEvent,
+  ProgramEventUpdateData,
+} from '@camp-registration/common/entities';
+
+interface Props {
+  event?: ProgramEvent;
+}
+
+const props = defineProps<Props>();
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const data = reactive<Partial<ProgramEventUpdateData>>(initialValue());
+
+function initialValue(): Partial<ProgramEventUpdateData> {
+  return props.event ? structuredClone(toRaw(props.event)) : {};
+}
+
+const { t } = useI18n();
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+// dialogRef      - Vue ref to be applied to QDialog
+// onDialogHide   - Function to be used as handler for @hide on QDialog
+// onDialogOK     - Function to call to settle dialog with "ok" outcome
+//                    example: onDialogOK() - no payload
+//                    example: onDialogOK({ /*...*/ }) - with payload
+// onDialogCancel - Function to call to settle dialog with "cancel" outcome
+
+function onOKClick(): void {
+  onDialogOK(data);
+}
+
+function onCancelClick() {
+  onDialogCancel();
+}
+</script>
+
+<style scoped></style>
+
+<i18n lang="yaml" locale="en">
+title: 'Calendar Settings'
+
+fields:
+  dayStart:
+    label: 'Day start'
+    hint: ''
+  dayEnd:
+    label: 'Day end'
+    hint: ''
+  timeInterval:
+    label: 'Time interval'
+    hint: 'How many minutes should one interval have'
+
+actions:
+  save: 'Save'
+  cancel: 'Cancel'
+</i18n>
+
+<style lang="scss">
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>
diff --git a/frontend/src/pages/campManagement/ProgramPlannerPage.vue b/frontend/src/pages/campManagement/ProgramPlannerPage.vue
index 867f2482..bd3df29c 100644
--- a/frontend/src/pages/campManagement/ProgramPlannerPage.vue
+++ b/frontend/src/pages/campManagement/ProgramPlannerPage.vue
@@ -34,6 +34,7 @@ const { data: camp } = storeToRefs(campDetailsStore);
 
 onMounted(async () => {
   await campDetailsStore.fetchData();
+  await programPlannerStore.fetchData();
 });
 
 const loading = computed<boolean>(() => {
diff --git a/frontend/src/services/ProgramEventService.ts b/frontend/src/services/ProgramEventService.ts
index e305bb0b..c86f6cbf 100644
--- a/frontend/src/services/ProgramEventService.ts
+++ b/frontend/src/services/ProgramEventService.ts
@@ -1,4 +1,8 @@
-import type { ProgramEvent } from '@camp-registration/common/entities';
+import type {
+  ProgramEvent,
+  ProgramEventCreateData,
+  ProgramEventUpdateData,
+} from '@camp-registration/common/entities';
 import { api } from 'boot/axios';
 
 export function useProgramEventService() {
@@ -21,7 +25,7 @@ export function useProgramEventService() {
 
   async function createProgramEvent(
     campId: string,
-    data: ProgramEvent,
+    data: ProgramEventCreateData,
   ): Promise<ProgramEvent> {
     const response = await api.post(`camps/${campId}/program-events/`, data);
 
@@ -31,7 +35,7 @@ export function useProgramEventService() {
   async function updateProgramEvent(
     campId: string,
     programEventId: string,
-    data: ProgramEvent,
+    data: ProgramEventUpdateData,
   ): Promise<ProgramEvent> {
     const response = await api.put(
       `camps/${campId}/program-events/${programEventId}/`,
diff --git a/frontend/src/stores/program-planner-store.ts b/frontend/src/stores/program-planner-store.ts
index d65322f4..6b9b3f6c 100644
--- a/frontend/src/stores/program-planner-store.ts
+++ b/frontend/src/stores/program-planner-store.ts
@@ -47,13 +47,17 @@ export const useProgramPlannerStore = defineStore('program-planner', () => {
     const campId = route.params.camp as string;
     checkNotNullWithError(campId);
 
+    // When we do optimistic updates, we do not know the id of the event before the requests finishes.
+    // Generate a temporary ID and replace it later
+    const tmpId = `#${crypto.randomUUID()}`;
+
     asyncAction(() =>
       withErrorNotification('create', async () => {
         const result = await apiService.createProgramEvent(campId, event);
 
         // Add item to data
         data.value = data.value?.map((value) =>
-          value.id === event.id ? result : value,
+          value.id === tmpId ? result : value,
         );
 
         return result;
@@ -62,7 +66,7 @@ export const useProgramPlannerStore = defineStore('program-planner', () => {
 
     // Optimistic update
     const tmpEvent = {
-      id: `#${crypto.randomUUID()}`,
+      id: tmpId,
       ...event,
     };
 
@@ -73,7 +77,7 @@ export const useProgramPlannerStore = defineStore('program-planner', () => {
     return id.startsWith('#');
   }
 
-  async function updateEntry(id: string, event: ProgramEventCreateData) {
+  async function updateEntry(id: string, event: ProgramEventUpdateData) {
     const campId = route.params.camp as string;
     checkNotNullWithError(campId);
 
@@ -99,7 +103,7 @@ export const useProgramPlannerStore = defineStore('program-planner', () => {
       ...event,
     };
     data.value = data.value?.map((value) =>
-      value.id === event.id ? resultEvent : value,
+      value.id === id ? resultEvent : value,
     );
   }
 

From 6642392a8bdf36095613c7c111b1d9275a89cd26 Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Fri, 8 Mar 2024 03:37:36 +0100
Subject: [PATCH 05/13] Add database migration

---
 .../migration.sql                             | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 backend/prisma/migrations/20240208064303_add_program_events_table/migration.sql

diff --git a/backend/prisma/migrations/20240208064303_add_program_events_table/migration.sql b/backend/prisma/migrations/20240208064303_add_program_events_table/migration.sql
new file mode 100644
index 00000000..78370950
--- /dev/null
+++ b/backend/prisma/migrations/20240208064303_add_program_events_table/migration.sql
@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE `program_events` (
+    `id` CHAR(26) NOT NULL,
+    `camp_id` CHAR(36) NOT NULL,
+    `title` JSON NOT NULL,
+    `details` JSON NULL,
+    `location` JSON NULL,
+    `date` VARCHAR(191) NULL,
+    `duration` INTEGER NULL,
+    `time` VARCHAR(191) NULL,
+    `background_color` VARCHAR(191) NULL,
+    `side` VARCHAR(191) NULL,
+
+    UNIQUE INDEX `program_event_id_unique`(`id`),
+    PRIMARY KEY (`id`)
+) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+
+-- AddForeignKey
+ALTER TABLE `program_events` ADD CONSTRAINT `program_events_camp_id_fkey` FOREIGN KEY (`camp_id`) REFERENCES `camps`(`id`) ON DELETE CASCADE ON UPDATE CASCADE;

From 994a40425eaa2dbea5866a1e4efab65dad54fb3a Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Wed, 9 Oct 2024 06:07:05 +0200
Subject: [PATCH 06/13] fix remove log

---
 backend/tests/integration/camp.test.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/backend/tests/integration/camp.test.ts b/backend/tests/integration/camp.test.ts
index b7f0858f..c039f97a 100644
--- a/backend/tests/integration/camp.test.ts
+++ b/backend/tests/integration/camp.test.ts
@@ -225,8 +225,6 @@ describe('/api/v1/camps', () => {
 
         expect(status).toBe(200);
 
-        console.log(body.data);
-
         expect(body).toHaveProperty('data');
         expect(body.data.length).toBe(2);
       });

From cf30bd001b0a6dcf1f54bdc0977631da649d0c31 Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Wed, 9 Oct 2024 06:08:04 +0200
Subject: [PATCH 07/13] wip: program planner

---
 backend/prisma/schema.prisma                  |   2 +-
 .../controllers/program-event.controller.ts   |   6 +-
 .../api/v1/camps/program-event.routes.ts      |  19 +-
 .../src/services/program-planner.service.ts   |   8 +-
 .../validations/program-event.validation.ts   |  26 +-
 common/src/entities/ProgramEvent.ts           |   5 +-
 frontend/package.json                         |   1 +
 .../programPlanner/CalendarDayItem.vue        |   2 +-
 .../programPlanner/CalendarItem.vue           |  37 +-
 .../programPlanner/ProgramCalendar.vue        |  76 +--
 .../dialogs/ProgramEventAddDialog.vue         | 490 ++++++++++++++++++
 .../campManagement/ProgramPlannerPage.vue     |   6 +-
 frontend/src/stores/program-planner-store.ts  |  34 +-
 package-lock.json                             |  10 +
 14 files changed, 627 insertions(+), 95 deletions(-)
 create mode 100644 frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventAddDialog.vue

diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
index 77b75680..6603039a 100644
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -198,7 +198,7 @@ model ProgramEvent {
   date     String?
   duration Int?
   time     String?
-  color    String? @map("background_color")
+  color    String? @map("color")
   side     String?
   camp     Camp?   @relation(fields: [campId], references: [id], onDelete: Cascade)
 
diff --git a/backend/src/controllers/program-event.controller.ts b/backend/src/controllers/program-event.controller.ts
index 2c4d5966..c602790b 100644
--- a/backend/src/controllers/program-event.controller.ts
+++ b/backend/src/controllers/program-event.controller.ts
@@ -22,6 +22,7 @@ const index = catchRequestAsync(async (req, res) => {
 const store = catchRequestAsync(async (req, res) => {
   const { campId } = req.params;
   const data = req.body;
+
   const event = await programPlannerService.createProgramEvent(campId, {
     title: data.title,
     details: data.details,
@@ -36,9 +37,10 @@ const store = catchRequestAsync(async (req, res) => {
 });
 
 const update = catchRequestAsync(async (req, res) => {
-  const { roomId } = req.params;
+  const { programEventId: id } = req.params;
   const data = req.body;
-  const event = await programPlannerService.updateProgramEventById(roomId, {
+
+  const event = await programPlannerService.updateProgramEventById(id, {
     title: data.title,
     details: data.details,
     location: data.location,
diff --git a/backend/src/routes/api/v1/camps/program-event.routes.ts b/backend/src/routes/api/v1/camps/program-event.routes.ts
index 3a040a73..24036439 100644
--- a/backend/src/routes/api/v1/camps/program-event.routes.ts
+++ b/backend/src/routes/api/v1/camps/program-event.routes.ts
@@ -11,40 +11,45 @@ const router = express.Router({ mergeParams: true });
 
 router.param(
   'programEventId',
-  catchParamAsync(async (req, res, next, id) => {
+  catchParamAsync(async (req, res, id) => {
     const camp = routeModel(req.models.camp);
     const event = await programPlannerService.getProgramEventById(camp.id, id);
     req.models.programEvent = verifyModelExists(event);
-    next();
   }),
 );
 
 router.get(
   '/',
   auth(),
-  guard([campManager]),
+  guard(campManager),
   validate(programEventValidation.index),
   programEventController.index,
 );
 router.get(
   '/:programEventId',
   auth(),
-  guard([campManager]),
+  guard(campManager),
   validate(programEventValidation.show),
   programEventController.show,
 );
-router.post('/', auth(), guard([campManager]), programEventController.store);
+router.post(
+  '/',
+  auth(),
+  guard(campManager),
+  validate(programEventValidation.store),
+  programEventController.store,
+);
 router.put(
   '/:programEventId',
   auth(),
-  guard([campManager]),
+  guard(campManager),
   validate(programEventValidation.update),
   programEventController.update,
 );
 router.delete(
   '/:programEventId',
   auth(),
-  guard([campManager]),
+  guard(campManager),
   validate(programEventValidation.destroy),
   programEventController.destroy,
 );
diff --git a/backend/src/services/program-planner.service.ts b/backend/src/services/program-planner.service.ts
index 84ec2e3c..859f1f15 100644
--- a/backend/src/services/program-planner.service.ts
+++ b/backend/src/services/program-planner.service.ts
@@ -28,12 +28,12 @@ const createProgramEvent = async (
 };
 
 const updateProgramEventById = async (
-  roomId: string,
-  updateBody: Omit<Prisma.ProgramEventUpdateInput, 'id'>,
+  id: string,
+  data: Omit<Prisma.ProgramEventUpdateInput, 'id'>,
 ) => {
   return prisma.programEvent.update({
-    where: { id: roomId },
-    data: updateBody,
+    where: { id: id },
+    data,
   });
 };
 
diff --git a/backend/src/validations/program-event.validation.ts b/backend/src/validations/program-event.validation.ts
index cf533bcc..a6a1c769 100644
--- a/backend/src/validations/program-event.validation.ts
+++ b/backend/src/validations/program-event.validation.ts
@@ -8,7 +8,7 @@ const translatableSchema = Joi.alternatives()
   .try(Joi.string(), Joi.object().pattern(Joi.string(), Joi.string()))
   .required();
 const timeSchema = Joi.string().regex(/^([01]\d|2[0-3]):([0-5]\d)$/);
-const dateSchema = extendedJoi.date().format('YYYY-MM-DD');
+const dateSchema = extendedJoi.date().format('YYYY-MM-DD').raw();
 
 const show = {
   params: Joi.object({
@@ -29,13 +29,13 @@ const store = {
   }),
   body: Joi.object<ProgramEvent>({
     title: translatableSchema.required(),
-    details: translatableSchema.optional(),
-    location: translatableSchema.optional(),
+    details: translatableSchema.optional().allow(null),
+    location: translatableSchema.optional().allow(null),
     date: dateSchema.optional(),
-    time: timeSchema.optional(),
-    duration: Joi.number().min(0).optional(),
-    color: Joi.string().required(),
-    side: Joi.string().optional(),
+    time: timeSchema.optional().allow(null),
+    duration: Joi.number().min(0).optional().allow(null),
+    color: Joi.string().optional().allow(null),
+    side: Joi.string().optional().allow(null),
   }),
 };
 
@@ -46,13 +46,13 @@ const update = {
   }),
   body: Joi.object({
     title: translatableSchema.optional(),
-    details: translatableSchema.optional(),
-    location: translatableSchema.optional(),
+    details: translatableSchema.optional().allow(null),
+    location: translatableSchema.optional().allow(null),
     date: dateSchema.optional(),
-    time: timeSchema.optional(),
-    duration: Joi.number().min(0).optional(),
-    color: Joi.string().optional(),
-    side: Joi.string().optional(),
+    time: timeSchema.optional().allow(null),
+    duration: Joi.number().min(0).optional().allow(null),
+    color: Joi.string().optional().allow(null),
+    side: Joi.string().optional().allow(null),
   }),
 };
 
diff --git a/common/src/entities/ProgramEvent.ts b/common/src/entities/ProgramEvent.ts
index 7bd0ddac..aa1669b5 100644
--- a/common/src/entities/ProgramEvent.ts
+++ b/common/src/entities/ProgramEvent.ts
@@ -12,6 +12,9 @@ export interface ProgramEvent extends Identifiable {
   side: 'left' | 'right' | 'auto' | null;
 }
 
-export type ProgramEventCreateData = Omit<ProgramEvent, 'id'>;
+export type ProgramEventCreateData = Partial<
+  Omit<ProgramEvent, 'id' | 'title'>
+> &
+  Pick<ProgramEvent, 'title'>;
 
 export type ProgramEventUpdateData = Partial<ProgramEventCreateData>;
diff --git a/frontend/package.json b/frontend/package.json
index 1b0af6bb..e87d480f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
   "dependencies": {
     "@camp-registration/common": "*",
     "@quasar/extras": "^1.16.12",
+    "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.16",
     "apexcharts": "^3.50.0",
     "axios": "^1.7.4",
     "dom-to-image": "^2.6.0",
diff --git a/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue b/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue
index 8d05f246..480c794f 100644
--- a/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue
+++ b/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue
@@ -21,7 +21,7 @@ const props = defineProps<Props>();
 const { to } = useObjectTranslation();
 
 const backgroundColor = computed<string>(() => {
-  return props.event.backgroundColor ?? '#0000ff';
+  return props.event.color ?? '#0000ff';
 });
 
 const badgeStyles = computed<StyleValue>(() => {
diff --git a/frontend/src/components/campManagement/programPlanner/CalendarItem.vue b/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
index 503fa35c..de0a9019 100644
--- a/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
+++ b/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
@@ -1,13 +1,17 @@
 <template>
   <div
-    v-if="props.event.time !== undefined"
+    v-if="props.event.time"
     class="my-event"
     :class="badgeClasses"
     :style="badgeStyles"
   >
     <span class="title q-calendar__ellipsis">
       {{ to(props.event.title) }}
-      <q-tooltip>
+      <q-tooltip
+        v-if="props.event.details"
+        class="column text-caption"
+        style="white-space: pre-line"
+      >
         {{ to(props.event.details) }}
       </q-tooltip>
     </span>
@@ -18,6 +22,7 @@
 import type { ProgramEvent } from '@camp-registration/common/entities';
 import { computed, StyleValue } from 'vue';
 import { useObjectTranslation } from 'src/composables/objectTranslation';
+
 interface Props {
   event: ProgramEvent;
   timeStartPosition?: (time?: string) => number;
@@ -29,12 +34,12 @@ const props = defineProps<Props>();
 const { to } = useObjectTranslation();
 
 const backgroundColor = computed<string>(() => {
-  return props.event.backgroundColor ?? '#0000ff';
+  return props.event.color ?? '#0000ff';
 });
 
 const badgeClasses = computed<Record<string, string | boolean>>(() => {
   return {
-    [`text-white bg-${props.event.backgroundColor}`]: true,
+    [`text-white bg-${props.event.color}`]: true,
     'full-width': !props.event.side || props.event.side === 'auto',
     'left-side': props.event.side === 'left',
     'right-side': props.event.side === 'right',
@@ -43,14 +48,22 @@ const badgeClasses = computed<Record<string, string | boolean>>(() => {
 });
 
 const badgeStyles = computed<StyleValue>(() => {
-  const s: StyleValue = {};
-  if (props.timeStartPosition && props.timeDurationHeight) {
-    s.top = props.timeStartPosition(props.event.time) + 'px';
-    s.height = props.timeDurationHeight(props.event.duration) + 'px';
-  }
-  s.backgroundColor = backgroundColor.value;
-  s.alignItems = 'flex-start';
-  return s;
+  const top =
+    props.timeStartPosition && props.event.time
+      ? props.timeStartPosition(props.event.time) + 'px'
+      : undefined;
+
+  const height =
+    props.timeDurationHeight && props.event.duration
+      ? props.timeDurationHeight(props.event.duration) + 'px'
+      : undefined;
+
+  return {
+    backgroundColor: backgroundColor.value,
+    alignItems: 'flex-start',
+    top,
+    height,
+  };
 });
 </script>
 
diff --git a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
index ae24baf0..a38a4fc9 100644
--- a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
+++ b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
@@ -28,6 +28,7 @@
         :interval-minutes="props.timeInterval"
         :interval-height="intervalHeight"
         hour24-format
+        time-clicks-clamped
         bordered
         hoverable
         animated
@@ -69,6 +70,7 @@
 </template>
 
 <script lang="ts" setup>
+import '@quasar/quasar-ui-qcalendar/dist/index.css';
 import { QCalendarDay, Timestamp } from '@quasar/quasar-ui-qcalendar';
 import { useI18n } from 'vue-i18n';
 import type {
@@ -84,6 +86,7 @@ import CalendarItem from 'components/campManagement/programPlanner/CalendarItem.
 import CalendarDayItem from 'components/campManagement/programPlanner/CalendarDayItem.vue';
 import { DragAndDropScope } from 'components/campManagement/programPlanner/DragAndDropScope';
 import PointerEvent from 'happy-dom/lib/event/events/PointerEvent';
+import ProgramEventAddDialog from 'components/campManagement/programPlanner/dialogs/ProgramEventAddDialog.vue';
 
 interface Props {
   camp: CampDetails;
@@ -165,16 +168,13 @@ function initialSelectedDate(): string {
 
 const eventsMap = computed<Record<string, ProgramEvent[]>>(() => {
   return props.events
-    .filter(
-      (event): event is ProgramEvent & Required<Pick<ProgramEvent, 'date'>> =>
-        !!event.date,
-    )
+    .filter((event) => event.date != null)
     .reduce(
       (map, event) => {
-        if (!(event.date in map)) {
-          map[event.date] = [];
+        if (!(event.date! in map)) {
+          map[event.date!] = [];
         }
-        map[event.date].push(event);
+        map[event.date!].push(event);
 
         return map;
       },
@@ -196,31 +196,43 @@ function getEvents(date: string) {
   return events;
 }
 
-interface Scope {
-  timestamp: Timestamp;
+interface CalendarEvent {
+  event: PointerEvent;
+  scope: {
+    timestamp: Timestamp;
+  };
 }
 
-function onDayEventAdd({
-  event,
-  scope,
-}: {
-  event: PointerEvent;
-  scope: Scope;
-}) {
-  console.log(scope.timestamp.date);
-  console.log(props.timeInterval);
+function onDayEventAdd({ scope }: CalendarEvent) {
+  quasar
+    .dialog({
+      component: ProgramEventAddDialog,
+      componentProps: {
+        date: scope.timestamp.date,
+        time: null,
+        duration: null,
+      },
+    })
+    .onOk((programEvent: ProgramEventCreateData) => {
+      emit('add', programEvent);
+    });
 }
 
-function onTimeEventAdd({
-  event,
-  scope,
-}: {
-  event: PointerEvent;
-  scope: Scope;
-}) {
-  console.log(scope.timestamp.date);
-  console.log(scope.timestamp.time);
-  console.log(props.timeInterval);
+function onTimeEventAdd({ scope }: CalendarEvent) {
+  quasar
+    .dialog({
+      component: ProgramEventAddDialog,
+      componentProps: {
+        date: scope.timestamp.date,
+        time: scope.timestamp.time,
+        duration: props.timeInterval,
+        dateTimeMin: props.camp.startAt,
+        dateTimeMax: props.camp.endAt,
+      },
+    })
+    .onOk((programEvent: ProgramEventCreateData) => {
+      emit('add', programEvent);
+    });
 }
 
 function onDragStart(e: DragEvent, event: ProgramEvent): void {
@@ -270,7 +282,7 @@ function onDrop(e: DragEvent, type: string, scope: DragAndDropScope): boolean {
     return false;
   }
 
-  let eventUpdate: Pick<ProgramEvent, 'time' | 'date' | 'duration' | 'side'>;
+  let eventUpdate: ProgramEventUpdateData;
   switch (type) {
     case 'interval':
       // Dropped on a time slot
@@ -285,13 +297,13 @@ function onDrop(e: DragEvent, type: string, scope: DragAndDropScope): boolean {
       // Dropped on the header
       eventUpdate = {
         date: scope.timestamp.date,
-        time: undefined,
+        time: null,
       };
       break;
     default:
       eventUpdate = {
-        date: undefined,
-        time: undefined,
+        date: null,
+        time: null,
       };
   }
 
diff --git a/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventAddDialog.vue b/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventAddDialog.vue
new file mode 100644
index 00000000..a59532bc
--- /dev/null
+++ b/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventAddDialog.vue
@@ -0,0 +1,490 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    @hide="onDialogHide"
+  >
+    <q-card class="q-dialog-plugin q-pb-none">
+      <q-form
+        @submit="onOKClick"
+        @reset="onDialogCancel"
+      >
+        <q-card-section>
+          <div class="text-h5 text-center">
+            {{ t('title') }}
+          </div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none q-gutter-y-sm column">
+          <translated-input
+            v-model="data.title"
+            :label="t('field.title.label')"
+            :rules="[
+              (val?: string) => val?.length || t('field.title.rule.required'),
+            ]"
+            hide-bottom-space
+            outlined
+            rounded
+          >
+            <template #prepend>
+              <q-icon name="title" />
+            </template>
+          </translated-input>
+
+          <translated-input
+            v-model="data.location"
+            :label="t('field.location.label')"
+            outlined
+            rounded
+          >
+            <template #prepend>
+              <q-icon name="place" />
+            </template>
+          </translated-input>
+
+          <translated-input
+            v-model="data.details"
+            :label="t('field.details.label')"
+            autogrow
+            outlined
+            rounded
+          >
+            <template #prepend>
+              <q-icon name="description" />
+            </template>
+          </translated-input>
+
+          <!-- Date -->
+          <q-input
+            v-model="data.date"
+            :label="t('field.date.label')"
+            outlined
+            rounded
+          >
+            <template #prepend>
+              <q-icon name="calendar_month" />
+            </template>
+            <template #append>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+              >
+                <q-popup-proxy
+                  cover
+                  transition-show="scale"
+                  transition-hide="scale"
+                >
+                  <q-date
+                    v-model="data.date"
+                    mask="YYYY-MM-DD"
+                    :options="dateOptions"
+                    :navigation-min-year-month="monthYearMin"
+                    :navigation-max-year-month="monthYearMax"
+                  >
+                    <div class="row items-center justify-end">
+                      <q-btn
+                        v-close-popup
+                        :label="t('action.close')"
+                        color="primary"
+                        flat
+                        rounded
+                      />
+                    </div>
+                  </q-date>
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+          </q-input>
+
+          <q-toggle
+            v-model="fullDay"
+            :label="t('field.fullDay.label')"
+          />
+
+          <!-- time & duration -->
+          <div
+            v-if="!fullDay"
+            class="row no-wrap q-gutter-sm"
+          >
+            <!-- time -->
+            <q-input
+              v-model="data.time"
+              :label="t('field.start.label')"
+              mask="time"
+              :rules="['time']"
+              hide-bottom-space
+              outlined
+              rounded
+            >
+              <template #append>
+                <q-icon
+                  name="access_time"
+                  class="cursor-pointer"
+                >
+                  <q-popup-proxy
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                  >
+                    <q-time v-model="data.time">
+                      <div class="row items-center justify-end">
+                        <q-btn
+                          v-close-popup
+                          :label="t('action.close')"
+                          color="primary"
+                          flat
+                          rounded
+                        />
+                      </div>
+                    </q-time>
+                  </q-popup-proxy>
+                </q-icon>
+              </template>
+            </q-input>
+
+            <!-- duration -->
+            <q-input
+              v-model="timeEnd"
+              :label="t('field.end.label')"
+              mask="time"
+              :rules="[
+                'time',
+                (val: string) =>
+                  (data.time && isDateLater(data.time, val)) ||
+                  t('field.end.rule.later'),
+              ]"
+              hide-bottom-space
+              outlined
+              rounded
+            >
+              <template #append>
+                <q-icon
+                  name="access_time"
+                  class="cursor-pointer"
+                >
+                  <q-popup-proxy
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                  >
+                    <q-time v-model="timeEnd">
+                      <div class="row items-center justify-end">
+                        <q-btn
+                          v-close-popup
+                          :label="t('action.close')"
+                          color="primary"
+                          flat
+                          rounded
+                        />
+                      </div>
+                    </q-time>
+                  </q-popup-proxy>
+                </q-icon>
+              </template>
+            </q-input>
+          </div>
+
+          <!-- color -->
+          <q-input
+            v-model="data.color"
+            :rules="['anyColor']"
+            hide-bottom-space
+            outlined
+            rounded
+          >
+            <template #prepend>
+              <q-icon
+                name="circle"
+                :style="{ color: data.color }"
+              />
+            </template>
+            <template #append>
+              <q-icon
+                name="colorize"
+                class="cursor-pointer"
+              >
+                <q-popup-proxy
+                  cover
+                  transition-show="scale"
+                  transition-hide="scale"
+                >
+                  <q-color
+                    v-model="data.color"
+                    default-view="palette"
+                  />
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+          </q-input>
+
+          <!-- side -->
+          <q-btn-toggle
+            v-model="data.side"
+            :options="sideOptions"
+            spread
+            outline
+            rounded
+          />
+        </q-card-section>
+
+        <!-- action buttons -->
+        <q-card-actions align="right">
+          <q-btn
+            type="reset"
+            outline
+            rounded
+            color="primary"
+            :label="t('action.cancel')"
+          />
+          <q-btn
+            type="submit"
+            rounded
+            color="primary"
+            :label="t('action.ok')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" setup>
+import {
+  addToDate,
+  getTime,
+  parseTimestamp,
+} from '@quasar/quasar-ui-qcalendar';
+
+import { QPopupProxy, QSelectOption, useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { computed, reactive, ref } from 'vue';
+import TranslatedInput from 'components/common/inputs/TranslatedInput.vue';
+import { ProgramEventCreateData } from '@camp-registration/common/entities';
+
+const { t } = useI18n();
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+
+const props = defineProps<{
+  date?: string;
+  time?: string;
+  duration?: number;
+  dateTimeMin?: string;
+  dateTimeMax?: string;
+}>();
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const data = reactive<Partial<ProgramEventCreateData>>({
+  date: props.date,
+  time: props.time,
+  duration: props.duration,
+  side: 'auto',
+  color: '#0000ff',
+});
+
+const fullDay = computed<boolean>({
+  get() {
+    return !data.time || !data.duration;
+  },
+  set(fullDay) {
+    data.time = fullDay ? null : (props.time ?? '12:00');
+    data.duration = fullDay ? null : (props.duration ?? 30);
+  },
+});
+
+const timeEnd = computed<string>({
+  get() {
+    if (!data.time) {
+      return '23:59';
+    }
+
+    if (!data.duration) {
+      return data.time;
+    }
+
+    const ts = parseTimestamp('0000-00-00 ' + data.time);
+    if (!ts) {
+      return '--:--';
+    }
+
+    return getTime(addToDate(ts, { minute: data.duration }));
+  },
+  set(time) {
+    if (!data.time) {
+      data.time = '00:00';
+    }
+    data.duration = timeDifference(data.time, time);
+  },
+});
+
+const sideOptions = ref<QSelectOption[]>([
+  {
+    label: t('field.side.left'),
+    value: 'left',
+  },
+  {
+    label: t('field.side.auto'),
+    value: 'auto',
+  },
+  {
+    label: t('field.side.right'),
+    value: 'right',
+  },
+]);
+
+const monthYearMin = computed<string | undefined>(() => {
+  return props.dateTimeMin ? extractYearMonth(props.dateTimeMin) : undefined;
+});
+
+const monthYearMax = computed<string | undefined>(() => {
+  return props.dateTimeMax ? extractYearMonth(props.dateTimeMax) : undefined;
+});
+
+function extractYearMonth(date: string): string {
+  const year = date.substring(0, 4); // Extracts YYYY
+  const month = date.substring(5, 7); // Extracts MM
+  return `${year}/${month}`;
+}
+
+function dateOptions(date: string): boolean {
+  const selectedDate = new Date(date);
+  const dateTimeMin = props.dateTimeMin ? new Date(props.dateTimeMin) : null;
+  const dateTimeMax = props.dateTimeMax ? new Date(props.dateTimeMax) : null;
+
+  return (
+    (!dateTimeMin || selectedDate >= dateTimeMin) &&
+    (!dateTimeMax || selectedDate <= dateTimeMax)
+  );
+}
+
+function onOKClick(): void {
+  onDialogOK({
+    ...data,
+    duration: fullDay.value ? 24 : data.duration,
+  });
+}
+
+function isDateLater(timeStart: string, timeEnd: string) {
+  const [hoursStart, minutesStart] = timeStart.split(':').map(Number);
+  const [hoursEnd, minutesEnd] = timeEnd.split(':').map(Number);
+
+  return hoursStart === hoursEnd
+    ? minutesStart < minutesEnd
+    : hoursStart < hoursEnd;
+}
+
+function timeDifference(timeStart: string, timeEnd: string) {
+  const [hoursStart, minutesStart] = timeStart.split(':').map(Number);
+  const [hoursEnd, minutesEnd] = timeEnd.split(':').map(Number);
+
+  // Convert the times to total minutes
+  const totalMinutesStart = hoursStart * 60 + minutesStart;
+  const totalMinutesEnd = hoursEnd * 60 + minutesEnd;
+
+  // Find the absolute difference in minutes
+  return totalMinutesEnd - totalMinutesStart;
+}
+</script>
+
+<style scoped></style>
+
+<i18n lang="yaml" locale="en">
+title: 'Add Event'
+
+field:
+  details:
+    label: 'Details'
+  end:
+    label: 'End time'
+    rule:
+      later: 'End must be after start time'
+  fullDay:
+    label: 'Full Day'
+  location:
+    label: 'Location'
+  side:
+    left: 'Left'
+    auto: 'Auto'
+    right: 'Right'
+  start:
+    label: 'Start time'
+  title:
+    label: 'Title'
+    rule:
+      required: 'The title is required'
+
+action:
+  cancel: 'Cancel'
+  close: 'Close'
+  ok: 'Create'
+</i18n>
+
+<i18n lang="yaml" locale="de">
+title: 'Ereignis hinzufügen'
+
+field:
+  details:
+    label: 'Details'
+  end:
+    label: 'Endzeit'
+    rule:
+      later: 'Das Ende muss nach der Startzeit liegen'
+  fullDay:
+    label: 'Ganztägig'
+  location:
+    label: 'Ort'
+  side:
+    left: 'Links'
+    auto: 'Automatisch'
+    right: 'Rechts'
+  start:
+    label: 'Startzeit'
+  title:
+    label: 'Titel'
+    rule:
+      required: 'Der Titel ist erforderlich'
+
+action:
+  cancel: 'Abbrechen'
+  close: 'Schließen'
+  ok: 'Erstellen'
+</i18n>
+
+<i18n lang="yaml" locale="fr">
+title: 'Ajouter un événement'
+
+field:
+  details:
+    label: 'Détails'
+  end:
+    label: 'Heure de fin'
+    rule:
+      later: "La fin doit être après l'heure de début"
+  fullDay:
+    label: 'Journée entière'
+  location:
+    label: 'Lieu'
+  side:
+    left: 'Gauche'
+    auto: 'Automatique'
+    right: 'Droit'
+  start:
+    label: 'Heure de début'
+  title:
+    label: 'Titre'
+    rule:
+      required: 'Le titre est requis'
+
+action:
+  cancel: 'Annuler'
+  close: 'Fermer'
+  ok: 'Créer'
+</i18n>
+
+<style lang="scss">
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>
diff --git a/frontend/src/pages/campManagement/ProgramPlannerPage.vue b/frontend/src/pages/campManagement/ProgramPlannerPage.vue
index bd3df29c..a703645b 100644
--- a/frontend/src/pages/campManagement/ProgramPlannerPage.vue
+++ b/frontend/src/pages/campManagement/ProgramPlannerPage.vue
@@ -22,8 +22,8 @@ import { useCampDetailsStore } from 'stores/camp-details-store';
 import ProgramCalendar from 'components/campManagement/programPlanner/ProgramCalendar.vue';
 import { storeToRefs } from 'pinia';
 import type {
-  ProgramEvent,
   ProgramEventCreateData,
+  ProgramEventUpdateData,
 } from '@camp-registration/common/entities';
 import { useProgramPlannerStore } from 'stores/program-planner-store';
 
@@ -41,7 +41,7 @@ const loading = computed<boolean>(() => {
   return campDetailsStore.isLoading || programPlannerStore.isLoading;
 });
 
-const error = computed<unknown>(() => {
+const error = computed(() => {
   return campDetailsStore.error ?? programPlannerStore.error;
 });
 
@@ -49,7 +49,7 @@ function onEventAdd(event: ProgramEventCreateData) {
   programPlannerStore.createEntry(event);
 }
 
-function onEventUpdate(id: string, eventUpdate: Partial<ProgramEvent>) {
+function onEventUpdate(id: string, eventUpdate: ProgramEventUpdateData) {
   programPlannerStore.updateEntry(id, eventUpdate);
 }
 
diff --git a/frontend/src/stores/program-planner-store.ts b/frontend/src/stores/program-planner-store.ts
index 6b9b3f6c..e0a8fa4f 100644
--- a/frontend/src/stores/program-planner-store.ts
+++ b/frontend/src/stores/program-planner-store.ts
@@ -22,10 +22,12 @@ export const useProgramPlannerStore = defineStore('program-planner', () => {
     invalidate,
     withErrorNotification,
     lazyFetch,
-    asyncAction,
     checkNotNullWithError,
   } = useServiceHandler<ProgramEvent[]>('programPlanner');
 
+  // TODO Force fetch on update error after all pending requests finished
+  //  --> Set loading to true while waiting
+
   // TODO Add translations
 
   authBus.on('logout', () => {
@@ -51,18 +53,16 @@ export const useProgramPlannerStore = defineStore('program-planner', () => {
     // Generate a temporary ID and replace it later
     const tmpId = `#${crypto.randomUUID()}`;
 
-    asyncAction(() =>
-      withErrorNotification('create', async () => {
-        const result = await apiService.createProgramEvent(campId, event);
+    withErrorNotification('create', async () => {
+      const result = await apiService.createProgramEvent(campId, event);
 
-        // Add item to data
-        data.value = data.value?.map((value) =>
-          value.id === tmpId ? result : value,
-        );
+      // Add item to data
+      data.value = data.value?.map((value) =>
+        value.id === tmpId ? result : value,
+      );
 
-        return result;
-      }),
-    );
+      return result;
+    });
 
     // Optimistic update
     const tmpEvent = {
@@ -87,10 +87,8 @@ export const useProgramPlannerStore = defineStore('program-planner', () => {
       });
     }
 
-    asyncAction(() =>
-      withErrorNotification('update', () =>
-        apiService.updateProgramEvent(campId, id, event),
-      ),
+    withErrorNotification('update', () =>
+      apiService.updateProgramEvent(campId, id, event),
     );
 
     // Optimistic update
@@ -117,10 +115,8 @@ export const useProgramPlannerStore = defineStore('program-planner', () => {
       });
     }
 
-    asyncAction(() =>
-      withErrorNotification('delete', () =>
-        apiService.deleteProgramEvent(campId, id),
-      ),
+    withErrorNotification('delete', () =>
+      apiService.deleteProgramEvent(campId, id),
     );
 
     data.value = data.value?.filter((event) => event.id === id);
diff --git a/package-lock.json b/package-lock.json
index ab8f7dd0..6e34fddc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -258,6 +258,7 @@
       "dependencies": {
         "@camp-registration/common": "*",
         "@quasar/extras": "^1.16.12",
+        "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.16",
         "apexcharts": "^3.50.0",
         "axios": "^1.7.4",
         "dom-to-image": "^2.6.0",
@@ -2963,6 +2964,15 @@
         }
       }
     },
+    "node_modules/@quasar/quasar-ui-qcalendar": {
+      "version": "4.0.0-beta.16",
+      "resolved": "https://registry.npmjs.org/@quasar/quasar-ui-qcalendar/-/quasar-ui-qcalendar-4.0.0-beta.16.tgz",
+      "integrity": "sha512-KVbFJD1HQp91tiklv+6XsG7bq8FKK6mhhnoVzmjgoyhUAEb9csfbDPbpegy1/FzXy3o0wITe6mmRZ8nbaiMEZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/hawkeye64"
+      }
+    },
     "node_modules/@quasar/render-ssr-error": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@quasar/render-ssr-error/-/render-ssr-error-1.0.3.tgz",

From 3f70db88ff4c6e45ad6cf288a8eea2e755488753 Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Thu, 10 Oct 2024 05:16:32 +0200
Subject: [PATCH 08/13] wip: program planner

---
 .../controllers/program-event.controller.ts   |   9 +-
 .../programPlanner/CalendarDayItem.vue        |  28 +++-
 .../programPlanner/CalendarItem.vue           |  24 +++-
 .../programPlanner/CalendarItemPopup.vue      | 129 ++++++++++++++++++
 .../programPlanner/CalendarNavigationBar.vue  |  37 ++++-
 .../programPlanner/ProgramCalendar.vue        |  73 +++++++++-
 frontend/src/stores/program-planner-store.ts  |  11 +-
 7 files changed, 287 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/campManagement/programPlanner/CalendarItemPopup.vue

diff --git a/backend/src/controllers/program-event.controller.ts b/backend/src/controllers/program-event.controller.ts
index c602790b..20ed54f5 100644
--- a/backend/src/controllers/program-event.controller.ts
+++ b/backend/src/controllers/program-event.controller.ts
@@ -13,6 +13,7 @@ const show = catchRequestAsync(async (req, res) => {
 
 const index = catchRequestAsync(async (req, res) => {
   const { campId } = req.params;
+
   const events = await programPlannerService.queryProgramEvent(campId);
   const resources = events.map((value) => programEventResource(value));
 
@@ -33,6 +34,7 @@ const store = catchRequestAsync(async (req, res) => {
     color: data.color,
     side: data.side,
   });
+
   res.status(httpStatus.CREATED).json(resource(programEventResource(event)));
 });
 
@@ -50,12 +52,15 @@ const update = catchRequestAsync(async (req, res) => {
     color: data.color,
     side: data.side,
   });
+
   res.json(resource(programEventResource(event)));
 });
 
 const destroy = catchRequestAsync(async (req, res) => {
-  const { roomId } = req.params;
-  await programPlannerService.deleteProgramEventById(roomId);
+  const { programEventId: id } = req.params;
+
+  await programPlannerService.deleteProgramEventById(id);
+
   res.status(httpStatus.NO_CONTENT).send();
 });
 
diff --git a/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue b/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue
index 480c794f..4d35cfe0 100644
--- a/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue
+++ b/frontend/src/components/campManagement/programPlanner/CalendarDayItem.vue
@@ -1,9 +1,17 @@
 <template>
   <div
-    class="text-center rounded-borders"
+    class="text-center rounded-borders cursor-pointer"
     :style="badgeStyles"
   >
     {{ to(event.title) }}
+
+    <calendar-item-popup :event="props.event" />
+
+    <calendar-item-popup
+      :event="props.event"
+      @edit="onEdit"
+      @delete="onDelete"
+    />
   </div>
 </template>
 
@@ -11,12 +19,16 @@
 import type { ProgramEvent } from '@camp-registration/common/entities';
 import { computed, StyleValue } from 'vue';
 import { useObjectTranslation } from 'src/composables/objectTranslation';
+import CalendarItemPopup from 'components/campManagement/programPlanner/CalendarItemPopup.vue';
 
-interface Props {
+const props = defineProps<{
   event: ProgramEvent;
-}
+}>();
 
-const props = defineProps<Props>();
+const emit = defineEmits<{
+  (e: 'edit'): void;
+  (e: 'delete'): void;
+}>();
 
 const { to } = useObjectTranslation();
 
@@ -29,6 +41,14 @@ const badgeStyles = computed<StyleValue>(() => {
     backgroundColor: backgroundColor.value,
   };
 });
+
+function onDelete() {
+  emit('delete');
+}
+
+function onEdit() {
+  emit('edit');
+}
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/components/campManagement/programPlanner/CalendarItem.vue b/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
index de0a9019..06728977 100644
--- a/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
+++ b/frontend/src/components/campManagement/programPlanner/CalendarItem.vue
@@ -15,6 +15,12 @@
         {{ to(props.event.details) }}
       </q-tooltip>
     </span>
+
+    <calendar-item-popup
+      :event="props.event"
+      @edit="onEdit"
+      @delete="onDelete"
+    />
   </div>
 </template>
 
@@ -22,14 +28,18 @@
 import type { ProgramEvent } from '@camp-registration/common/entities';
 import { computed, StyleValue } from 'vue';
 import { useObjectTranslation } from 'src/composables/objectTranslation';
+import CalendarItemPopup from 'components/campManagement/programPlanner/CalendarItemPopup.vue';
 
-interface Props {
+const props = defineProps<{
   event: ProgramEvent;
   timeStartPosition?: (time?: string) => number;
   timeDurationHeight?: (duration?: number) => number;
-}
+}>();
 
-const props = defineProps<Props>();
+const emit = defineEmits<{
+  (e: 'edit'): void;
+  (e: 'delete'): void;
+}>();
 
 const { to } = useObjectTranslation();
 
@@ -65,6 +75,14 @@ const badgeStyles = computed<StyleValue>(() => {
     height,
   };
 });
+
+function onDelete() {
+  emit('delete');
+}
+
+function onEdit() {
+  emit('edit');
+}
 </script>
 
 <style lang="sass" scoped>
diff --git a/frontend/src/components/campManagement/programPlanner/CalendarItemPopup.vue b/frontend/src/components/campManagement/programPlanner/CalendarItemPopup.vue
new file mode 100644
index 00000000..364ea01c
--- /dev/null
+++ b/frontend/src/components/campManagement/programPlanner/CalendarItemPopup.vue
@@ -0,0 +1,129 @@
+<template>
+  <q-popup-proxy
+    transition-show="scale"
+    transition-hide="fade"
+    :offset="[10, 10]"
+  >
+    <q-card style="min-width: 300px">
+      <q-card-actions align="right">
+        <q-btn
+          v-close-popup
+          icon="edit"
+          size="sm"
+          flat
+          rounded
+        />
+        <q-btn
+          v-close-popup
+          icon="delete"
+          size="sm"
+          flat
+          rounded
+          @click="onDelete"
+        />
+        <q-btn
+          v-close-popup
+          icon="close"
+          size="sm"
+          flat
+          rounded
+          @click="onEdit"
+        />
+      </q-card-actions>
+
+      <q-card-section>
+        <q-list>
+          <!-- title -->
+          <q-item>
+            <q-item-section avatar>
+              <q-icon
+                name="circle"
+                :style="{ color: props.event.color }"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="text-h6">
+                {{ to(props.event.title) }}
+              </q-item-label>
+              <q-item-label caption>
+                {{ dateTime }}
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item v-if="props.event.location">
+            <q-item-section avatar>
+              <q-icon name="place" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>
+                {{ to(props.event.location) }}
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item v-if="props.event.details">
+            <q-item-section avatar>
+              <q-icon name="description" />
+            </q-item-section>
+            <q-item-section style="white-space: pre-line">
+              {{ to(props.event.details) }}
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card-section>
+    </q-card>
+  </q-popup-proxy>
+</template>
+
+<script lang="ts" setup>
+import { ProgramEvent } from '@camp-registration/common/entities';
+import { useObjectTranslation } from 'src/composables/objectTranslation';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { locale } = useI18n();
+const { to } = useObjectTranslation();
+
+const props = defineProps<{
+  event: ProgramEvent;
+}>();
+
+const emit = defineEmits<{
+  (e: 'edit'): void;
+  (e: 'delete'): void;
+}>();
+
+const dateTime = computed<string>(() => {
+  if (!props.event.date) {
+    return '';
+  }
+
+  const start = props.event.time
+    ? new Date(props.event.date + ' ' + props.event.time)
+    : new Date(props.event.date);
+  const end = props.event.duration
+    ? new Date(start.getTime() + props.event.duration * 60000)
+    : start;
+
+  const fullDay = !props.event.time && !props.event.duration;
+
+  return new Intl.DateTimeFormat(locale.value, {
+    month: 'long',
+    day: '2-digit',
+    weekday: 'long',
+    hour: fullDay ? undefined : 'numeric',
+    minute: fullDay ? undefined : 'numeric',
+  }).formatRange(start, end);
+});
+
+function onDelete() {
+  emit('delete');
+}
+
+function onEdit() {
+  emit('edit');
+}
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/campManagement/programPlanner/CalendarNavigationBar.vue b/frontend/src/components/campManagement/programPlanner/CalendarNavigationBar.vue
index 4d9dbd6b..f37fc55d 100644
--- a/frontend/src/components/campManagement/programPlanner/CalendarNavigationBar.vue
+++ b/frontend/src/components/campManagement/programPlanner/CalendarNavigationBar.vue
@@ -5,12 +5,14 @@
     <div>
       <q-btn
         icon="arrow_back"
+        :disable="prevDisabled"
         rounded
         dense
         @click="previous"
       />
       <q-btn
         icon="arrow_forward"
+        :disable="nextDisabled"
         rounded
         dense
         @click="next"
@@ -36,25 +38,48 @@ const { t } = useI18n();
 
 interface Props {
   modelValue: number;
-  start: string | Date;
-  end: string | Date;
+  start: string;
+  end: string;
+  current: string;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', val: number);
+  (e: 'update:modelValue', val: number): void;
   (e: 'next'): void;
   (e: 'previous'): void;
 }>();
 
 onMounted(() => {
-  daysRange.value = maxDays.value;
+  if (daysRange.value > maxDays.value) {
+    daysRange.value = maxDays.value;
+  }
 });
 
-const daysRange = computed({
+const daysRange = computed<number>({
   get: () => props.modelValue,
-  set: (val: number) => emit('update:modelValue', val),
+  set: (val) => emit('update:modelValue', val),
+});
+
+const prevDisabled = computed<boolean>(() => {
+  const startDate = new Date(props.start);
+  startDate.setHours(0, 0);
+  const currentDate = new Date(props.current);
+
+  return startDate.getTime() >= currentDate.getTime();
+});
+
+const DAY_IN_MY = 24 * 60 * 60 * 1000;
+const nextDisabled = computed<boolean>(() => {
+  const endDate = new Date(props.end);
+  endDate.setHours(0, 0);
+  const currentDate = new Date(props.current);
+
+  return (
+    endDate.getTime() <=
+    currentDate.getTime() + (daysRange.value - 1) * DAY_IN_MY
+  );
 });
 
 function next() {
diff --git a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
index a38a4fc9..af0ba782 100644
--- a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
+++ b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
@@ -1,10 +1,14 @@
 <template>
-  <div class="column">
+  <div
+    class="column"
+    :class="quasar.platform.is.mobile ? 'reverse' : ''"
+  >
     <calendar-navigation-bar
       v-model="range"
       class="col-shrink"
       :start="props.camp.startAt"
       :end="props.camp.endAt"
+      :current="selectedDate"
       @next="onNextNavigation"
       @previous="onPreciousNavigation"
     />
@@ -13,7 +17,7 @@
 
     <div class="col relative-position">
       <q-calendar-day
-        ref="calendar"
+        ref="calendarRef"
         v-model="selectedDate"
         view="day"
         :drag-enter-func="onDragEnter"
@@ -47,6 +51,8 @@
               :event="event"
               :draggable="true"
               @dragstart="onDragStart($event, event)"
+              @edit="onEventEdit(event)"
+              @delete="onEventDelete(event)"
             />
           </div>
         </template>
@@ -62,6 +68,8 @@
             :time-duration-height="timeDurationHeight"
             :draggable="true"
             @dragstart="onDragStart($event, event)"
+            @edit="onEventEdit(event)"
+            @delete="onEventDelete(event)"
           />
         </template>
       </q-calendar-day>
@@ -111,9 +119,9 @@ const emit = defineEmits<{
 const { t, locale } = useI18n();
 const quasar = useQuasar();
 
+const calendarRef = ref<QCalendarDay | null>(null);
 const selectedDate = ref<string>(initialSelectedDate());
-
-const range = ref<number>(1);
+const range = ref<number>(initialRange());
 
 onMounted(() => {
   // TODO Find better solution
@@ -162,8 +170,22 @@ function updateIntervalHeight() {
   intervalHeight.value = height / intervalCount.value;
 }
 
+function initialRange(): number {
+  switch (quasar.screen.name) {
+    case 'xs':
+      return 1;
+    case 'sm':
+      return 3;
+    case 'md':
+      return 5;
+    case 'lg':
+    case 'xl':
+      return 7;
+  }
+}
+
 function initialSelectedDate(): string {
-  return props.camp.startAt.split('T')[0];
+  return formatDate(new Date(props.camp.startAt));
 }
 
 const eventsMap = computed<Record<string, ProgramEvent[]>>(() => {
@@ -235,6 +257,15 @@ function onTimeEventAdd({ scope }: CalendarEvent) {
     });
 }
 
+function onEventEdit(event: ProgramEvent) {
+  // TODO
+}
+
+function onEventDelete(event: ProgramEvent) {
+  // TODO Maybe add conform
+  emit('delete', event.id);
+}
+
 function onDragStart(e: DragEvent, event: ProgramEvent): void {
   if (!e.dataTransfer) {
     return;
@@ -298,12 +329,14 @@ function onDrop(e: DragEvent, type: string, scope: DragAndDropScope): boolean {
       eventUpdate = {
         date: scope.timestamp.date,
         time: null,
+        duration: null,
       };
       break;
     default:
       eventUpdate = {
         date: null,
         time: null,
+        duration: null,
       };
   }
 
@@ -324,12 +357,38 @@ function onWeekdayClass({ scope }: { scope: DragAndDropScope }) {
   };
 }
 
+const DAY_IN_MY = 24 * 60 * 60 * 1000;
+
 function onNextNavigation() {
-  // TODO How to shift
+  const endDate = new Date(props.camp.endAt);
+  endDate.setHours(0, 0);
+
+  const endTime = endDate.getTime();
+  const currentTime = new Date(selectedDate.value).getTime();
+
+  const rangeTime = range.value * DAY_IN_MY;
+  const maxTime = endTime - (rangeTime - DAY_IN_MY);
+  const updateMs = Math.min(maxTime, currentTime + rangeTime);
+
+  selectedDate.value = formatDate(new Date(updateMs));
 }
 
 function onPreciousNavigation() {
-  // TODO How to shift
+  const startDate = new Date(props.camp.startAt);
+  startDate.setHours(0, 0);
+
+  const startTime = startDate.getTime();
+  const currentTime = new Date(selectedDate.value).getTime();
+
+  const rangeTime = range.value * DAY_IN_MY;
+  const minTime = currentTime - rangeTime;
+  const updateMs = Math.max(startTime, minTime);
+
+  selectedDate.value = formatDate(new Date(updateMs));
+}
+
+function formatDate(date: Date): string {
+  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
 }
 </script>
 
diff --git a/frontend/src/stores/program-planner-store.ts b/frontend/src/stores/program-planner-store.ts
index e0a8fa4f..25e4b5bc 100644
--- a/frontend/src/stores/program-planner-store.ts
+++ b/frontend/src/stores/program-planner-store.ts
@@ -65,9 +65,16 @@ export const useProgramPlannerStore = defineStore('program-planner', () => {
     });
 
     // Optimistic update
-    const tmpEvent = {
+    const tmpEvent: ProgramEvent = {
       id: tmpId,
       ...event,
+      details: event.details ?? null,
+      location: event.location ?? null,
+      date: event.date ?? null,
+      time: event.time ?? null,
+      duration: event.duration ?? null,
+      color: event.color ?? null,
+      side: event.side ?? null,
     };
 
     data.value?.push(tmpEvent);
@@ -119,7 +126,7 @@ export const useProgramPlannerStore = defineStore('program-planner', () => {
       apiService.deleteProgramEvent(campId, id),
     );
 
-    data.value = data.value?.filter((event) => event.id === id);
+    data.value = data.value?.filter((event) => event.id !== id);
   }
 
   return {

From 78d6705b23335db80c252f29538500c5750b9dec Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Sat, 12 Oct 2024 05:43:15 +0200
Subject: [PATCH 09/13] feat: Accept null for empty translated input

---
 .../common/inputs/TranslatedInput.vue         | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/common/inputs/TranslatedInput.vue b/frontend/src/components/common/inputs/TranslatedInput.vue
index 223f9ec5..95a81cc6 100644
--- a/frontend/src/components/common/inputs/TranslatedInput.vue
+++ b/frontend/src/components/common/inputs/TranslatedInput.vue
@@ -95,8 +95,10 @@ type Translations = Record<string, string | number>;
 
 const { t } = useI18n();
 
+type ModelValue = Translations | string | number | undefined | null;
+
 interface Props {
-  modelValue: undefined | string | number | Translations;
+  modelValue: ModelValue;
   modelModifiers?: Record<string, boolean>;
   label?: string;
   locales?: string[];
@@ -106,14 +108,12 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   modelModifiers: undefined,
   label: '',
-  locales: undefined, // TODO Why cant I make it an empty array?
+  locales: undefined,
   always: false,
 });
+
 const emit = defineEmits<{
-  (
-    e: 'update:modelValue',
-    value: string | number | Translations | undefined,
-  ): void;
+  (e: 'update:modelValue', value: ModelValue): void;
 }>();
 
 const useTranslations = ref(defaultUseTranslations());
@@ -131,7 +131,11 @@ function defaultUseTranslations(): boolean {
 function defaultValue(): string | number {
   // If the model value if an object and there is only one locale, we assume that the object is a translation and
   //  contains a translation for the given locale
-  if (props.locales?.length === 1 && typeof props.modelValue === 'object') {
+  if (
+    props.locales?.length === 1 &&
+    props.modelValue &&
+    typeof props.modelValue === 'object'
+  ) {
     return props.modelValue[props.locales[0]];
   }
 
@@ -142,7 +146,9 @@ function defaultValue(): string | number {
 }
 
 function defaultTranslations(): Translations {
-  return typeof props.modelValue === 'object' ? props.modelValue : {};
+  return props.modelValue && typeof props.modelValue === 'object'
+    ? props.modelValue
+    : {};
 }
 
 watch(
@@ -167,7 +173,7 @@ watch(
     if (typeof newValue === 'string' || typeof newValue === 'number') {
       value.value = newValue;
       useTranslations.value = false;
-    } else if (typeof newValue === 'object') {
+    } else if (newValue && typeof newValue === 'object') {
       translations.value = newValue;
       useTranslations.value = true;
     }

From 1b85e8e87b390085b0a0783a0dc269cf97382b8c Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Sat, 12 Oct 2024 05:44:40 +0200
Subject: [PATCH 10/13] wip: Add program event edit dialog

---
 .../programPlanner/CalendarItemPopup.vue      |   1 +
 .../programPlanner/ProgramCalendar.vue        |  23 +-
 .../dialogs/ProgramEventEditDialog.vue        | 495 ++++++++++++++++++
 .../ProgramEventModificationDialog.vue        | 129 -----
 4 files changed, 512 insertions(+), 136 deletions(-)
 create mode 100644 frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventEditDialog.vue
 delete mode 100644 frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventModificationDialog.vue

diff --git a/frontend/src/components/campManagement/programPlanner/CalendarItemPopup.vue b/frontend/src/components/campManagement/programPlanner/CalendarItemPopup.vue
index 364ea01c..4689c676 100644
--- a/frontend/src/components/campManagement/programPlanner/CalendarItemPopup.vue
+++ b/frontend/src/components/campManagement/programPlanner/CalendarItemPopup.vue
@@ -12,6 +12,7 @@
           size="sm"
           flat
           rounded
+          @click="onEdit"
         />
         <q-btn
           v-close-popup
diff --git a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
index af0ba782..dd4c1436 100644
--- a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
+++ b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
@@ -20,6 +20,7 @@
         ref="calendarRef"
         v-model="selectedDate"
         view="day"
+        :locale="locale"
         :drag-enter-func="onDragEnter"
         :drag-over-func="onDragOver"
         :drag-leave-func="onDragLeave"
@@ -95,6 +96,7 @@ import CalendarDayItem from 'components/campManagement/programPlanner/CalendarDa
 import { DragAndDropScope } from 'components/campManagement/programPlanner/DragAndDropScope';
 import PointerEvent from 'happy-dom/lib/event/events/PointerEvent';
 import ProgramEventAddDialog from 'components/campManagement/programPlanner/dialogs/ProgramEventAddDialog.vue';
+import ProgramEventEditDialog from 'components/campManagement/programPlanner/dialogs/ProgramEventEditDialog.vue';
 
 interface Props {
   camp: CampDetails;
@@ -116,7 +118,7 @@ const emit = defineEmits<{
   (e: 'delete', id: string): void;
 }>();
 
-const { t, locale } = useI18n();
+const { locale } = useI18n();
 const quasar = useQuasar();
 
 const calendarRef = ref<QCalendarDay | null>(null);
@@ -211,11 +213,7 @@ function getFullDayEvents(date: string) {
 }
 
 function getEvents(date: string) {
-  const events = eventsMap.value[date] || [];
-
-  // TODO Apply side when side is auto
-
-  return events;
+  return eventsMap.value[date] || [];
 }
 
 interface CalendarEvent {
@@ -258,7 +256,18 @@ function onTimeEventAdd({ scope }: CalendarEvent) {
 }
 
 function onEventEdit(event: ProgramEvent) {
-  // TODO
+  quasar
+    .dialog({
+      component: ProgramEventEditDialog,
+      componentProps: {
+        event,
+        dateTimeMin: props.camp.startAt,
+        dateTimeMax: props.camp.endAt,
+      },
+    })
+    .onOk((programEvent: ProgramEventCreateData) => {
+      emit('update', event.id, programEvent);
+    });
 }
 
 function onEventDelete(event: ProgramEvent) {
diff --git a/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventEditDialog.vue b/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventEditDialog.vue
new file mode 100644
index 00000000..3215296e
--- /dev/null
+++ b/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventEditDialog.vue
@@ -0,0 +1,495 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    @hide="onDialogHide"
+  >
+    <q-card class="q-dialog-plugin q-pb-none">
+      <q-form
+        @submit="onOKClick"
+        @reset="onDialogCancel"
+      >
+        <q-card-section>
+          <div class="text-h5 text-center">
+            {{ t('title') }}
+          </div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none q-gutter-y-sm column">
+          <translated-input
+            v-model="data.title"
+            :label="t('field.title.label')"
+            :rules="[
+              (val?: string) => val?.length || t('field.title.rule.required'),
+            ]"
+            hide-bottom-space
+            outlined
+            rounded
+          >
+            <template #prepend>
+              <q-icon name="title" />
+            </template>
+          </translated-input>
+
+          <translated-input
+            v-model="data.location"
+            :label="t('field.location.label')"
+            clearable
+            outlined
+            rounded
+          >
+            <template #prepend>
+              <q-icon name="place" />
+            </template>
+          </translated-input>
+
+          <translated-input
+            v-model="data.details"
+            :label="t('field.details.label')"
+            autogrow
+            clearable
+            outlined
+            rounded
+          >
+            <template #prepend>
+              <q-icon name="description" />
+            </template>
+          </translated-input>
+
+          <!-- Date -->
+          <q-input
+            v-model="data.date"
+            :label="t('field.date.label')"
+            outlined
+            rounded
+          >
+            <template #prepend>
+              <q-icon name="calendar_month" />
+            </template>
+            <template #append>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+              >
+                <q-popup-proxy
+                  cover
+                  transition-show="scale"
+                  transition-hide="scale"
+                >
+                  <q-date
+                    v-model="data.date"
+                    mask="YYYY-MM-DD"
+                    :options="dateOptions"
+                    :navigation-min-year-month="monthYearMin"
+                    :navigation-max-year-month="monthYearMax"
+                  >
+                    <div class="row items-center justify-end">
+                      <q-btn
+                        v-close-popup
+                        :label="t('action.close')"
+                        color="primary"
+                        flat
+                        rounded
+                      />
+                    </div>
+                  </q-date>
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+          </q-input>
+
+          <q-toggle
+            v-model="fullDay"
+            :label="t('field.fullDay.label')"
+          />
+
+          <!-- time & duration -->
+          <div
+            v-if="!fullDay"
+            class="row no-wrap q-gutter-sm"
+          >
+            <!-- time -->
+            <q-input
+              v-model="data.time"
+              :label="t('field.start.label')"
+              mask="time"
+              :rules="['time']"
+              hide-bottom-space
+              outlined
+              rounded
+            >
+              <template #append>
+                <q-icon
+                  name="access_time"
+                  class="cursor-pointer"
+                >
+                  <q-popup-proxy
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                  >
+                    <q-time v-model="data.time">
+                      <div class="row items-center justify-end">
+                        <q-btn
+                          v-close-popup
+                          :label="t('action.close')"
+                          color="primary"
+                          flat
+                          rounded
+                        />
+                      </div>
+                    </q-time>
+                  </q-popup-proxy>
+                </q-icon>
+              </template>
+            </q-input>
+
+            <!-- duration -->
+            <q-input
+              v-model="timeEnd"
+              :label="t('field.end.label')"
+              mask="time"
+              :rules="[
+                'time',
+                (val: string) =>
+                  (data.time && isDateLater(data.time, val)) ||
+                  t('field.end.rule.later'),
+              ]"
+              hide-bottom-space
+              outlined
+              rounded
+            >
+              <template #append>
+                <q-icon
+                  name="access_time"
+                  class="cursor-pointer"
+                >
+                  <q-popup-proxy
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                  >
+                    <q-time v-model="timeEnd">
+                      <div class="row items-center justify-end">
+                        <q-btn
+                          v-close-popup
+                          :label="t('action.close')"
+                          color="primary"
+                          flat
+                          rounded
+                        />
+                      </div>
+                    </q-time>
+                  </q-popup-proxy>
+                </q-icon>
+              </template>
+            </q-input>
+          </div>
+
+          <!-- color -->
+          <q-input
+            v-model="data.color"
+            :rules="['anyColor']"
+            hide-bottom-space
+            clearable
+            outlined
+            rounded
+          >
+            <template #prepend>
+              <q-icon
+                name="circle"
+                :style="{ color: data.color }"
+              />
+            </template>
+            <template #append>
+              <q-icon
+                name="colorize"
+                class="cursor-pointer"
+              >
+                <q-popup-proxy
+                  cover
+                  transition-show="scale"
+                  transition-hide="scale"
+                >
+                  <q-color
+                    v-model="data.color"
+                    default-view="palette"
+                  />
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+          </q-input>
+
+          <!-- side -->
+          <q-btn-toggle
+            v-model="data.side"
+            :options="sideOptions"
+            spread
+            outline
+            rounded
+          />
+        </q-card-section>
+
+        <!-- action buttons -->
+        <q-card-actions align="right">
+          <q-btn
+            type="reset"
+            outline
+            rounded
+            color="primary"
+            :label="t('action.cancel')"
+          />
+          <q-btn
+            type="submit"
+            rounded
+            color="primary"
+            :label="t('action.ok')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" setup>
+import {
+  addToDate,
+  getTime,
+  parseTimestamp,
+} from '@quasar/quasar-ui-qcalendar';
+
+import { QPopupProxy, QSelectOption, useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { computed, reactive, ref, toRaw } from 'vue';
+import TranslatedInput from 'components/common/inputs/TranslatedInput.vue';
+import {
+  ProgramEvent,
+  ProgramEventUpdateData,
+} from '@camp-registration/common/entities';
+
+const { t } = useI18n();
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+
+const props = defineProps<{
+  event: ProgramEvent;
+  dateTimeMin?: string;
+  dateTimeMax?: string;
+}>();
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const data = reactive<ProgramEventUpdateData>(initialData());
+
+function initialData(): ProgramEventUpdateData {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { id, ...data } = structuredClone(toRaw(props.event));
+
+  return data;
+}
+
+const fullDay = computed<boolean>({
+  get() {
+    return !data.time || !data.duration;
+  },
+  set(fullDay) {
+    data.time = fullDay ? null : (props.event.time ?? '12:00');
+    data.duration = fullDay ? null : (props.event.duration ?? 30);
+  },
+});
+
+const timeEnd = computed<string>({
+  get() {
+    if (!data.time) {
+      return '23:59';
+    }
+
+    if (!data.duration) {
+      return data.time;
+    }
+
+    const ts = parseTimestamp('0000-00-00 ' + data.time);
+    if (!ts) {
+      return '--:--';
+    }
+
+    return getTime(addToDate(ts, { minute: data.duration }));
+  },
+  set(time) {
+    if (!data.time) {
+      data.time = '00:00';
+    }
+    data.duration = timeDifference(data.time, time);
+  },
+});
+
+const sideOptions = ref<QSelectOption[]>([
+  {
+    label: t('field.side.left'),
+    value: 'left',
+  },
+  {
+    label: t('field.side.auto'),
+    value: 'auto',
+  },
+  {
+    label: t('field.side.right'),
+    value: 'right',
+  },
+]);
+
+const monthYearMin = computed<string | undefined>(() => {
+  return props.dateTimeMin ? extractYearMonth(props.dateTimeMin) : undefined;
+});
+
+const monthYearMax = computed<string | undefined>(() => {
+  return props.dateTimeMax ? extractYearMonth(props.dateTimeMax) : undefined;
+});
+
+function extractYearMonth(date: string): string {
+  const year = date.substring(0, 4); // Extracts YYYY
+  const month = date.substring(5, 7); // Extracts MM
+  return `${year}/${month}`;
+}
+
+function dateOptions(date: string): boolean {
+  const selectedDate = new Date(date);
+  const dateTimeMin = props.dateTimeMin ? new Date(props.dateTimeMin) : null;
+  const dateTimeMax = props.dateTimeMax ? new Date(props.dateTimeMax) : null;
+
+  return (
+    (!dateTimeMin || selectedDate >= dateTimeMin) &&
+    (!dateTimeMax || selectedDate <= dateTimeMax)
+  );
+}
+
+function onOKClick(): void {
+  onDialogOK({
+    ...data,
+    duration: fullDay.value ? 24 : data.duration,
+  });
+}
+
+function isDateLater(timeStart: string, timeEnd: string) {
+  const [hoursStart, minutesStart] = timeStart.split(':').map(Number);
+  const [hoursEnd, minutesEnd] = timeEnd.split(':').map(Number);
+
+  return hoursStart === hoursEnd
+    ? minutesStart < minutesEnd
+    : hoursStart < hoursEnd;
+}
+
+function timeDifference(timeStart: string, timeEnd: string) {
+  const [hoursStart, minutesStart] = timeStart.split(':').map(Number);
+  const [hoursEnd, minutesEnd] = timeEnd.split(':').map(Number);
+
+  // Convert the times to total minutes
+  const totalMinutesStart = hoursStart * 60 + minutesStart;
+  const totalMinutesEnd = hoursEnd * 60 + minutesEnd;
+
+  // Find the absolute difference in minutes
+  return totalMinutesEnd - totalMinutesStart;
+}
+</script>
+
+<style scoped></style>
+
+<i18n lang="yaml" locale="en">
+title: 'Edit Event'
+
+field:
+  details:
+    label: 'Details'
+  end:
+    label: 'End time'
+    rule:
+      later: 'End must be after start time'
+  fullDay:
+    label: 'Full Day'
+  location:
+    label: 'Location'
+  side:
+    left: 'Left'
+    auto: 'Auto'
+    right: 'Right'
+  start:
+    label: 'Start time'
+  title:
+    label: 'Title'
+    rule:
+      required: 'The title is required'
+
+action:
+  cancel: 'Cancel'
+  close: 'Close'
+  ok: 'Save'
+</i18n>
+
+<i18n lang="yaml" locale="de">
+title: 'Ereignis bearbeiten'
+
+field:
+  details:
+    label: 'Details'
+  end:
+    label: 'Endzeit'
+    rule:
+      later: 'Das Ende muss nach der Startzeit liegen'
+  fullDay:
+    label: 'Ganztägig'
+  location:
+    label: 'Ort'
+  side:
+    left: 'Links'
+    auto: 'Automatisch'
+    right: 'Rechts'
+  start:
+    label: 'Startzeit'
+  title:
+    label: 'Titel'
+    rule:
+      required: 'Der Titel ist erforderlich'
+
+action:
+  cancel: 'Abbrechen'
+  close: 'Schließen'
+  ok: 'Speichern'
+</i18n>
+
+<i18n lang="yaml" locale="fr">
+title: "Modifier l'événement"
+
+field:
+  details:
+    label: 'Détails'
+  end:
+    label: 'Heure de fin'
+    rule:
+      later: "La fin doit être après l'heure de début"
+  fullDay:
+    label: 'Journée entière'
+  location:
+    label: 'Lieu'
+  side:
+    left: 'Gauche'
+    auto: 'Automatique'
+    right: 'Droit'
+  start:
+    label: 'Heure de début'
+  title:
+    label: 'Titre'
+    rule:
+      required: 'Le titre est requis'
+
+action:
+  cancel: 'Annuler'
+  close: 'Fermer'
+  ok: 'Enregistrer'
+</i18n>
+
+<style lang="scss">
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>
diff --git a/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventModificationDialog.vue b/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventModificationDialog.vue
deleted file mode 100644
index b56b3938..00000000
--- a/frontend/src/components/campManagement/programPlanner/dialogs/ProgramEventModificationDialog.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <q-dialog
-    ref="dialogRef"
-    @hide="onDialogHide"
-  >
-    <q-card class="q-dialog-plugin q-pb-none">
-      <q-form
-        @submit="onOKClick"
-        @reset="onCancelClick"
-      >
-        <q-card-section>
-          <div class="text-h6">
-            {{ t('title') }}
-          </div>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none q-gutter-y-sm column">
-          <translated-input
-            v-model="data.title"
-            outline
-            rounded
-          />
-
-          <translated-input
-            v-model="data.details"
-            type="textarea"
-            outline
-            rounded
-          />
-
-          <!-- TODO Full day -->
-
-          <!-- TODO Start -->
-          <!-- TODO End -->
-        </q-card-section>
-
-        <!-- action buttons -->
-        <q-card-actions align="right">
-          <q-btn
-            type="reset"
-            outline
-            rounded
-            color="primary"
-            :label="t('actions.cancel')"
-          />
-          <q-btn
-            type="submit"
-            rounded
-            color="primary"
-            :label="t('actions.save')"
-          />
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script lang="ts" setup>
-import { useDialogPluginComponent } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { reactive, toRaw } from 'vue';
-import TranslatedInput from 'components/common/inputs/TranslatedInput.vue';
-import {
-  ProgramEvent,
-  ProgramEventUpdateData,
-} from '@camp-registration/common/entities';
-
-interface Props {
-  event?: ProgramEvent;
-}
-
-const props = defineProps<Props>();
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const data = reactive<Partial<ProgramEventUpdateData>>(initialValue());
-
-function initialValue(): Partial<ProgramEventUpdateData> {
-  return props.event ? structuredClone(toRaw(props.event)) : {};
-}
-
-const { t } = useI18n();
-
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
-  useDialogPluginComponent();
-// dialogRef      - Vue ref to be applied to QDialog
-// onDialogHide   - Function to be used as handler for @hide on QDialog
-// onDialogOK     - Function to call to settle dialog with "ok" outcome
-//                    example: onDialogOK() - no payload
-//                    example: onDialogOK({ /*...*/ }) - with payload
-// onDialogCancel - Function to call to settle dialog with "cancel" outcome
-
-function onOKClick(): void {
-  onDialogOK(data);
-}
-
-function onCancelClick() {
-  onDialogCancel();
-}
-</script>
-
-<style scoped></style>
-
-<i18n lang="yaml" locale="en">
-title: 'Calendar Settings'
-
-fields:
-  dayStart:
-    label: 'Day start'
-    hint: ''
-  dayEnd:
-    label: 'Day end'
-    hint: ''
-  timeInterval:
-    label: 'Time interval'
-    hint: 'How many minutes should one interval have'
-
-actions:
-  save: 'Save'
-  cancel: 'Cancel'
-</i18n>
-
-<style lang="scss">
-input[type='number']::-webkit-outer-spin-button,
-input[type='number']::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-</style>

From 6e9f6e1acc7119bc02777a42a020b2ce4acba44d Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Sat, 12 Oct 2024 05:44:57 +0200
Subject: [PATCH 11/13] fix: Accept empty string

---
 backend/src/validations/program-event.validation.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/validations/program-event.validation.ts b/backend/src/validations/program-event.validation.ts
index a6a1c769..061008e0 100644
--- a/backend/src/validations/program-event.validation.ts
+++ b/backend/src/validations/program-event.validation.ts
@@ -6,7 +6,7 @@ const extendedJoi = Joi.extend(JoiDate);
 
 const translatableSchema = Joi.alternatives()
   .try(Joi.string(), Joi.object().pattern(Joi.string(), Joi.string()))
-  .required();
+  .allow('');
 const timeSchema = Joi.string().regex(/^([01]\d|2[0-3]):([0-5]\d)$/);
 const dateSchema = extendedJoi.date().format('YYYY-MM-DD').raw();
 

From 3db3e328f99512d4bd28ba2a8180a7854b7882f2 Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Sat, 12 Oct 2024 05:50:35 +0200
Subject: [PATCH 12/13] fix lint errors

---
 .../campManagement/programPlanner/ProgramCalendar.vue         | 1 -
 frontend/src/stores/room-planner-store.ts                     | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
index dd4c1436..f05acb9f 100644
--- a/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
+++ b/frontend/src/components/campManagement/programPlanner/ProgramCalendar.vue
@@ -94,7 +94,6 @@ import CalendarNavigationBar from 'components/campManagement/programPlanner/Cale
 import CalendarItem from 'components/campManagement/programPlanner/CalendarItem.vue';
 import CalendarDayItem from 'components/campManagement/programPlanner/CalendarDayItem.vue';
 import { DragAndDropScope } from 'components/campManagement/programPlanner/DragAndDropScope';
-import PointerEvent from 'happy-dom/lib/event/events/PointerEvent';
 import ProgramEventAddDialog from 'components/campManagement/programPlanner/dialogs/ProgramEventAddDialog.vue';
 import ProgramEventEditDialog from 'components/campManagement/programPlanner/dialogs/ProgramEventEditDialog.vue';
 
diff --git a/frontend/src/stores/room-planner-store.ts b/frontend/src/stores/room-planner-store.ts
index 7955892e..e81a66ba 100644
--- a/frontend/src/stores/room-planner-store.ts
+++ b/frontend/src/stores/room-planner-store.ts
@@ -31,7 +31,7 @@ export const useRoomPlannerStore = defineStore('room-planner', () => {
     withProgressNotification,
     withErrorNotification,
     lazyFetch,
-    asyncAction,
+    asyncUpdate,
     requestPending,
     checkNotNullWithError,
     checkNotNullWithNotification,
@@ -125,7 +125,7 @@ export const useRoomPlannerStore = defineStore('room-planner', () => {
     const bedId = room.beds[position].id;
     const registrationId = person?.id ?? null;
 
-    asyncAction(() => {
+    asyncUpdate(() => {
       return withErrorNotification('update-bed', () => {
         return apiService.updateBed(campId, roomId, bedId, registrationId);
       });

From 9c7e3cbb8c98c4cbaa61ad711c1ce13e4d37e3ab Mon Sep 17 00:00:00 2001
From: marvin-wtt <31454580+marvin-wtt@users.noreply.github.com>
Date: Mon, 14 Oct 2024 07:49:06 +0200
Subject: [PATCH 13/13] Merge main into feat/program-planner

---
 backend/src/app/camp/camp.routes.ts                |  2 ++
 .../programEvent}/program-event.controller.ts      | 14 +++++++-------
 .../programEvent}/program-event.resource.ts        |  0
 .../{camp => programEvent}/program-event.routes.ts |  6 +++---
 .../programEvent/program-event.service.ts}         |  0
 .../programEvent}/program-event.validation.ts      |  0
 backend/src/controllers/index.ts                   |  0
 backend/src/resources/index.ts                     |  0
 backend/src/routes/api/v1/camps/index.ts           |  0
 backend/src/services/index.ts                      |  0
 backend/src/validations/index.ts                   |  0
 11 files changed, 12 insertions(+), 10 deletions(-)
 rename backend/src/{controllers => app/programEvent}/program-event.controller.ts (77%)
 rename backend/src/{resources => app/programEvent}/program-event.resource.ts (100%)
 rename backend/src/app/{camp => programEvent}/program-event.routes.ts (87%)
 rename backend/src/{services/program-planner.service.ts => app/programEvent/program-event.service.ts} (100%)
 rename backend/src/{validations => app/programEvent}/program-event.validation.ts (100%)
 delete mode 100644 backend/src/controllers/index.ts
 delete mode 100644 backend/src/resources/index.ts
 delete mode 100644 backend/src/routes/api/v1/camps/index.ts
 delete mode 100644 backend/src/services/index.ts
 delete mode 100644 backend/src/validations/index.ts

diff --git a/backend/src/app/camp/camp.routes.ts b/backend/src/app/camp/camp.routes.ts
index d4e49dfa..43f88eca 100644
--- a/backend/src/app/camp/camp.routes.ts
+++ b/backend/src/app/camp/camp.routes.ts
@@ -13,6 +13,7 @@ import registrationRoutes from 'app/registration/registration.routes';
 import tableTemplateRoutes from 'app/tableTemplate/table-template.routes';
 import roomRoutes from 'app/room/room.routes';
 import campFileRoutes from './camp-files.routes';
+import programEventRoutes from 'app/programEvent/program-event.routes';
 import { CampCreateData, CampQuery } from '@camp-registration/common/entities';
 
 const router = express.Router();
@@ -51,6 +52,7 @@ router.use('/:campId/templates', tableTemplateRoutes);
 router.use('/:campId/managers', managerRoutes);
 router.use('/:campId/rooms', roomRoutes);
 router.use('/:campId/files', campFileRoutes);
+router.use('/:campId/program-events', programEventRoutes);
 
 router.get(
   '/',
diff --git a/backend/src/controllers/program-event.controller.ts b/backend/src/app/programEvent/program-event.controller.ts
similarity index 77%
rename from backend/src/controllers/program-event.controller.ts
rename to backend/src/app/programEvent/program-event.controller.ts
index 20ed54f5..6bdcc1ee 100644
--- a/backend/src/controllers/program-event.controller.ts
+++ b/backend/src/app/programEvent/program-event.controller.ts
@@ -1,8 +1,8 @@
 import { catchRequestAsync } from 'utils/catchAsync';
 import httpStatus from 'http-status';
-import { collection, resource } from 'resources/resource';
-import { programPlannerService } from 'services';
-import { programEventResource } from 'resources';
+import { collection, resource } from 'app/resource';
+import programEventService from './program-event.service';
+import programEventResource from './program-event.resource';
 import { routeModel } from 'utils/verifyModel';
 
 const show = catchRequestAsync(async (req, res) => {
@@ -14,7 +14,7 @@ const show = catchRequestAsync(async (req, res) => {
 const index = catchRequestAsync(async (req, res) => {
   const { campId } = req.params;
 
-  const events = await programPlannerService.queryProgramEvent(campId);
+  const events = await programEventService.queryProgramEvent(campId);
   const resources = events.map((value) => programEventResource(value));
 
   res.json(collection(resources));
@@ -24,7 +24,7 @@ const store = catchRequestAsync(async (req, res) => {
   const { campId } = req.params;
   const data = req.body;
 
-  const event = await programPlannerService.createProgramEvent(campId, {
+  const event = await programEventService.createProgramEvent(campId, {
     title: data.title,
     details: data.details,
     location: data.location,
@@ -42,7 +42,7 @@ const update = catchRequestAsync(async (req, res) => {
   const { programEventId: id } = req.params;
   const data = req.body;
 
-  const event = await programPlannerService.updateProgramEventById(id, {
+  const event = await programEventService.updateProgramEventById(id, {
     title: data.title,
     details: data.details,
     location: data.location,
@@ -59,7 +59,7 @@ const update = catchRequestAsync(async (req, res) => {
 const destroy = catchRequestAsync(async (req, res) => {
   const { programEventId: id } = req.params;
 
-  await programPlannerService.deleteProgramEventById(id);
+  await programEventService.deleteProgramEventById(id);
 
   res.status(httpStatus.NO_CONTENT).send();
 });
diff --git a/backend/src/resources/program-event.resource.ts b/backend/src/app/programEvent/program-event.resource.ts
similarity index 100%
rename from backend/src/resources/program-event.resource.ts
rename to backend/src/app/programEvent/program-event.resource.ts
diff --git a/backend/src/app/camp/program-event.routes.ts b/backend/src/app/programEvent/program-event.routes.ts
similarity index 87%
rename from backend/src/app/camp/program-event.routes.ts
rename to backend/src/app/programEvent/program-event.routes.ts
index 24036439..78d4a1a1 100644
--- a/backend/src/app/camp/program-event.routes.ts
+++ b/backend/src/app/programEvent/program-event.routes.ts
@@ -3,9 +3,9 @@ import { auth, guard, validate } from 'middlewares';
 import { campManager } from 'guards';
 import { routeModel, verifyModelExists } from 'utils/verifyModel';
 import { catchParamAsync } from 'utils/catchAsync';
-import { programPlannerService } from 'services';
-import { programEventController } from 'controllers';
-import { programEventValidation } from 'validations';
+import programPlannerService from './program-event.service';
+import programEventController from './program-event.controller';
+import programEventValidation from './program-event.validation';
 
 const router = express.Router({ mergeParams: true });
 
diff --git a/backend/src/services/program-planner.service.ts b/backend/src/app/programEvent/program-event.service.ts
similarity index 100%
rename from backend/src/services/program-planner.service.ts
rename to backend/src/app/programEvent/program-event.service.ts
diff --git a/backend/src/validations/program-event.validation.ts b/backend/src/app/programEvent/program-event.validation.ts
similarity index 100%
rename from backend/src/validations/program-event.validation.ts
rename to backend/src/app/programEvent/program-event.validation.ts
diff --git a/backend/src/controllers/index.ts b/backend/src/controllers/index.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/backend/src/resources/index.ts b/backend/src/resources/index.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/backend/src/routes/api/v1/camps/index.ts b/backend/src/routes/api/v1/camps/index.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/backend/src/services/index.ts b/backend/src/services/index.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/backend/src/validations/index.ts b/backend/src/validations/index.ts
deleted file mode 100644
index e69de29b..00000000