Skip to content
Snippets Groups Projects
Commit 0e41b25e authored by Tomáš Valenta's avatar Tomáš Valenta
Browse files

finish month/year calendars with current calendar form

parent 373fdb12
No related branches found
No related tags found
1 merge request!3Add personal calendars
This commit is part of merge request !3. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
package-lock.json
+ 31
− 0
View file @ 0e41b25e
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"styleguidekit-assets-default": "^3.0.0", "styleguidekit-assets-default": "^3.0.0",
"styleguidekit-mustache-default": "^3.0.0", "styleguidekit-mustache-default": "^3.0.0",
"tailwindcss-elevation": "^0.3.4", "tailwindcss-elevation": "^0.3.4",
"tippy.js": "^6.3.7",
"vue": "^2.7.14", "vue": "^2.7.14",
"vue2-flip-countdown": "^0.10.0" "vue2-flip-countdown": "^0.10.0"
}, },
...@@ -284,6 +285,15 @@ ...@@ -284,6 +285,15 @@
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==", "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
"dev": true "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": { "node_modules/@rollup/plugin-buble": {
"version": "0.21.3", "version": "0.21.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-buble/-/plugin-buble-0.21.3.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-buble/-/plugin-buble-0.21.3.tgz",
...@@ -12725,6 +12735,14 @@ ...@@ -12725,6 +12735,14 @@
"node": ">=0.10.0" "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": { "node_modules/tlds": {
"version": "1.207.0", "version": "1.207.0",
"resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz", "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz",
...@@ -13883,6 +13901,11 @@ ...@@ -13883,6 +13901,11 @@
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==", "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
"dev": true "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": { "@rollup/plugin-buble": {
"version": "0.21.3", "version": "0.21.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-buble/-/plugin-buble-0.21.3.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-buble/-/plugin-buble-0.21.3.tgz",
...@@ -23896,6 +23919,14 @@ ...@@ -23896,6 +23919,14 @@
"resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz", "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
"integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=" "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": { "tlds": {
"version": "1.207.0", "version": "1.207.0",
"resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz", "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz",
......
source/css/style.pcss
+ 3
− 0
View file @ 0e41b25e
...@@ -15,6 +15,9 @@ ...@@ -15,6 +15,9 @@
*/ */
@import "tailwindcss/components"; @import "tailwindcss/components";
/* Tippy.js styles */
@import 'tippy.js/dist/tippy.css';
/** /**
* Custom components * Custom components
*/ */
......
source/js/components/full-calendar/MonthCalendar.vue
+ 29
− 20
View file @ 0e41b25e
<script> <script>
import FullCalendar from "@fullcalendar/vue" import FullCalendar from "@fullcalendar/vue"
import dayGridPlugin from "@fullcalendar/daygrid" import dayGridPlugin from "@fullcalendar/daygrid"
import interactionPlugin from "@fullcalendar/interaction"
import { showEventData } from './utils'
export default { export default {
components: { components: {
FullCalendar // make the <FullCalendar> tag available FullCalendar // make the <FullCalendar> tag available
}, },
props: ["events"], props: ["events"],
data() { data() {
return { return {
calendarOptions: { calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin ], plugins: [ dayGridPlugin ],
initialView: "dayGridMonth", initialView: "dayGridMonth",
contentHeight: "auto", contentHeight: "auto",
locale: "cs", locale: "cs",
buttonText: { buttonText: {
today: "dnes" today: "dnes"
}, },
moreLinkContent: (arg) => { return `+${arg.num} další` }, eventTimeFormat: {
events: JSON.parse(this.events) hour: 'numeric',
} minute: '2-digit',
meridiem: false
},
moreLinkContent: (arg) => { return `+${arg.num} další` },
eventClick (info) {
showEventData(info)
},
events: JSON.parse(this.events)
}
}
} }
}
} }
</script> </script>
<template> <template>
<FullCalendar :options="calendarOptions" /> <FullCalendar :options="calendarOptions" />
</template> </template>
source/js/components/full-calendar/YearCalendar.vue
+ 24
− 20
View file @ 0e41b25e
<script> <script>
import FullCalendar from "@fullcalendar/vue" import FullCalendar from "@fullcalendar/vue"
import dayGridPlugin from "@fullcalendar/daygrid" import dayGridPlugin from "@fullcalendar/daygrid"
import interactionPlugin from "@fullcalendar/interaction"
import multiMonthPlugin from "@fullcalendar/multimonth" import multiMonthPlugin from "@fullcalendar/multimonth"
import { showEventData } from './utils'
export default { export default {
components: { components: {
FullCalendar // make the <FullCalendar> tag available FullCalendar // make the <FullCalendar> tag available
}, },
props: ["events"], props: ["events"],
data() { data() {
return { return {
calendarOptions: { calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin, multiMonthPlugin ], plugins: [ dayGridPlugin, multiMonthPlugin ],
initialView: "multiMonthYear", initialView: "multiMonthYear",
contentHeight: "auto", contentHeight: "auto",
locale: "cs", locale: "cs",
buttonText: { buttonText: {
today: "dnes" today: "dnes"
}, },
moreLinkContent: (arg) => { return `+${arg.num} další` }, moreLinkContent: (arg) => { return `+${arg.num} další` },
events: JSON.parse(this.events) eventClick (info) {
} showEventData(info)
},
events: JSON.parse(this.events)
}
}
} }
}
} }
</script> </script>
<template> <template>
<FullCalendar :options="calendarOptions" /> <FullCalendar :options="calendarOptions" />
</template> </template>
source/js/components/full-calendar/utils.js 0 → 100644
+ 65
− 0
View file @ 0e41b25e
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 }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft