Merge branch 'feat/personal-calendars' into 'master'

Add personal calendars

See merge request !3

package.json

 {
   "name": "edition-node-gulp",
   "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
-  "version": "2.11.0",
+  "version": "2.13.1",
   "dependencies": {
+    "@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",
     "kind-of": "^6.0.3",
@@ -12,7 +17,8 @@
     "styleguidekit-assets-default": "^3.0.0",
     "styleguidekit-mustache-default": "^3.0.0",
     "tailwindcss-elevation": "^0.3.4",
-    "vue": "^2.6.11",
+    "tippy.js": "^6.3.7",
+    "vue": "^2.7.14",
     "vue2-flip-countdown": "^0.10.0"
   },
   "resolutions": {
@@ -74,6 +80,6 @@
     "tailwindcss-typography": "^3.1.0",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.7.14"
   }
 }

source/_data/data.json

@@ -101,6 +101,7 @@
     "label": "Název políčka",
     "placeholder": "Placeholder"
   },
+  "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/03-templates/candidate-detail.mustache

@@ -11,7 +11,13 @@
   <main>
     <div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
       <section class="lg:w-3/5 xl:w-2/3">
+        <div class="mb-16">
           {{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
+        </div>
+        <div>
+          <h2 class="head-alt-md mb-3"><i class="ico--calendar mr-4"></i>Kalendář</h2>
+          {{> 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">
         <div class="container-padding--zero lg:card lg:elevation-10 lg:container-padding--auto">

source/css/atoms/full-calendar.pcss

+:root {
+  --fc-button-bg-color: #000;
+  --fc-button-border-color: #000;
+  --fc-button-hover-bg-color: #f9ce05;
+  --fc-button-hover-border-color: #f9ce05;
+  --fc-button-active-bg-color: #f9ce05;
+  --fc-button-active-border-color: #f9ce05;
+  --fc-event-bg-color: #fea86a;
+  --fc-event-border-color: #fea86a;
+  --fc-border-color: #ed9654;
+  --fc-today-bg-color: #ed9654;
+}
+
+.fc {
+  @apply font-condensed;
+}
+
+.fc-col-header {
+  width: 100%!important;
+}
+
+/* Don't underline only when there is no href attribute defined. */
+.fc .fc-col-header-cell-cushion:not([href]),
+.fc .fc-daygrid-day-number:not([href]) {
+  @apply no-underline;
+}
+
+.fc .fc-col-header-cell {
+  @apply bg-orange-300 p-3 font-alt text-white text-xl capitalize;
+}
+
+.fc .fc-button {
+  @apply font-alt rounded-none px-5 py-2 duration-150;
+}
+
+.fc .fc-button:hover:not(:disabled),
+.fc .fc-button:active:not(:disabled){
+  @apply text-black;
+}
+
+.fc .fc-event {
+  @apply p-1 rounded-none border-none text-sm;
+}
+
+.fc .fc-toolbar-title,
+.fc .fc-today-button {
+  @apply capitalize;
+}
+
+.fc .fc-daygrid-day-number {
+  @apply font-alt text-3xl text-orange-300;
+}
+
+.fc .fc-multimonth-daygrid .fc-daygrid-day-number {
+  @apply text-base;
+}
+
+.fc .fc-day-today .fc-daygrid-day-number {
+  @apply text-white;
+}

source/css/style.pcss

@@ -15,6 +15,9 @@
 */
 @import "tailwindcss/components";
 
+/* Tippy.js styles */
+@import 'tippy.js/dist/tippy.css';
+
 /**
  * Custom components
  */
@@ -32,6 +35,7 @@
 @import "./atoms/icons.pcss";
 @import "./atoms/list.pcss";
 @import "./atoms/paragraph.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/MonthCalendar.vue

+<script>
+import FullCalendar from "@fullcalendar/vue"
+import dayGridPlugin from "@fullcalendar/daygrid"
+
+import { showEventData } from './utils'
+
+export default {
+    components: {
+        FullCalendar // make the <FullCalendar> tag available
+    },
+    props: ["events"],
+    data() {
+        return {
+            calendarOptions: {
+                plugins: [ dayGridPlugin ],
+                initialView: "dayGridMonth",
+                contentHeight: "auto",
+                locale: "cs",
+                buttonText: {
+                    today: "dnes"
+                },
+                eventTimeFormat: {
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    meridiem: false
+                },
+                moreLinkContent: (arg) => { return `+${arg.num} další` },
+                eventClick (info) {
+                    showEventData(info)
+                },
+                events: JSON.parse(this.events)
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <FullCalendar :options="calendarOptions" />
+</template>

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

+<script>
+import FullCalendar from "@fullcalendar/vue"
+import dayGridPlugin from "@fullcalendar/daygrid"
+import multiMonthPlugin from "@fullcalendar/multimonth"
+
+import { showEventData } from './utils'
+
+export default {
+    components: {
+        FullCalendar // make the <FullCalendar> tag available
+    },
+    props: ["events"],
+    data() {
+        return {
+            calendarOptions: {
+                plugins: [ dayGridPlugin, multiMonthPlugin ],
+                initialView: "multiMonthYear",
+                contentHeight: "auto",
+                locale: "cs",
+                buttonText: {
+                    today: "dnes"
+                },
+                moreLinkContent: (arg) => { return `+${arg.num} další` },
+                eventClick (info) {
+                    showEventData(info)
+                },
+                events: JSON.parse(this.events)
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <FullCalendar :options="calendarOptions" />
+</template>

source/js/components/full-calendar/utils.js

+import tippy from 'tippy.js';
+
+
+const showEventData = (info) => {
+    if (
+        info.event.url === ''
+        && info.event.extendedProps.location === undefined
+        && info.event.extendedProps.url === undefined
+    ) {
+        return
+    }
+
+    info.jsEvent.preventDefault();
+
+    const popup = tippy(
+        info.el,
+        {
+            content: `
+                <div class="p-2 flex flex-col gap-3 text-white">
+                    ${
+                        (info.event.extendedProps.location !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--location" aria-label="Místo konání"></i>
+                                <div>${info.event.extendedProps.location}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.extendedProps.description !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--info" aria-label="Popis"></i>
+                                <div>${info.event.extendedProps.description}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.url !== '') ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--link" aria-label="Adresa"></i>
+                                <a class="underline cursor-pointer" href="${info.event.url}">${info.event.url}</a>
+                            </div>
+                        ` : ''
+                    }
+                </div>
+            `,
+            trigger: (
+                (
+                    info.event.url !== ''
+                    && info.event.extendedProps.location === undefined
+                    && info.event.extendedProps.url === undefined
+                ) ?
+                'hover' : 'click'
+            ),
+            allowHTML: true,
+            interactive: true
+        }
+    );
+
+    popup.show();
+} 
+
+export { showEventData }

source/js/main.js

@@ -4,7 +4,9 @@ import { forEachNode } from "./utils";
 
 import Renderer from "./components/calendar/Renderer";
 import DummyProvider from "./components/calendar/DummyProvider";
-import GoogleProvider from "./components/calendar/GoogleProvider";
+import GoogleProvider from "./components/calendar/GoogleProvider"
+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";
@@ -17,6 +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-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);