Month calendar

A month grid where the selected day fills with the accent color.

June

SMTWTFS123456789101112131415161718192021222324252627282930

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun MonthCalendar(selected: Int) {
    Column(Modifier.padding(12.dp)) {
        Row(
            Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text("June", style = MaterialTheme.typography.titleMedium)
            Row {
                Icon(Icons.Filled.ChevronLeft, "Previous month")
                Spacer(Modifier.width(12.dp))
                Icon(Icons.Filled.ChevronRight, "Next month")
            }
        }
        Spacer(Modifier.height(8.dp))
        FlowRow(maxItemsInEachRow = 7) {
            (1..30).forEach { day ->
                val isSel = day == selected
                Box(
                    Modifier
                        .size(36.dp)
                        .clip(CircleShape)
                        .background(
                            if (isSel) MaterialTheme.colorScheme.primary
                            else Color.Transparent,
                        )
                        .clickable { },
                    contentAlignment = Alignment.Center,
                ) {
                    Text(
                        "$day",
                        color = if (isSel) MaterialTheme.colorScheme.onPrimary
                            else MaterialTheme.colorScheme.onSurface,
                        style = MaterialTheme.typography.bodyMedium,
                    )
                }
            }
        }
    }
}