initial commit
This commit is contained in:
Lu
commit
5956511e18
80
cal.css
Normal file
80
cal.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
73
cal.js
Normal file
73
cal.js
Normal file
@ -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();
|
||||||
|
});
|
||||||
15
index.html
Normal file
15
index.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang='en'>
|
||||||
|
<head>
|
||||||
|
<meta charset='utf-8' />
|
||||||
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>
|
||||||
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar/multimonth@6.1.9/index.global.min.js'></script>
|
||||||
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar/adaptive@6.1.9/index.global.min.js'></script>
|
||||||
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar/core/locales/de@6.1.9/index.global.min.js'></script>
|
||||||
|
<script src='cal.js'></script>
|
||||||
|
<link rel="stylesheet" href="cal.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='calendar'></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user