Add built-in calender by using fullcalendar.io

Every markdown file in _events is converted to a single JSON file available under /calendar-data, which is the source of fullcalender
This commit is contained in:
MG-5 2023-10-20 14:22:48 +02:00
parent 52c16ce647
commit db93df11da
8 changed files with 107 additions and 1 deletions

View file

@ -46,6 +46,10 @@ collections:
portfolio: portfolio:
output: true output: true
permalink: /:collection/:name permalink: /:collection/:name
events:
output: true
permalink: /events/:path
title: Events
# BUILD SETTINGS # BUILD SETTINGS
sass: sass:

View file

@ -0,0 +1,7 @@
---
layout: event
title: "Stammtisch KW42"
event_date: 2023-10-18
---
Heute ist Stammtisch!

18
_layouts/calendar.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
{% include default/head.liquid %}
<body>
{% include default/navbar.liquid %}
<div class="wrapper">
{{ content }}
</div>
{% include default/footer.liquid %}
</body>
</html>

33
_layouts/event.liquid Normal file
View file

@ -0,0 +1,33 @@
---
layout: default
---
<article {% if page.feature-img or page.color %}class="feature-image" {% endif %}>
<header id="main" style="">
<div class="title-padder">
{% if page.hide_title %}
<div class="feature-image-padding"></div>
{% else %}
<h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
{% include blog/post_info.liquid author=page.author date=page.date %}
{% endif %}
</div>
</header>
<section class="post-content">
{% if page.bootstrap %}
<div class="bootstrap-iso">
{% endif %}
{{ content }}
{% if page.bootstrap %}
</div>
{% endif %}
</section>
<!-- Social media shares -->
{% include social/share_buttons.liquid %}
<!-- Tag list -->
{% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %}
{% include default/tags_list.liquid tags=tag_list %}
</article>

View file

@ -157,7 +157,6 @@ table {
word-wrap: break-word; word-wrap: break-word;
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
display: inline-block;
} }
td, td,

17
calendar-data.html Normal file
View file

@ -0,0 +1,17 @@
---
layout:
title:
permalink: /calendar-data/
---
[
{% for event in site.events %}
{
"title":"{{event.title}}",
"start": "{{event.event_date}}",
"allDay":true,
"url":"{{event.url}}"
}
{%unless forloop.last %},{%endunless%}
{% endfor %}
]

28
pages/01_events.md Normal file
View file

@ -0,0 +1,28 @@
---
layout: calendar
title: Events
permalink: /events
icon: "far fa-calendar"
---
<html lang='de'>
<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/core@6.1.9/locales/de.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth', height: "auto", locale: 'de', events: '/calendar-data'
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar' style="width:80%; margin: auto;"></div>
</body>
</html>