Overview
Integration Guides
Mobile & Native
Leitfaden zur iFrame-Einbettung
Für Umgebungen, in denen externes JavaScript eingeschränkt ist — wie Microsoft SharePoint, Notion oder Firmen-Intranets — können Sie das Kalenderwochen-Widget über ein Standard-HTML-iFrame einbinden. Keine Skriptfreigaben oder CSP-Anpassungen erforderlich.
Keine Skriptberechtigungen
Funktioniert in strikten CSP-Umgebungen ohne Whitelisting externer Skripte.
Vollständige Isolation
Das Widget läuft in einer Sandbox-Umgebung — null Risiko für CSS- oder JS-Konflikte.
Universelle Kompatibilität
SharePoint, Notion, Confluence, Foren, Wikis — überall dort, wo iFrames unterstützt werden.
Einbettungscode
<!-- Calendar Week Widget (iFrame) --> <iframe src="https://thecalendarweek.com/widget/iframe?design=dashboard&variant=weekdays" width="100%" height="260" style="border:none; color-scheme:normal" loading="lazy" sandbox="allow-scripts allow-same-origin" title="Calendar Week Widget" ></iframe>
URL-Parameter
Alle Widget-Konfigurationen werden über URL-Abfrageparameter übergeben. Es müssen nur vom Standard abweichende Werte angegeben werden.
| Parameter | Werte | Standard | Beschreibung |
|---|---|---|---|
| design | minimal, dashboard, classic, analog | minimal | Optische Design-Variante |
| variant | weekdays, calendar, range, stats, simple, iso | simple | Unterlayout für das gewählte Design |
| logic | iso, us | iso | Standard für die Wochenberechnung |
| lang | en, de | en | Widget-Sprache |
| scheme | warm, blue | blue | Farbschema (nur Analog) |
| size | small, large | small | Größenvariante (nur Minimal) |
| primary | hex/rgb/hsl color | #155DFC | Akzentfarbe |
Mindestabmessungen
Jedes Widget-Design erfordert eine Mindestgröße für das iFrame, um korrekt gerendert zu werden. Diese werden vom Konfigurator erzwungen.
| Design | Min. Breite | Min. Höhe | Standardhöhe (Dynamisch) |
|---|---|---|---|
| minimal | 120px | 50px | 60px |
| classic | 120px | 50px | 60px |
| dashboard | 250px | 180px | 260px |
| analog | 180px | 180px | 260px |