year & month calendars

package.json

@@ -6,6 +6,7 @@
     "@fullcalendar/core": "^6.1.5",
     "@fullcalendar/daygrid": "^6.1.5",
     "@fullcalendar/interaction": "^6.1.5",
+    "@fullcalendar/multimonth": "^6.1.6",
     "@fullcalendar/vue": "^6.1.5",
     "browser-sync": "^2.26.7",
     "gulp": "^4.0.2",

source/_data/data.json

@@ -101,7 +101,7 @@
     "label": "Název políčka",
     "placeholder": "Placeholder"
   },
-  "personCalendarData": "[{\"title\": \"event 1\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 3\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 4\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 5\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2023-04-10\", \"url\": \"https://example.com\"}]",
+  "calendarData": "[{\"title\": \"event 1\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 3\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 4\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 5\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2023-04-10\", \"url\": \"https://example.com\"}]",
   "greyColors": [
     {"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"},
     {"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"},

source/_patterns/00-atoms/18-calendars/month-calendar.mustache

+<div class="__js-root">
+  <ui-month-calendar events='{{ calendarData }}'></ui-month-calendar>
+</div>

source/_patterns/00-atoms/18-calendars/year-calendar.mustache

+<div class="__js-root">
+  <ui-year-calendar events='{{ calendarData }}'></ui-year-calendar>
+</div>

source/_patterns/00-atoms/18-person-calendars/person-calendar.mustache

-<div class="__js-root">
-  <ui-person-calendar events='{{ personCalendarData }}'></ui-person-calendar>
-</div>
-

source/_patterns/03-templates/candidate-detail.mustache

@@ -16,7 +16,7 @@
         </div>
         <div>
           <h2 class="head-alt-md mb-3"><i class="ico--calendar mr-4"></i>Kalendář</h2>
-          {{> atoms-person-calendar() }}
+          {{> atoms-month-calendar() }}
         </div>
       </section>
       <section class="lg:w-2/5 xl:w-1/3 pt-8 lg:pt-0 order-first lg:order-last candidate-detail__sidebar">

source/css/style.pcss

@@ -32,7 +32,7 @@
 @import "./atoms/icons.pcss";
 @import "./atoms/list.pcss";
 @import "./atoms/paragraph.pcss";
-@import "./atoms/person-calendar.pcss";
+@import "./atoms/full-calendar.pcss";
 @import "./atoms/quotation.pcss";
 @import "./atoms/social-icon.pcss";
 @import "./atoms/super-button.pcss";

source/js/components/full-calendar/YearCalendar.vue

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

source/js/main.js

@@ -5,7 +5,8 @@ import { forEachNode } from "./utils";
 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 MonthCalendar from "./components/full-calendar/MonthCalendar";
+import YearCalendar from "./components/full-calendar/YearCalendar";
 import RegionMap from "./components/RegionMap";
 import ViewProvider from "./components/ViewProvider";
 import Navbar from "./components/navbar/Navbar";
@@ -18,7 +19,8 @@ import Chart from 'chart.js/auto';
 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-month-calendar", MonthCalendar);
+Vue.component("ui-year-calendar", YearCalendar);
 Vue.component("ui-region-map", RegionMap);
 Vue.component("ui-view-provider", ViewProvider);
 Vue.component("ui-navbar", Navbar);