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

add personal calendar to people

parent 94b6b90e
Branches
No related tags found
1 merge request!20Update personal calendar styling
...@@ -81,6 +81,16 @@ ...@@ -81,6 +81,16 @@
</div> </div>
</div> </div>
</section> </section>
<section class="grid-container no-max mr-0 mb-4 xl:mb-20">
<div class="grid-content-with-right-side">
<h2 class="head-4xl text-left">
{{ person_calendar_title }}
</h2>
<div class="__js-root xl:max-w-[1145px]">
<ui-person-calendar events='[{ "title": "event 1", "date": "2023-04-01" }, { "title": "event 2", "date": "2023-04-02" }]'></ui-person-calendar>
</div>
</div>
</section>
<section class="mb-4 xl:mb-20"> <section class="mb-4 xl:mb-20">
<div class="grid-container justify-start"> <div class="grid-container justify-start">
<div class="grid-content"> <div class="grid-content">
......
...@@ -31,7 +31,8 @@ context: ...@@ -31,7 +31,8 @@ context:
person_twitter: 'Twitter' person_twitter: 'Twitter'
person_instagram_href: '#' person_instagram_href: '#'
person_instagram: 'Instagram' person_instagram: 'Instagram'
person_twitter_box_title: 'Aktuálně na Twitteru' person_instagram_box_title: 'Aktuálně na Instagramu'
person_calendar_title: 'Kalendář'
person_article_title: 'Články' person_article_title: 'Články'
person_simple_block_title: 'Další lidé z poslanecké sněmovny' person_simple_block_title: 'Další lidé z poslanecké sněmovny'
......
...@@ -5,6 +5,10 @@ ...@@ -5,6 +5,10 @@
"prod": "vite build" "prod": "vite build"
}, },
"dependencies": { "dependencies": {
"@fullcalendar/core": "^6.1.5",
"@fullcalendar/daygrid": "^6.1.5",
"@fullcalendar/interaction": "^6.1.5",
"@fullcalendar/vue": "^6.1.5",
"@vitejs/plugin-vue2": "^2.0.0", "@vitejs/plugin-vue2": "^2.0.0",
"tailwindcss-elevation": "^0.3.4", "tailwindcss-elevation": "^0.3.4",
"vue": "^2.6.11", "vue": "^2.6.11",
......
<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",
locale: "cs",
buttonText: {
today: "dnes"
},
events: JSON.parse(this.events)
}
}
}
}
</script>
<template>
<FullCalendar :options="calendarOptions" />
</template>
...@@ -8,6 +8,7 @@ import HeaderCarousel from "./components/header/HeaderCarousel"; ...@@ -8,6 +8,7 @@ import HeaderCarousel from "./components/header/HeaderCarousel";
import Renderer from "./components/calendar/Renderer"; import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider"; import DummyProvider from "./components/calendar/DummyProvider";
import GoogleProvider from "./components/calendar/GoogleProvider"; import GoogleProvider from "./components/calendar/GoogleProvider";
import PersonCalendar from "./components/person_calendar/Calendar";
import RegionMap from "./components/RegionMap"; import RegionMap from "./components/RegionMap";
import InstagramCarousel from "./components/InstagramCarousel"; import InstagramCarousel from "./components/InstagramCarousel";
import ViewProvider from "./components/ViewProvider"; import ViewProvider from "./components/ViewProvider";
...@@ -27,6 +28,7 @@ Vue.component("ui-header-carousel", HeaderCarousel); ...@@ -27,6 +28,7 @@ Vue.component("ui-header-carousel", HeaderCarousel);
Vue.component("ui-calendar-renderer", Renderer); Vue.component("ui-calendar-renderer", Renderer);
Vue.component("ui-calendar-dummy-provider", DummyProvider); Vue.component("ui-calendar-dummy-provider", DummyProvider);
Vue.component("ui-calendar-google-provider", GoogleProvider); Vue.component("ui-calendar-google-provider", GoogleProvider);
Vue.component("ui-person-calendar", PersonCalendar);
Vue.component("ui-region-map", RegionMap); Vue.component("ui-region-map", RegionMap);
Vue.component("ui-instagram-carousel", InstagramCarousel); Vue.component("ui-instagram-carousel", InstagramCarousel);
Vue.component("ui-view-provider", ViewProvider); 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