Termine & Downloads

Datengetriebene Widgets als native HTML-Alternative zu iframe-Einbettung (z.B. eines externen Kalender- oder Datei-Browser-Widgets) - durchsuchbar, per CSS themebar, kein Cross-Origin-/Höhenproblem. Optisch/token-kompatibel mit Web Awesome, aber kein <wa-*>-Custom-Element - reines Vanilla-JS + native ncss-Klassen, funktioniert auch ohne Web Awesome auf der Seite. Alle drei Dateien sind opt-in.

Einbindung

<script src="js/ics.js" defer></script>      <!-- nur nötig für data-ics -->
<script src="js/events.js" defer></script>
<script src="js/downloads.js" defer></script>

events.js - vier Ansichten, ein Motor

EIN Lade-/Render-Motor statt vier getrennter Komponenten - Kalender, Kalender-Liste, Termin-Liste und Einzeltermin sind derselbe normalisierte Termin-Datentyp, nur andere Darstellung.

<div class="ncss-events" data-view="month" data-src="events.json"></div>
<div class="ncss-events" data-view="agenda" data-ics="kalender.ics" data-limit="8"></div>
<div class="ncss-events" data-view="list" data-src="events.json" data-limit="6"></div>
<div class="ncss-events" data-view="single" data-src="events.json" data-event-id="evt-3"></div>

`data-view`	Darstellung
`month`	Monatsraster (`<table>`), Termine als Punkte im Tag, Klick öffnet den Tag als `.ncss-modal`
`agenda`	Anstehende Termine, nach Monat gruppiert - "Kalender-Liste"
`list`	Termine als Karten-Raster (`.ncss-card`)
`single`	Ein hervorgehobener Termin (`data-event-id` oder ohne Angabe der nächste anstehende)

Weitere Attribute: data-limit (max. Anzahl in agenda/list), data-month (Start-Monat der Monatsansicht, "YYYY-MM"), data-window-months (wie weit eine unbegrenzte ICS-RRULE ohne COUNT/UNTIL vorausberechnet wird, Default 18), data-week-start (Wochenstart-Tag im Monatsraster, 0=Sonntag..6=Samstag - Default richtet sich nach lang: Montag für de, Sonntag für en).

Datenquelle

Zwei Optionen, beide ergeben denselben internen Termin-Datentyp:

data-src: JSON-Array, jedes Element {id?, title, start, end?, allDay?, location?, description?, url?} - start/end als ISO-8601-String ("2026-09-01" ganztägig, "2026-09-01T09:00" mit Uhrzeit, ohne Zeitzonen-Suffix = lokale Wanduhrzeit).
data-ics: eine .ics-Datei (Google-/Outlook-/Apple-Kalender-Export), geparst von js/ics.js - einem eigenen, abhängigkeitsfreien RFC-5545-Parser statt eines npm-Pakets.

ICS-Umfang: VEVENT (UID/SUMMARY/DTSTART/DTEND/LOCATION/DESCRIPTION/URL), Zeilen-Unfolding, Wert-Escaping, ganztägige Termine, UTC-Zeiten. RRULE-Teilmenge: FREQ=DAILY/WEEKLY/MONTHLY/YEARLY, INTERVAL, COUNT, UNTIL, BYDAY (einfache Wochentags-Liste), EXDATE - deckt die weit überwiegende Mehrheit realer wiederkehrender Termine ab.

Nicht abgedeckt: TZID-Zeitzonenkonvertierung (Zeiten ohne Z-Suffix werden als lokale Wanduhrzeit übernommen), BYMONTHDAY/BYSETPOS/BYWEEKNO, RECURRENCE-ID-Ausnahmen jenseits von EXDATE - siehe Bekannte Grenzen.

downloads.js

Datei-Download-Liste aus JSON.

<div class="ncss-downloads" data-src="downloads.json"></div>

JSON-Array, jedes Element {title, url, size?, type?, description?} - type (Dateiendung ohne Punkt, z.B. "pdf") wird ohne Angabe aus der url-Endung abgeleitet, size (Bytes) wird ohne Angabe einfach nicht angezeigt.

Live-Demo mit allen vier Ansichten + Downloads + Beispieldaten (JSON und .ics): demo/widgets.html.