Entwicklerdokumentation

Alles, was Sie über die Implementierung, Anpassung und Fehlerbehebung des Kalenderwochen-Widgets in Ihren Anwendungen wissen müssen.

Extrem Leichtgewichtig

Weniger als 2KB (gzipped). Es lädt asynchron und blockiert weder Ihren Main Thread noch beeinträchtigt es Ihre Core Web Vitals.

Privatsphäre

Keine Cookies. Wir wollen Ihre Daten nicht, wir teilen nur das Datum.

Chamäleon-Engine

Übernimmt automatisch Schriftart und Transparenzeinstellungen Ihrer Website. Sieht aus, als hätten Sie es selbst gebaut.

Shadow DOM

Gekapselte Styles bedeuten, dass unser CSS Ihre Seite nicht durcheinander bringen, und sich Ihre globalen Styles nicht auf unser Widget auswirken.

Implementierungs-Guide

Das Widget benötigt zwei Elemente: einen Container, wo das Widget gerendert wird, und ein Skript, das es antreibt.

Grundlegende Verwendung

Platzieren Sie den Container dort, wo das Widget erscheinen soll. Fügen Sie das Skript hinzu, idealerweise vor dem schließenden </body> Tag.

<!-- Container: Place where you want the widget -->
<div class="tcw-embed" data-terms="accepted"></div>

<!-- Script: Add once before </body> -->
<script src="https://thecalendarweek.com/embed.js" async></script>

Header / Navigation

Ideal für das Minimal-Design. Platzieren Sie es inline mit Ihren Navigationselementen.

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <div class="tcw-embed"
       data-design="minimal"
       data-terms="accepted">
  </div>
</nav>

Sidebar-Widget

Dashboard- oder Analog-Designs eignen sich hervorragend für Sidebars.

<aside class="sidebar">
  <h3>Calendar</h3>
  <div class="tcw-embed"
       data-design="dashboard"
       data-variant="calendar"
       data-terms="accepted">
  </div>
</aside>

Wichtig:Das Attribut data-terms="accepted" ist erforderlich. Ohne dieses zeigt das Widget eine Fehlermeldung an.

Attribut-Referenz

Konfigurieren Sie das Widget, indem Sie data- Attribute direkt zum Container-Element hinzufügen.

Attribut	Werte	Beschreibung
data-terms	accepted	ERFORDERLICH. Bestätigt die Akzeptanz der Nutzungsbedingungen.
data-design	minimal \| dashboard \| classic \| analog	Setzt das visuelle Theme. Standard: `minimal`.
data-logic	iso \| us	iso: Die Woche beginnt Montag (EU). us: Die Woche beginnt Sonntag.
data-lang	en \| de	Lokalisiert Inhalte (z.B. "Week" vs "Woche").
data-variant	simple \| iso \| weekdays \| calendar \| range \| stats	Layout-Variante. simple/iso für Minimal, andere für Dashboard.
data-primary	hex code	Akzentfarbe für Minimal-Design. Beispiel: `#FF5500`.
data-size	small \| large	Größenvariante für Minimal-Design. large zeigt Kalender-Icon.
data-scheme	warm \| blue	Farbpalette für Analog-Design.
data-bg	CSS color	Hintergrundfarbe anpassen. Standard: `transparent`.
data-text	CSS color	Textfarbe überschreiben. Standard: `inherit`.
data-hover	CSS color	Hintergrundfarbe für Hover-Effekt.

iFrame Embed Guide

For SharePoint, Notion, and corporate intranets where external scripts are restricted.

Probleme?

Überprüfen Sie unseren Troubleshooting-Guide für häufige Probleme und Lösungen.

Wir verbessern unsere Widgets kontinuierlich mit Abwärtskompatibilität.

Changelog & API-Kompatibilitätsstrategie →