commit 5956511e18a4566b5884141b65c2c7e758950fb0 Author: Lu Date: Sun Oct 15 17:22:00 2023 +0200 initial commit diff --git a/cal.css b/cal.css new file mode 100644 index 0000000..907db8a --- /dev/null +++ b/cal.css @@ -0,0 +1,80 @@ +html, body { + margin: 0; + padding: 0; + font-family: Arial, Helvetica Neue, Helvetica, sans-serif; + font-size: 14px; + background-color: var(--main-page-bg-color); + color: #fff0ff; +} + +#calendar { + margin: 40px auto; + margin-left: 40px; + margin-right: 40px; +} + +a.fc-event.fc-daygrid-event[href] { + color: #c90064; +} + +a.fc-event.fc-daygrid-event[href]:visited { + color: #9c3dd3; +} + +.fc .fc-daygrid-day.fc-day-other { + background: var(--fc-neutral-bg-color); +} + +.fc .fc-scrollgrid-section-sticky > * { + background: unset; + position: sticky; + z-index: 3; +} + +:not(td[aria-labelledby]) > .fc-daygrid-day-frame { + background: var(--fc-neutral-bg-color); +} + +.fc .fc-scrollgrid-section-body { + background: var(--fc-page-bg-color); +} + +.fc .fc-timegrid-slot-label, .fc .fc-timegrid-axis-frame { + background-color: var(--main-page-bg-color); +} + +:root { + --main-page-bg-color: #211e21; + --fc-small-font-size: .85em; + --fc-page-bg-color: #3e2f3f; + --fc-neutral-bg-color: #2c000631; + --fc-neutral-text-color: #808080; + --fc-border-color: #464646; + + --fc-button-text-color: #fff; + --fc-button-bg-color: #2e807d; + --fc-button-border-color: #2e807d; + --fc-button-hover-bg-color: #256b69; + --fc-button-hover-border-color: #184746; + --fc-button-active-bg-color: #184746; + --fc-button-active-border-color: #142b2a; + + --fc-event-bg-color: #007e79; + --fc-event-border-color: #007e79; + --fc-event-text-color: #fff; + --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25); + + --fc-more-link-bg-color: #d0d0d0; + --fc-more-link-text-color: inherit; + + --fc-event-resizer-thickness: 8px; + --fc-event-resizer-dot-total-width: 8px; + --fc-event-resizer-dot-border-width: 1px; + + --fc-non-business-color: rgba(215, 215, 215, 0.3); + --fc-bg-event-color: rgb(143, 223, 130); + --fc-bg-event-opacity: 0.3; + --fc-highlight-color: rgba(188, 232, 241, 0.3); + --fc-today-bg-color: #c9006425; + --fc-now-indicator-color: red; +} \ No newline at end of file diff --git a/cal.js b/cal.js new file mode 100644 index 0000000..dad4125 --- /dev/null +++ b/cal.js @@ -0,0 +1,73 @@ +var events = [ + { + title: "All Day Event", + start: "2023-09-01", + }, + { + title: "Long Event", + start: "2023-09-07", + end: "2023-09-10", + }, + { + groupId: "999", + title: "Repeating Event", + start: "2023-09-09T16:00:00", + }, + { + groupId: "999", + title: "Repeating Event", + start: "2023-09-16T16:00:00", + }, + { + title: "Conference", + start: "2023-09-11", + end: "2023-09-13", + }, + { + title: "Meeting", + start: "2023-09-12T10:30:00", + end: "2023-09-12T12:30:00", + }, + { + title: "Lunch", + start: "2023-09-12T12:00:00", + }, + { + title: "Meeting", + start: "2023-09-12T14:30:00", + url: "https://lu-dev.de", + }, + { + title: "Birthday Party", + start: "2023-09-13T07:00:00", + }, + { + title: "Click for Google", + url: "https://google.com/", + start: "2023-09-28", + }, +]; + +document.addEventListener("DOMContentLoaded", function () { + var calendarEl = document.getElementById("calendar"); + + var calendar = new FullCalendar.Calendar(calendarEl, { + initialView: "timeGridWeek", + weekNumbers: true, + navLinks: true, + selectable: true, + locale: 'de', + firstDay: 1, + height: 'auto', + multiMonthMinWidth: '500', + + headerToolbar: { + left: "prev,next today", + center: "title", + right: "multiMonthYear,dayGridMonth,timeGridWeek,timeGridDay", + }, + events: events, + }); + + calendar.render(); +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..27565b2 --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + +

+ +