Kotlin (Android) Guide

Use Jetpack Compose to embed the widget in your Android application. We use the AndroidView composable to render a lightweight WebView.

✓

Jetpack Compose

Modern, declarative UI pattern.

✓

Responsive

Scales with density-independent pixels (dp).

Kotlin Code

Back to Configurator

import android.webkit.WebView
import androidx.compose.runtime.Composable
import androidx.compose.ui.viewinterop.AndroidView

@Composable
fun CalendarWeekWidget() {
    val 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>
    """.trimIndent()
    
    AndroidView(
        factory = { context ->
            WebView(context).apply {
                settings.javaScriptEnabled = true
                settings.domStorageEnabled = true
                loadDataWithBaseURL(
                    "https://thecalendarweek.com",
                    html,
                    "text/html",
                    "UTF-8",
                    null
                )
            }
        }
    )
}