Kalender und Events

Die Plugins fullcalendar und events ermöglichen eine vollständige Kalender-Lösung.

FullCalendar Plugin

Das fullcalendar Plugin integriert die FullCalendar JavaScript-Bibliothek.

Einfacher Kalender

FullCalendar benötigt ein Containerelement und das JavaScript-Bundle. Das FullCalendar-6-Global-Bundle bringt seine Styles selbst mit. Beispiel-Syntax mit eckigen Klammern:

/* Markup: ein Containerelement mit id="splexus-calendar" */
[script src="https://cdn.jsdelivr.net/npm/fullcalendar@6/index.global.min.js"][/script]
[script]
document.addEventListener('DOMContentLoaded', function() {
  const cal = new FullCalendar.Calendar(document.getElementById('splexus-calendar'), {
    initialView: 'dayGridMonth',
    initialDate: '2026-07-01',
    locale: 'de',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    buttonText: { today: 'Heute', month: 'Monat', week: 'Woche', day: 'Tag', list: 'Liste' },
    height: 'auto',
    events: [
      { title: 'Team-Meeting', start: '2026-07-28T10:00:00', end: '2026-07-28T11:00:00', color: '#6c63ff' },
      { title: 'Release v1.0', start: '2026-07-30', color: '#00a6ca' },
      { title: 'Konferenz', start: '2026-08-05', end: '2026-08-07', color: '#db2777' },
      { title: 'Wartung', start: '2026-08-10T14:00:00', color: '#dc2626' }
    ]
  });
  cal.render();
});
[/script]

Events Plugin

Das events Plugin verwaltet Events als Grav-Pages mit Termin-Daten.

Event erstellen (Markdown + Frontmatter)

---
title: Splexus Launch-Event
date: '2026-08-15 18:00'
enddate: '2026-08-15 21:00'
location: 'Köln, Deutschland'
recurring:
  frequency: weekly
  until: '2026-12-31'
---

# Splexus Launch-Event

Wir feiern den Launch der neuen Plattform!

**Wann:** 15. August 2026, 18:00 Uhr
**Wo:** Köln, Deutschland
**Programm:**
- 18:00 Begrüßung
- 18:30 Produkt-Demo
- 19:30 Networking & Buffet

Events auflisten (im Twig-Template)

Im Theme-Template (nicht im Markdown-Content). Beispiel-Syntax mit eckigen Klammern:

[for event in page.collection({'items': {'@taxonomy.category': 'event'}}).dateRange()]

  [title][event.title][/title]
  [p class="event-date"][event.date|date('d.m.Y H:i')][/p]
  [p class="event-location"][event.header.location][/p]
  [p][event.summary(100)][/p]

[endfor]

Monatssicht (im Twig-Template)

[set events = page.collection({'items': {'@taxonomy.category': 'event'}})]
[set current_month = "now"|date('Y-m')]
[table class="calendar-month"]
  [thead]
    [tr]
      [for day in ['Mo','Di','Mi','Do','Fr','Sa','So']]
      [th][day][/th]
      [endfor]
    [/tr]
  [/thead]
  [tbody]
    [for week in events|group_by_date('week', current_month)]
    [tr]
      [for day in week]
      [td class="[day.events ? 'has-events' : '']"]
        [day.date|date('j')]
        [for event in day.events]
        [a href="[event.url]" class="event-link"][event.title][/a]
        [endfor]
      [/td]
      [endfor]
    [/tr]
    [endfor]
  [/tbody]
[/table]

iCal-Export

[a href="/de/kalender/splexus-events.ics" class="btn btn-primary" download]Als iCal exportieren[/a]

Diese Demo liefert einen echten lokalen .ics-Feed. Das events Plugin kann zusätzliche Kalender-Abos bereitstellen, wenn seine Feed-Ausgabe konfiguriert ist.