From 1f0ceb909a3bd396beb374a838343f4a6ea56921 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <tomas@imaniti.org> Date: Mon, 4 Mar 2024 18:34:35 +0100 Subject: [PATCH] add event name to calendar info popup --- source/_data/data.json | 2 +- source/css/atoms/full-calendar.pcss | 1 + source/js/components/full-calendar/utils.js | 10 +++++++++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/source/_data/data.json b/source/_data/data.json index 06a72fb..c00338c 100644 --- a/source/_data/data.json +++ b/source/_data/data.json @@ -101,7 +101,7 @@ "label": "Název polĂÄŤka", "placeholder": "Placeholder" }, - "calendarData": "[{\"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-10\", \"url\": \"https://example.com\"}]", + "calendarData": "[{\"title\": \"event 1\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2024-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 3\", \"date\": \"2024-03-02\", \"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-10\", \"url\": \"https://example.com\"}]", "greyColors": [ {"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"}, {"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"}, diff --git a/source/css/atoms/full-calendar.pcss b/source/css/atoms/full-calendar.pcss index 161296a..978ab2a 100644 --- a/source/css/atoms/full-calendar.pcss +++ b/source/css/atoms/full-calendar.pcss @@ -9,6 +9,7 @@ --fc-event-border-color: #fea86a; --fc-border-color: #ed9654; --fc-today-bg-color: #ed9654; + --fc-daygrid-event-dot-width: 4px; } .fc { diff --git a/source/js/components/full-calendar/utils.js b/source/js/components/full-calendar/utils.js index f211a9a..d92da5f 100644 --- a/source/js/components/full-calendar/utils.js +++ b/source/js/components/full-calendar/utils.js @@ -16,7 +16,15 @@ const showEventData = (info) => { info.el, { content: ` - <div class="p-2 flex flex-col gap-3 text-white"> + <div class="p-2 flex flex-col gap-3 text-white whitespace-nowrap"> + ${ + (info.event.title !== undefined) ? + ` + <div class="flex gap-2 items-baseline"> + <div>${info.event.title}</div> + </div> + ` : '' + } ${ (info.event.extendedProps.location !== undefined) ? ` -- GitLab