diff --git a/package-lock.json b/package-lock.json
index a470377c4f8e6167f169a043a74e40cd85e14bae..a5c7f7470f6e02697ea8b8b0709cd96e75bba1c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
"styleguidekit-assets-default": "^3.0.0",
"styleguidekit-mustache-default": "^3.0.0",
"tailwindcss-elevation": "^0.3.4",
+ "tippy.js": "^6.3.7",
"vue": "^2.7.14",
"vue2-flip-countdown": "^0.10.0"
},
@@ -284,6 +285,15 @@
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
"dev": true
},
+ "node_modules/@popperjs/core": {
+ "version": "2.11.7",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+ "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
"node_modules/@rollup/plugin-buble": {
"version": "0.21.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-buble/-/plugin-buble-0.21.3.tgz",
@@ -12725,6 +12735,14 @@
"node": ">=0.10.0"
}
},
+ "node_modules/tippy.js": {
+ "version": "6.3.7",
+ "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+ "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+ "dependencies": {
+ "@popperjs/core": "^2.9.0"
+ }
+ },
"node_modules/tlds": {
"version": "1.207.0",
"resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz",
@@ -13883,6 +13901,11 @@
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
"dev": true
},
+ "@popperjs/core": {
+ "version": "2.11.7",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+ "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
+ },
"@rollup/plugin-buble": {
"version": "0.21.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-buble/-/plugin-buble-0.21.3.tgz",
@@ -23896,6 +23919,14 @@
"resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
"integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
},
+ "tippy.js": {
+ "version": "6.3.7",
+ "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+ "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+ "requires": {
+ "@popperjs/core": "^2.9.0"
+ }
+ },
"tlds": {
"version": "1.207.0",
"resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz",
diff --git a/package.json b/package.json
index 8201ccdc411547d7846b34a1fa83855076433a7a..4996791b4e3fb86c46bd548c71370c6391547b9c 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"styleguidekit-assets-default": "^3.0.0",
"styleguidekit-mustache-default": "^3.0.0",
"tailwindcss-elevation": "^0.3.4",
+ "tippy.js": "^6.3.7",
"vue": "^2.7.14",
"vue2-flip-countdown": "^0.10.0"
},
diff --git a/source/css/style.pcss b/source/css/style.pcss
index 82175008224c7fac0527ef32fbbe510f7df45542..07ea60182b39dc764f248c26725d76a4df6576c0 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -15,6 +15,9 @@
*/
@import "tailwindcss/components";
+/* Tippy.js styles */
+@import 'tippy.js/dist/tippy.css';
+
/**
* Custom components
*/
diff --git a/source/js/components/full-calendar/MonthCalendar.vue b/source/js/components/full-calendar/MonthCalendar.vue
index d317a13f7a5ae3ee7bf152d5166f8f8b0f4ba226..f027b1d28d55c92d7a27ae6ca35903f94a4d0a6e 100644
--- a/source/js/components/full-calendar/MonthCalendar.vue
+++ b/source/js/components/full-calendar/MonthCalendar.vue
@@ -1,31 +1,40 @@
<script>
import FullCalendar from "@fullcalendar/vue"
import dayGridPlugin from "@fullcalendar/daygrid"
-import interactionPlugin from "@fullcalendar/interaction"
+
+import { showEventData } from './utils'
export default {
- components: {
- FullCalendar // make the <FullCalendar> tag available
- },
- props: ["events"],
- data() {
- return {
- calendarOptions: {
- plugins: [ dayGridPlugin, interactionPlugin ],
- initialView: "dayGridMonth",
- contentHeight: "auto",
- locale: "cs",
- buttonText: {
- today: "dnes"
- },
- moreLinkContent: (arg) => { return `+${arg.num} dalšĂ` },
- events: JSON.parse(this.events)
- }
+ 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" />
+ <FullCalendar :options="calendarOptions" />
</template>
diff --git a/source/js/components/full-calendar/YearCalendar.vue b/source/js/components/full-calendar/YearCalendar.vue
index 11fcbb8dcbca6252aef9805b6c46487857cdc293..d8d5173398be70cbd2d0a7cf70384505884c03c0 100644
--- a/source/js/components/full-calendar/YearCalendar.vue
+++ b/source/js/components/full-calendar/YearCalendar.vue
@@ -1,32 +1,36 @@
<script>
import FullCalendar from "@fullcalendar/vue"
import dayGridPlugin from "@fullcalendar/daygrid"
-import interactionPlugin from "@fullcalendar/interaction"
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, interactionPlugin, multiMonthPlugin ],
- initialView: "multiMonthYear",
- contentHeight: "auto",
- locale: "cs",
- buttonText: {
- today: "dnes"
- },
- moreLinkContent: (arg) => { return `+${arg.num} dalšĂ` },
- events: JSON.parse(this.events)
- }
+ 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" />
+ <FullCalendar :options="calendarOptions" />
</template>
diff --git a/source/js/components/full-calendar/utils.js b/source/js/components/full-calendar/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..f211a9a421be91160c72b8934192708672eedc72
--- /dev/null
+++ b/source/js/components/full-calendar/utils.js
@@ -0,0 +1,65 @@
+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 }