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 @@
"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",
......
package.json
+ 1
− 0
View file @ 0e41b25e
......@@ -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"
},
......
source/css/style.pcss
+ 3
− 0
View file @ 0e41b25e
......@@ -15,6 +15,9 @@
*/
@import "tailwindcss/components";
/* Tippy.js styles */
@import 'tippy.js/dist/tippy.css';
/**
* Custom components
*/
......
source/js/components/full-calendar/MonthCalendar.vue
+ 29
− 20
View file @ 0e41b25e
<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>
source/js/components/full-calendar/YearCalendar.vue
+ 24
− 20
View file @ 0e41b25e
<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>
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