Date range

A calendar row that tints the span between a chosen start and end day.

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

@Composable
fun DateRangeRow(start: Int, end: Int, days: List<Int>) {
    Row {
        days.forEach { d ->
            val inRange = d in start..end
            val isEnd = d == start || d == end
            Box(
                Modifier.weight(1f).height(40.dp)
                    .background(
                        if (inRange && !isEnd)
                            MaterialTheme.colorScheme.primary.copy(alpha = 0.15f)
                        else Color.Transparent,
                    ),
                contentAlignment = Alignment.Center,
            ) {
                Box(
                    Modifier.size(34.dp).clip(CircleShape)
                        .background(if (isEnd) MaterialTheme.colorScheme.primary
                            else Color.Transparent),
                    contentAlignment = Alignment.Center,
                ) {
                    Text("$d", color = if (isEnd)
                        MaterialTheme.colorScheme.onPrimary
                        else MaterialTheme.colorScheme.onSurface,
                        style = MaterialTheme.typography.bodyMedium)
                }
            }
        }
    }
}