Jenga
fun JengaCalendar(state: JengaCalendarState, modifier: Modifier = Modifier, monthHeader: @Composable (YearMonth) -> Unit = {}, weekHeader: @Composable (List<DayOfWeek>) -> Unit = {}, dayContent: @Composable BoxScope.(JengaCalendarDay) -> Unit)(source)
A month calendar that pages horizontally between the months of state. Every part is a slot: dayContent draws each cell of the six-week grid, including the days of the neighbouring months (check JengaCalendarDay.position), and monthHeader and weekHeader sit above each month's grid. Selection and styling are the caller's; JengaDatePicker is a ready-made single-date picker built on it, and JengaCalendarDefaults.Day is a cell you can reuse.
Parameters
state
the calendar state from rememberJengaCalendarState.
modifier
the Modifier for the calendar.
month
content above each month's grid.
week
content above each month's grid, under monthHeader, given the days of the week in display order.
day
the content of a single day cell; cells are square.
Samples
val month = YearMonth(
year = 2026,
month = Month.MARCH,
)
val state = rememberJengaCalendarState(
startMonth = month,
endMonth = month,
)
var start by remember {
mutableStateOf<LocalDate?>(
value = null,
)
}
var end by remember {
mutableStateOf<LocalDate?>(
value = null,
)
}
JengaCalendar(
state = state,
dayContent = { day ->
val from = start
val to = end
val inRange = from != null && to != null && day.date in from..to
JengaCalendarDefaults.Day(
day = day,
selected = inRange || day.date == from,
enabled = true,
isToday = false,
onClick = {
if (from == null || to != null || day.date < from) {
start = day.date
end = null
} else {
end = day.date
}
},
)
},
)Content copied to clipboard