\n \n \n\t\n\n\n\n

\ncalendar\n<\/h1>
\nStay updated with our upcoming events, key milestones, and important dates!\n<\/div><\/div>\n<\/section>
\n \n \n\t\n\n\n\n
\n\n \n \n \n \n Kalend\u00e1\u0159<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms\"><\/script>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\" rel=\"stylesheet\">\n \n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/v-calendar@2.4.2\/src\/styles\/base.min.css\" rel=\"stylesheet\">\n \n <style>\n body {\n font-family: \"Inter\", sans-serif;\n }\n\n .calendar-item:last-of-type > div {\n border-bottom: none !important;\n }\n <\/style>\n <\/head>\n <body>\n <div id=\"app\" class=\"p-4\">\n <div class=\"flex flex-col md:flex-row gap-8\">\n \n <div class=\"md:w-1\/3 w-full rounded-lg min-w-[285px]\">\n \n <v-calendar locale=\"en\" @dayclick=\"onDayClick\" :attributes='attributes' is-expanded class=\"border-none bg-transparent\"><\/v-calendar>\n \n <div class=\"relative mt-2 rounded-md shadow-sm w-full\">\n <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6 text-gray-400\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" \/>\n <\/svg> \n <\/div>\n <input v-model=\"query\" type=\"search\" name=\"search\" id=\"search\" class=\"block w-full rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#2463EB] sm:text-sm sm:leading-6\" placeholder=\"Hledat...\">\n <\/div>\n \n <div class=\"pt-4\">\n <p class=\"mb-4\">What types of events do you want to display?<\/p>\n \n <div v-for=\"category in categories\" class=\"flex gap-2 items-center py-1\">\n <input v-model=\"category.selected\" type=\"checkbox\" class=\"h-5 w-5 rounded border-gray-300\" :class=\"`text-[${category.color}] focus:ring-[${category.color}]`\">\n <span>{{ category.name }}<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"md:w-2\/3 w-full min-w-[570px]\">\n \n <div class=\"w-full mb-4 flex flex-col md:flex-row justify-between items-center\">\n <div class=\"text-gray-500 text-center md:text-left\">Today is <span class=\"font-semibold\">{{ today.format('dddd') }}, {{ today.format('D. M. YYYY') }}<\/span><\/div>\n <\/div>\n \n <div v-for='day in filterDays()' class=\"gap-4 bg-white px-4 py-2 rounded-md calendar-item\">\n <div class=\"flex flex-col md:flex-row justify-between border-b border-[#F3F4F6] py-2\">\n \n <div class=\"flex gap-4 md:w-1\/2 w-full\">\n <div class=\"min-w-12\">\n <span class=\"font-semibold uppercase\">{{ day.date.format('MMM') }}<\/span>\n <\/div>\n <div>\n <h3>{{ day.date.format('D. M. YYYY') }}<\/h3>\n <div class=\"mt-1 flex flex-wrap items-center gap-x-2 text-xs leading-5 text-gray-500\">\n <p class=\"whitespace-nowrap capitalize\">{{ day.date.format('dddd') }}<\/p>\n <svg viewBox=\"0 0 2 2\" class=\"h-0.5 w-0.5 fill-current\">\n <circle cx=\"1\" cy=\"1\" r=\"1\"><\/circle>\n <\/svg>\n <p class=\"truncate\">A total of {{ day.events.length }} events are taking place today.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"md:w-1\/2 w-full mt-2 md:mt-0\">\n <div v-for=\"event in filterEvents(day.events)\" class=\"flex items-center gap-4\">\n <div v-if=\"event.category\" class=\"w-4 h-4 rounded-full\" :style=\"`background-color: ${event.category.color}`\"><\/div>\n <div class=\"font-mono text-gray-500\">{{ event.time.format('HH:mm') }}<\/div>\n <div class=\"hover:text-[#2463EB] hover:cursor-pointer\" @click=\"modal = event\" v-html=\"highlightText(event.name, query)\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div v-if=\"filterDays().length == 0\" class=\"w-full min-w-full text-center italic bg-gray-50 p-4 rounded-lg\">No scheduled events.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2\/dist\/vue.js\"><\/script>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.30.1\/moment-with-locales.min.js\"><\/script>\n \n <script src='https:\/\/unpkg.com\/v-calendar'><\/script>\n \n <script>\n moment.locale('en');\n\n var app = new Vue({\n el: '#app',\n mounted() {\n fetch('\/wp-json\/myplugin\/v1\/events')\n .then(response => response.json())\n .then(data => {\n const processedData = data.days.map(day => ({\n date: moment(day.date),\n events: day.events.map(event => ({\n ...event,\n time: moment(event.time, 'hh:mm')\n }))\n }));\n \n this.days = processedData;\n this.categories = this.getCategories();\n this.attributes = this.calculateDots();\n });\n\n },\n data: {\n today: moment(),\n selectedDate: new Date(),\n query: '',\n modal: null,\n attributes: [],\n days: [\n \/\n {\n date: moment('2024-10-09'),\n events: [\n { time: moment('11:10', 'HH:mm'), name: '\u0160kolen\u00ed na t\u00e9ma GDPR', category: { color: '#C03A80', name: 'Kategorie 1' }, desc: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Etiam dictum tincidunt diam. Aenean fermentum risus id tortor. Integer pellentesque quam vel velit. Aliquam ornare wisi eu metus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Etiam neque. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Pellentesque arcu. Mauris tincidunt sem sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mattis lacinia justo. Fusce nibh. Maecenas libero. Integer in sapien. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aliquam id dolor.', link: 'https:\/\/www.msmt.cz', length: 60 },\n { time: moment('14:00', 'HH:mm'), name: 'P\u0159edn\u00e1\u0161ka na t\u00e9ma...', category: { color: '#5D9D44', name: 'Kategorie 2' }, desc: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Etiam dictum tincidunt diam. Aenean fermentum risus id tortor. Integer pellentesque quam vel velit. Aliquam ornare wisi eu metus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Etiam neque. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Pellentesque arcu. Mauris tincidunt sem sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mattis lacinia justo. Fusce nibh. Maecenas libero. Integer in sapien. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aliquam id dolor.', link: 'https:\/\/www.msmt.cz', length: 120 }\n ]\n },\n {\n date: moment('2024-10-10'),\n events: [\n { time: moment('8:00', 'HH:mm'), name: 'P\u0159edn\u00e1\u0161ka o bezpe\u010dnosti na M\u0160MT', category: null, desc: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Etiam dictum tincidunt diam. Aenean fermentum risus id tortor. Integer pellentesque quam vel velit. Aliquam ornare wisi eu metus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Etiam neque. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Pellentesque arcu. Mauris tincidunt sem sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mattis lacinia justo. Fusce nibh. Maecenas libero. Integer in sapien. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aliquam id dolor.', link: 'https:\/\/www.msmt.cz', length: 30 },\n { time: moment('9:00', 'HH:mm'), name: 'P\u0159edn\u00e1\u0161ka na t\u00e9ma...', category: { color: '#14798B', name: 'Kategorie 3'}, desc: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Etiam dictum tincidunt diam. Aenean fermentum risus id tortor. Integer pellentesque quam vel velit. Aliquam ornare wisi eu metus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Etiam neque. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Pellentesque arcu. Mauris tincidunt sem sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mattis lacinia justo. Fusce nibh. Maecenas libero. Integer in sapien. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aliquam id dolor.', link: 'https:\/\/www.msmt.cz', length: 15 }\n ]\n },\n {\n date: moment('2024-12-04'),\n events: [\n { time: moment('9:00', 'HH:mm'), name: 'P\u0159edn\u00e1\u0161ka na t\u00e9ma...', category: { color: '#14798B', name: 'Kategorie 3' }, desc: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Etiam dictum tincidunt diam. Aenean fermentum risus id tortor. Integer pellentesque quam vel velit. Aliquam ornare wisi eu metus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Etiam neque. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Pellentesque arcu. Mauris tincidunt sem sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mattis lacinia justo. Fusce nibh. Maecenas libero. Integer in sapien. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aliquam id dolor.', link: 'https:\/\/www.msmt.cz', length: 24 60 * 2 }\n ]\n }\n *\/\n ],\n categories: []\n },\n methods: {\n getCategories() {\n \/\/ Vytvo\u0159 pr\u00e1zdn\u00e9 pole pro uchov\u00e1n\u00ed unik\u00e1tn\u00edch kategori\u00ed\n const uniqueCategories = [];\n\n \/\/ Projdi v\u0161echny dny\n this.days.forEach(day => {\n \/\/ Projdi v\u0161echny ud\u00e1losti v dni\n day.events.forEach(event => {\n if (event.category && !uniqueCategories.some(category => category.name == event.category.name))\n uniqueCategories.push({ ...event.category, selected: true });\n });\n });\n\n \/\/ P\u0159evod Setu na pole\n return uniqueCategories;\n },\n filterDays() {\n let result = this.days;\n\n \/\/ Filtrace podle velk\u00e9ho kalend\u00e1\u0159e\n if (this.selectedDate) {\n result = result.filter(day => {\n return moment(day.date).isSameOrAfter(this.selectedDate, 'day');\n });\n }\n\n \/\/ Filtrace, kdy\u017e polo\u017eka nem\u00e1 v\u016fbec \u017e\u00e1dn\u00fd event\n result = result.filter(day => {\n return this.filterEvents(day.events).length != 0;\n });\n\n return result;\n },\n filterEvents(events) {\n let result = events;\n\n \/\/ Filtrace na z\u00e1klad\u011b kategori\u00ed\n if (this.categories.length > 0)\n result = result.filter(event => {\n let eventCategory = event.category?.name;\n let selectedCategories = this.categories.filter(category => category.selected).map(category => category.name);\n \n return selectedCategories.includes(eventCategory);\n });\n\n \/\/ Filtrace fulltext\n result = result.filter(event => {\n const query = this.query.toLowerCase();\n \n \/\/ Ov\u011b\u0159\u00edme, zda dotaz (query) odpov\u00edd\u00e1 n\u00e1zvu ud\u00e1losti, popisu nebo n\u00e1zvu kategorie\n return event.name.toLowerCase().includes(query);\n });\n\n return result;\n },\n onDayClick(e) {\n this.selectedDate = moment(e.id);\n },\n calculateDots() {\n let dots = [];\n\n \/\/ Iterate over day\n this.days.forEach(day => {\n \/\/ Iterate over events\n day.events.forEach(event => {\n \/\/ Add dot object\n if (event.category)\n dots.push({\n dot: {\n style: {\n 'background-color': event.category.color\n }\n },\n dates: day.date.startOf('day').toDate()\n });\n });\n });\n\n return [\n \/\/ Dne\u0161ek\n {\n key: 'today',\n highlight: 'red',\n dates: new Date()\n },\n ...dots\n ];\n },\n calculateLength(minutes) {\n const duration = moment.duration(minutes, 'minutes');\n \n const days = duration.days();\n const hours = duration.hours();\n const mins = duration.minutes();\n\n let result = '';\n\n if (days > 0) {\n result += days === 1 ? '1 den' : `${days} dny`;\n }\n if (hours > 0) {\n if (result) result += ', ';\n result += hours === 1 ? '1 h' : `${hours} h`;\n }\n if (mins > 0) {\n if (result) result += result.includes('den') || result.includes('h') ? ' a ' : '';\n result += `${mins} min`;\n }\n\n return result || '0 min';\n },\n highlightText(text, needle) {\n const highlightStyle = \"color: #2463EB; font-weight: bold;\"; \/\/ Barva pro zv\u00fdrazn\u011bn\u00ed\n\n \/\/ O\u0161et\u0159en\u00ed velk\u00fdch\/mal\u00fdch p\u00edsmen a nahrazen\u00ed v\u0161ech v\u00fdskyt\u016f\n const regex = new RegExp(`(${needle})`, 'gi'); \n \n \/\/ N\u00e1hrada hledan\u00e9ho \u0159et\u011bzce `needle` ve `text` zv\u00fdrazn\u011bn\u00fdm HTML\n const highlightedText = text.replace(regex, `<span style='${highlightStyle}'>$1<\/span>`);\n\n return highlightedText;\n }\n }\n });\n <\/script>\n <\/body>\n<\/html>\n\n\n<\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>calendar Stay updated with our upcoming events, key milestones, and important dates! Kalend\u00e1\u0159 What types of events do you want to display? {{ category.name }} Today is {{ today.format(‘dddd’) }}, {{ today.format(‘D. M. YYYY’) }} {{ day.date.format(‘MMM’) }} {{ day.date.format(‘D. M. YYYY’) }} {{ day.date.format(‘dddd’) }} A total of {{ day.events.length }} events are taking […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-27","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/vardd.200.solutions\/index.php?rest_route=\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vardd.200.solutions\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vardd.200.solutions\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vardd.200.solutions\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vardd.200.solutions\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=27"}],"version-history":[{"count":27,"href":"https:\/\/vardd.200.solutions\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":1746,"href":"https:\/\/vardd.200.solutions\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions\/1746"}],"wp:attachment":[{"href":"https:\/\/vardd.200.solutions\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}