Swift (iOS) Guide

Embed the widget in your native iOS app using WKWebView wrapped in a standard SwiftUI view. This allows you to mix native UI with our always-up-to-date calendar logic.

✓

Native Feel

Transparent background blends with your App UI.

✓

SwiftUI Ready

Adopts the UIViewRepresentable protocol.

Swift Code

Back to Configurator

import SwiftUI
import WebKit

struct CalendarWeekWidget: UIViewRepresentable {
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.isOpaque = false
        webView.backgroundColor = .clear
        return webView
    }
    
    func updateUIView(_ webView: WKWebView, context: Context) {
        let html = """
        <!DOCTYPE html>
        <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                body { margin: 0; padding: 16px; }
            </style>
        </head>
        <body>
            <div class=\"tcw-embed\" data-design=\"dashboard\" data-variant=\"weekdays\"></div>
            <script src="https://thecalendarweek.com/embed.js" async></script>
        </body>
        </html>
        """
        
        webView.loadHTMLString(html, baseURL: nil)
    }
}