somewhat broken initial meal plan version

vue3/src/components/display/MealPlanCalendarItem.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="card cv-item meal-plan-card p-0"
+         :style="{'top': itemTop, 'height': itemHeight, 'border-color': mealPlan.mealType.color}"
+         :key="value.id"
+         :class="value.classes"
+    >
+
+        <div class="d-flex flex-row align-items-center">
+            <div class="flex-column">
+                <img class="" style="object-fit: cover" :style="{'height': itemHeight, 'width': itemHeight}" :src="mealPlan.recipe.image"
+                     v-if="mealPlan.recipe != undefined && detailedItems"/>
+                <img class="" style="object-fit: cover" :style="{'height': itemHeight, 'width': itemHeight}" src="../../assets/recipe_no_image.svg"
+                     v-if="detailedItems && ((mealPlan.recipe == undefined && mealPlan.note === '') || (mealPlan.recipe != undefined && mealPlan.recipe.image === null))"/>
+            </div>
+            <div class="flex-column flex-grow-0 align-middle justify-content-center">
+                <div class="card-body p-0 pl-1 align-middle">
+
+                    <span class="font-light" :class="{'two-line-text': detailedItems,'one-line-text': !detailedItems,}">
+                       <i class="fas fa-shopping-cart fa-xs float-left"  v-if="mealPlan.shopping"/>
+                        {{ itemTitle }}</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+import {computed, PropType} from "vue";
+import {IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
+
+
+let props = defineProps({
+    value: {type: {} as PropType<IMealPlanNormalizedCalendarItem>, required: true},
+    itemHeight: {type: String, default: '2.6rem'},
+    itemTop: {type: String,},
+    detailedItems: {type: Boolean, default: true}
+})
+
+const mealPlan = computed(() => {
+    return props.value.originalItem.mealPlan
+})
+
+const itemTitle = computed(() => {
+    if (mealPlan.value.recipe != undefined) {
+        return mealPlan.value.recipe.name
+    } else if (mealPlan.value.title != null && mealPlan.value.title !== "") {
+        return mealPlan.value.title
+    } else {
+        return 'ERROR'
+    }
+})
+
+
+</script>
+
+<style scoped>
+.meal-plan-card {
+    background-color: #fff;
+}
+
+@media (max-width: 767.9px) {
+    .meal-plan-card {
+        font-size: 13px;
+    }
+}
+
+.two-line-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.one-line-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>

vue3/src/pages/MealPlanPage.vue

@@ -1,10 +1,13 @@
 <template>
 
     <v-row class="h-100">
-        <v-col >
+        <v-col>
             <CalendarView
+                :items="planItems"
                 class="theme-default ">
-
+                <template #item="{ value, weekStartDate, top }">
+                    <meal-plan-calendar-item :value="value"></meal-plan-calendar-item>
+                </template>
             </CalendarView>
         </v-col>
     </v-row>
@@ -19,11 +22,27 @@ import {ApiApi, MealPlan} from "@/openapi";
 import {CalendarView, CalendarViewHeader} from "vue-simple-calendar"
 import "vue-simple-calendar/dist/style.css"
 import "vue-simple-calendar/dist/css/default.css"
+import MealPlanCalendarItem from "@/components/display/MealPlanCalendarItem.vue";
+import {IMealPlanCalendarItem, IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
+
 
 export default defineComponent({
     name: "MealPlanPage",
-    components: {VCalendar, CalendarView, CalendarViewHeader},
-    computed: {},
+    components: {MealPlanCalendarItem,  VCalendar, CalendarView, CalendarViewHeader},
+    computed: {
+        planItems: function(){
+            let items = [] as IMealPlanCalendarItem[]
+            this.mealPlans.forEach(mp => {
+                items.push({
+                    startDate: mp.fromDate,
+                    endDate: mp.toDate,
+                    id: mp.id,
+                    mealPlan: mp,
+                } as IMealPlanCalendarItem)
+            })
+            return items
+        }
+    },
     data() {
         return {
             mealPlans: [] as MealPlan[]

vue3/src/types/MealPlan.ts

@@ -0,0 +1,15 @@
+import {MealPlan} from "@/openapi";
+import {ICalendarItem} from "vue-simple-calendar/dist/src/ICalendarItem";
+
+export interface IMealPlanCalendarItem {
+	startDate: Date,
+	endDate: Date,
+	id: number,
+	mealPlan: MealPlan
+}
+export interface IMealPlanNormalizedCalendarItem extends ICalendarItem {
+	endDate: Date
+	originalItem: IMealPlanCalendarItem
+	classes: string[]
+	itemRow?: number
+}