thecalendarweek.com
Back to Configurator

Fehlerbehebung

Häufige Probleme und Lösungen bei der Integration des Kalenderwochen-Widgets.

Fügen Sie data-terms="accepted" zu Ihrem Container-Element hinzu. Dieses Attribut ist erforderlich und bestätigt, dass Sie unsere Nutzungsbedingungen gelesen haben.
Verwenden Sie das data-logic Attribut, um die korrekte Wochennummerierung zu setzen:
  • data-logic="iso" - ISO 8601 (Montag Start, EU Standard)
  • data-logic="us" - US Standard (Sonntag Start)
Setzen Sie data-lang="de" für Deutsch oder data-lang="en" für Englisch. Dies beeinflusst Labels wie "Week" / "Woche" und Tagesnamen.
<p>Prüfen Sie Ihre Content Security Policy (CSP): Stellen Sie sicher, dass Ihre CSP Skripte von thecalendarweek.com erlaubt.</p><p>Skript-Platzierung prüfen: Das Skript sollte laden, nachdem der DOM-Container existiert, oder nutzen Sie das async Attribut.</p><p>Browser-Konsole prüfen: Suchen Sie nach Netzwerkfehlern oder blockierten Anfragen.</p>
Für Umgebungen, die externes JavaScript einschränken, verwenden Sie stattdessen unsere iFrame-Einbettung. Diese Methode läuft sicher in einer Sandbox-Umgebung ganz ohne erforderliche Skriptfreigaben.
<p>HTTPS erforderlich: Das Widget lädt Daten von unserer API, welche in Produktion HTTPS benötigt.</p><p>CORS: Unsere API erlaubt alle Origins, aber stellen Sie sicher, dass Ihr Hosting keine externen Skripte blockiert.</p><p>Cache-Probleme: Leeren Sie Ihren CDN/Browser-Cache nach dem Deployment.</p>
Unsere API cached Daten aus Performance-Gründen. In seltenen Fällen kann der Cache kurz nach Mitternacht noch die vorherige Woche zeigen. Dies löst sich innerhalb weniger Minuten automatisch. Wenn das Problem besteht, versuchen Sie einen Hard Refresh (Strg+Shift+R).
<p>Prüfen Sie API-Verbindung: Stellen Sie sicher, dass Ihr Netzwerk Anfragen an thecalendarweek.com/api/week.json erlaubt.</p><p>Firewall/Proxy: Firmennetzwerke blockieren oft unbekannte Domains. Kontaktieren Sie bei Bedarf Ihr IT-Team.</p>
Das Widget nutzt Shadow DOM zur Stilisolation und erbt font-family vom Elternelement. Stellen Sie sicher, dass Ihr Container-Element die gewünschte Schriftart hat, oder dass body/html eine Schriftart gesetzt haben. Hinweis: Einige Designs (Classic, Analog) nutzen spezifische Schriftarten aus ästhetischen Gründen.
<p>Für Minimal-Design: Nutzen Sie data-size="large" für eine größere Variante mit Icon.</p><p>Für alle Designs: Das Widget skaliert mit font-size. Setzen Sie eine Schriftgröße am Container, um die Gesamtgröße zu steuern.</p>
Nutzen Sie die Farb-Override-Attribute: data-bg für Hintergrund, data-text für Textfarbe, data-primary für Akzentfarbe und data-hover für Hover-Effekte.
Der Widget-Container (div.tcw-embed) hat kein internes Padding. Jeglicher Abstand kommt von Ihrem Eltern-Container. Sie können CSS direkt auf das Container-Element anwenden, um das Layout zu steuern.
<p>Key-Änderungen vermeiden: Stellen Sie sicher, dass Ihr Widget-Container keinen sich ändernden key Prop hat.</p><p>Skript laden: Nutzen Sie das useEffect Pattern aus unserem React Guide, um das Skript korrekt einmalig zu laden.</p>
Wickeln Sie das Widget in eine Client-Only Komponente mittels &lt;ClientOnly&gt; in Nuxt, oder nutzen Sie onMounted zum Skript-Laden in Vue 3. Siehe unseren Vue Guide.
<p>JavaScript aktivieren: Stellen Sie sicher, dass JavaScript in Ihrer WebView-Konfiguration aktiviert ist.</p><p>Mixed Content erlauben: Für Android müssen Sie eventuell den Mixed Content Modus aktivieren, wenn Sie auf HTTP testen.</p><p>Siehe unsere Swift oder Kotlin Guides für das komplette Setup.</p>
Dies ist ein informatives Log, kein Fehler. Es bestätigt, dass das Widget-Skript erfolgreich geladen wurde und zeigt den verwendeten API-Endpunkt. Sie können diese Nachricht in Produktion ignorieren.
<p>Diese Warnung erscheint, wenn das Widget keine Daten laden kann. Häufige Ursachen:</p>
  • Netzwerkprobleme: Prüfen Sie Internetverbindung oder Firewall.
  • CSP blockiert: Ihre Content-Security-Policy blockiert evtl. Anfragen an thecalendarweek.com.
  • CORS: Falls Sie einen eigenen Endpunkt nutzen, prüfen Sie CORS Header.
<p>Das Widget zeigt "N/A", wenn dies passiert.</p>
<p>Diese Sicherheitswarnung erscheint, wenn Sie einen potenziell gefährlichen Wert an ein Farb- oder Style-Attribut übergeben haben. Das Widget blockiert:</p>
  • javascript: Protokoll-Strings
  • url() CSS Funktionen
  • Zeichen wie ;, {}, &lt;&gt;
<p>Nutzen Sie einfache Farbwerte wie #FF5733 oder rgb(255, 87, 51) stattdessen.</p>
Sie haben ein data-design angegeben, das nicht existiert. Verfügbare Designs sind: minimal, classic, card, calendar, dashboard, analog. Prüfen Sie auf Tippfehler.
<p>Ihre Content Security Policy blockiert unser Embed-Skript. Fügen Sie folgendes zu Ihrem CSP-Header hinzu:</p><pre class="bg-gray-100 p-3 rounded text-xs font-mono overflow-x-auto mt-2">script-src 'self' https://thecalendarweek.com; connect-src 'self' https://thecalendarweek.com;</pre><p>Falls Sie einen Meta-Tag nutzen, aktualisieren Sie diesen, um unsere Domain in sowohl script-src als auch connect-src Direktiven aufzunehmen.</p>