basic calendar

vue3/package.json

@@ -19,6 +19,7 @@
     "vue": "^3.4.15",
     "vue-multiselect": "^3.0.0-beta.3",
     "vue-router": "4",
+    "vue-simple-calendar": "^7.1.0",
     "vuedraggable": "^4.1.0",
     "vuetify": "^3.5.10"
   },

vue3/src/pages/MealPlanPage.vue

@@ -1,9 +1,13 @@
 <template>
 
-    <v-calendar view-mode="month" :events="calendarEvents" show-adjacent-months>
-
-    </v-calendar>
+    <v-row class="h-100">
+        <v-col >
+            <CalendarView
+                class="theme-default ">
 
+            </CalendarView>
+        </v-col>
+    </v-row>
 </template>
 
 <script lang="ts">
@@ -12,19 +16,14 @@ import {defineComponent} from 'vue'
 import {VCalendar} from 'vuetify/labs/VCalendar'
 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"
 
 export default defineComponent({
     name: "MealPlanPage",
-    components: {VCalendar},
-    computed: {
-        calendarEvents: function(){
-            let events = []
-            this.mealPlans.forEach(mp => {
-                events.push({start: mp.fromDate, end: mp.toDate, title: (mp.recipe != undefined) ? mp.recipe.name : mp.title})
-            })
-            return events
-        }
-    },
+    components: {VCalendar, CalendarView, CalendarViewHeader},
+    computed: {},
     data() {
         return {
             mealPlans: [] as MealPlan[]

vue3/yarn.lock

@@ -1140,6 +1140,13 @@ vue-router@4:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue-simple-calendar@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/vue-simple-calendar/-/vue-simple-calendar-7.1.0.tgz#d850eb834bdb7a257bb43781908fcbb9a5af56c2"
+  integrity sha512-WNbvRVGQQJlStaLPvvpe2ZsB/E1n8eFgUh4hD931ljp2czPA8xT81i4jGD5+jKZT1OHDFpON5mNn0KwO2QC9rA==
+  dependencies:
+    vue "^3.4.15"
+
 vue-template-compiler@^2.7.14:
   version "2.7.16"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"