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

modal calendar info, improve styles

parent 8fde6a28
No related branches found
No related tags found
1 merge request!20Update personal calendar styling
context:
calendar_data: '[{"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-13", "url": "https://example.com"}]'
calendar_data: '[
{"title": "event 1", "start": "2023-05-21T09:30:00.000Z", "url": "https://example.com"},
{"title": "event 2", "start": "2023-05-21", "url": "https://example.com"},
{"title": "event 3", "start": "2023-05-22T09:00:00.000Z", "description": "Lorem ipsum...", "location": "https://jitsi.pirati.cz"}
]'
......@@ -9,6 +9,7 @@
--fc-event-border-color: #fea86a;
--fc-border-color: #ed9654;
--fc-today-bg-color: #ed9654;
--fc-event-dot-color: #fff;
}
.fc {
......@@ -39,7 +40,11 @@
}
.fc .fc-event {
@apply rounded-none p-1.5 border-none text-base;
@apply rounded-none p-1.5 border-none text-base cursor-pointer;
background-color: var(--fc-event-bg-color);
border: 1px solid var(--fc-event-border-color);
color: var(--fc-event-text-color);
}
.fc .fc-toolbar-title,
......@@ -54,3 +59,7 @@
.fc .fc-day-today .fc-daygrid-day-number {
@apply text-white;
}
.fc-daygrid-event-dot {
border: calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-dot-color);
}
......@@ -24,7 +24,7 @@
@import "atoms/form-field.pcss";
@import "atoms/heading.pcss";
@import "atoms/icons.pcss";
@import "atoms/person-calendar.pcss";
@import "atoms/full-calendar.pcss";
@import "molecules/articles.pcss";
@import "molecules/block-quote.pcss";
......
<script>
import FullCalendar from "@fullcalendar/vue"
import dayGridPlugin from "@fullcalendar/daygrid"
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
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
},
eventClick (info) {
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.location === undefined
&& info.event.url === undefined
) ?
'hover' : 'click'
),
allowHTML: true,
interactive: true
}
);
popup.show();
},
events: JSON.parse(this.events)
}
}
}
}
</script>
<template>
<FullCalendar :options="calendarOptions" />
</template>
<script>
import FullCalendar from "@fullcalendar/vue"
import dayGridPlugin from "@fullcalendar/daygrid"
import interactionPlugin from "@fullcalendar/interaction"
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"
},
events: JSON.parse(this.events)
}
}
}
}
</script>
<template>
<FullCalendar :options="calendarOptions" />
</template>
......@@ -8,7 +8,7 @@ import HeaderCarousel from "./components/header/HeaderCarousel";
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 FullCalendar from "./components/full_calendar/Calendar";
import RegionMap from "./components/RegionMap";
import InstagramCarousel from "./components/InstagramCarousel";
import ViewProvider from "./components/ViewProvider";
......@@ -28,7 +28,7 @@ Vue.component("ui-header-carousel", HeaderCarousel);
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-person-calendar", FullCalendar);
Vue.component("ui-region-map", RegionMap);
Vue.component("ui-instagram-carousel", InstagramCarousel);
Vue.component("ui-view-provider", ViewProvider);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment