Das weltweit fortschrittlichste
Kostenlose Kalender-Widget
Passt sich Ihrem Stil an
Passt automatisch zu Ihrer Marke. Übernimmt vorhandene Schriftarten und Transparenzen. Keine Konflikte, keine Überschreibungen.
Schützt Ihr Layout
Kein Style Leakage dank Web Components mit Shadow DOM Capsulation.
Schnell & Stabil
Schützt Core Web Vitals und SEO Ihrer Webseite. Verhindert Cumulative Layout Shift (CLS).
Widget Konfigurator
Passen Sie Design, Logik und Sprache in Echtzeit an.
Design Auswahl
Live Vorschau
Standard HTML + JavaScript
<!-- 1. Add the widget container --> <div class="tcw-embed" data-design="dashboard" data-variant="weekdays"></div> <!-- 2. Load the script (place before </body>) --> <script src="https://thecalendarweek.com/embed.js" async></script>
Code Snippets & Attribute Reference
Machine-readable reference for embedding customized calendar week widgets into client websites, web applications, and intranet portals.
Navbar & Header Badge (Minimal)
Recommended for HeadersUltra-compact capsule (<1KB). Inherits site font and transparent background automatically.
<!-- 1. Container: place inside header or navigation bar -->
<div class="tcw-embed"
data-design="minimal"
data-variant="simple"
data-logic="iso"
data-lang="en"
data-terms="accepted">
</div>
<!-- 2. Async loader: add once before </body> -->
<script src="https://thecalendarweek.com/embed.js" async></script>HTML `data-*` Configuration Attributes
| Attribute | Supported Values | Default | Purpose |
|---|---|---|---|
| class | "tcw-embed" | Required | Target container class selector used by the script engine. |
| data-design | minimal | dashboard | classic | analog | card | calendar | classic | Visual layout style. Use minimal for navbars, dashboard for sidebars. |
| data-variant | simple | weekdays | calendar | range | stats | iso | simple | Sub-variant. minimal supports simple/iso/weekdays; dashboard supports range/stats. |
| data-logic | iso | us | iso | iso: Monday start & 4-day rule (ISO 8601). us: Sunday start (North America). |
| data-lang | en | de | es | fr | it | pt | en | Display language for week labels, month names, and day names. |
| data-primary | Hex color (#155DFC) | #155DFC | Accent color for highlight badges, indicators, and focus states. |
| data-scheme | warm | blue | warm | Paper texture color palette (applicable to the analog design). |
| data-terms | accepted | none | Confirms acceptance of terms of use to suppress footer notice. |
Need advanced framework integration? See our guides for React, Vue, and iFrame. AI agents can fetch structured specifications from /llms.txt.
Supported Integrations
Our widget works everywhere you do. Check out our dedicated setup guides:
Integriert in 30 Sekunden
Ganz einfach.
1. Konfigurieren
Wählen Sie Ihr Design im Generator.
2. Kopieren
Kopieren Sie den Code.
3. Einfügen
Platzieren Sie ihn im Body-Tag Ihrer Seite.
Dashboard
Informationsdichte für Power-User. Die Dashboard-Variante bietet reichhaltigen Kontext inklusive Datum, Quartal und interaktivem Wochentag. Ideal für anspruchsvolle Anwendungsfelder wie Foren oder Admin-Panels.
- Inklusive Start- und Enddatum der Woche
- Hoher Kontrast für Lesbarkeit
- Integriertes Design im Card-Style
Minimalist
Entwickelt, um gelesen und nicht nur gesehen zu werden. Die Minimalist-Variante fokussiert auf das Wesentliche. Perfekt für Header, Footer oder dichte Dashboards.
- Übernimmt automatisch die Schriftart Ihrer Website
- Standardmäßig transparenter Hintergrund
- Unterstützung für eigene Akzentfarben
- Winzige Dateigrösse (<1KB gerendert)
Analog
Eine digitale Hommage an die physische Welt. Die Analog-Variante bringt die Wärme und Vertrautheit eines Papier-Tischkalenders auf Ihre Website.
- Subtile Papiertextur und Schatten
- Verfügbar in Warmgrau oder Corp Blue
- Perfekt für Lifestyle- und Blog-Seiten
- Nostalgisches und doch modernes Gefühl
Classic
Verwandeln Sie Datum in Design. Die Classic-Variante bringt es kreativ auf den Punkt. Sie macht die Wochennummer zum visuellen Anker Ihrer Webseite.
- Ästhetisches, schlankes Design
- Großartig für Hero-Bereiche oder Landing Pages
- Reaktive Textskalierung
- Moderne Sans-Serif Schriftart
Häufig gestellte Fragen
Wie füge ich die aktuelle Kalenderwoche auf meiner Website ein?
Wählen Sie einfach Ihr bevorzugtes Design im Widget-Konfigurator, kopieren Sie den generierten Code und fügen Sie ihn in den Quellcode Ihrer Website ein. Einfach anwendbar auch mit WordPress, Webflow, Wix oder selbst programmierten Webseiten.
Ist das Kalenderwochen-Widget wirklich kostenlos?
Ja, 100% kostenlos. Sie können es auf privaten Blogs, kommerziellen Websites, Dashboards oder Intranets ohne Kosten oder versteckte Gebühren verwenden.
Wird das Widget meine Website verlangsamen?
Definitiv nicht. Unser Kalenderwochen-Widget ist winzig und ist kleiner als 2KB. Zudem lädt es asynchron (im Hintergrund). Es ist so konzipiert, dass es keinerlei Latenz-Auswirkungen auf Ihre Core Web Vitals oder die Ladezeit der Seite hat.
Wie sicher ist das Kalender-Widget?
Sicherheit ist zentraler Bestandteil unserer Widget-Architektur. Unsere Widgets enthalten keinen ausführbaren Code. Zudem nutzen wir Shadow DOM, um Styles und Skripte zu kapseln. Dies sorgt für sichere Abgrenzung und reduziert das Risiko für unbeabsichtigte Style-Konflikte, unbefugten Skriptzugriff sowie Cross-Site-Scripting (XSS) auf Ihrer Website. Darüber hinaus erfolgen alle Anfragen an unsere API zwingend über HTTPS und unsere Inhalte werden über sichere CDN-Edge-Netzwerke bereitgestellt.
Verwendet das Widget Cookies?
Unser Kalenderwochen-Widget benötigt keine Cookies, um zu funktionieren. Weitere Details zu übertragenen Daten finden Sie in unserer Datenschutzerklärung und den Nutzungsbedingungen des Widgets.
Gibt es Bedingungen, die ich bei der Implementierung beachten sollte?
Wir stellen unsere Widgets kostenlos der Community bereit. Um eine einwandfreie und nachhaltige Funktionsweise zu gewährleisten, unterliegt die Nutzung unserer Widgets Nutzungsbedingungen. Wir untersagen insbesondere die Verwendung des Widgets auf Seiten mit illegalen oder sensiblen Inhalten. Durch das Einbetten des Codes stimmen Sie unseren Fair-Use-Richtlinien zu.
Kann ich das Widget in einem Forum oder auf SharePoint einbetten?
Auf jeden Fall! Wenn Ihre Umgebung externe Skripte einschränkt (häufig bei SharePoint, Notion oder Firmen-Intranets), können Sie stattdessen unsere iFrame-Option nutzen. Wählen Sie einfach "iFrame" im Konfigurator, kopieren Sie den generierten Code und fügen Sie ihn in Ihre Plattform ein. Eine detaillierte Anleitung finden Sie in unserem iFrame Embed Guide.
Technische Spezifikationen
Die Chamäleon-Engine
Passt sich Ihrer Marke automatisch an. Unser Widget übernimmt intelligent Ihre vorhandenen Schriftarten und Transparenz-Einstellungen. Keine Konflikte - sieht aus wie selbst gebaut.
Shadow-DOM-Isolierung
Schützt Ihr Layout. Kein Style Leakage dank Web Components mit Shadow DOM Capsulation.
Edge Performance & Ausfallsicherheit
Stabilität online. Betrieben mit redundantem Edge Netzwerk für schnelle Verfügbarkeit im Millisekunden-Bereich. Sehen Sie unsere transparente Uptime-Historie.
Schnell & Stabil
Schützt Core Web Vitals und SEO Ihrer Website. Verhindert Cumulative Layout Shift (CLS).