add personal calendar to people

majak_uistyleguide/templates/patterns/templates/people/person.html

@@ -81,6 +81,16 @@
       </div>
     </div>
   </section>
+  <section class="grid-container no-max mr-0 mb-4 xl:mb-20">
+    <div class="grid-content-with-right-side">
+      <h2 class="head-4xl text-left">
+        {{ person_calendar_title }}
+      </h2>
+      <div class="__js-root xl:max-w-[1145px]">
+        <ui-person-calendar events='[{ "title": "event 1", "date": "2023-04-01" }, { "title": "event 2", "date": "2023-04-02" }]'></ui-person-calendar>
+      </div>
+    </div>
+  </section>
   <section class="mb-4 xl:mb-20">
     <div class="grid-container justify-start">
       <div class="grid-content">

majak_uistyleguide/templates/patterns/templates/people/person.yaml

@@ -31,7 +31,8 @@ context:
   person_twitter: 'Twitter'
   person_instagram_href: '#'
   person_instagram: 'Instagram'
-  person_twitter_box_title: 'Aktuálně na Twitteru'
+  person_instagram_box_title: 'Aktuálně na Instagramu'
+  person_calendar_title: 'Kalendář'
   person_article_title: 'Články'
   person_simple_block_title: 'Další lidé z poslanecké sněmovny'
 

package.json

@@ -5,6 +5,10 @@
     "prod": "vite build"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.5",
+    "@fullcalendar/daygrid": "^6.1.5",
+    "@fullcalendar/interaction": "^6.1.5",
+    "@fullcalendar/vue": "^6.1.5",
     "@vitejs/plugin-vue2": "^2.0.0",
     "tailwindcss-elevation": "^0.3.4",
     "vue": "^2.6.11",

src/js/components/person_calendar/Calendar.vue

+<script>
+import FullCalendar from "@fullcalendar/vue"
+import dayGridPlugin from "@fullcalendar/daygrid"
+import interactionPlugin from "@fullcalendar/interaction"
+
+export default {
+  components: {
+    FullCalendar // make the <FullCalendar> tag available
+  },
+  props: ["events"],
+  data() {
+    return {
+      calendarOptions: {
+        plugins: [ dayGridPlugin, interactionPlugin ],
+        initialView: "dayGridMonth",
+        locale: "cs",
+        buttonText: {
+          today: "dnes"
+        },
+        events: JSON.parse(this.events)
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <FullCalendar :options="calendarOptions" />
+</template>

src/js/main.js

@@ -8,6 +8,7 @@ import HeaderCarousel from "./components/header/HeaderCarousel";
 import Renderer from "./components/calendar/Renderer";
 import DummyProvider from "./components/calendar/DummyProvider";
 import GoogleProvider from "./components/calendar/GoogleProvider";
+import PersonCalendar from "./components/person_calendar/Calendar";
 import RegionMap from "./components/RegionMap";
 import InstagramCarousel from "./components/InstagramCarousel";
 import ViewProvider from "./components/ViewProvider";
@@ -27,6 +28,7 @@ Vue.component("ui-header-carousel", HeaderCarousel);
 Vue.component("ui-calendar-renderer", Renderer);
 Vue.component("ui-calendar-dummy-provider", DummyProvider);
 Vue.component("ui-calendar-google-provider", GoogleProvider);
+Vue.component("ui-person-calendar", PersonCalendar);
 Vue.component("ui-region-map", RegionMap);
 Vue.component("ui-instagram-carousel", InstagramCarousel);
 Vue.component("ui-view-provider", ViewProvider);