I’m trying to make a monthly calendar view. I’m ha...

# compose

[jordond]

I’m trying to make a monthly calendar view. I’m having trouble with getting all the equal sized squares to line up. Here is my composable:

LazyVerticalGrid(
    columns = GridCells.Fixed(7),
    state = lazyGridState,
    userScrollEnabled = false,
    modifier = modifier.fillMaxWidth(),
) {
    items(calendarDays) { calendarDay ->
        val date =
            if (calendarDay.isFake) null
            else LocalDate(year, calendarDay.month, calendarDay.day)

        val filledItem = filledItems[date]
        val backgroundColor = when {
            calendarDay.isFake -> colors.invalidDay
            filledItem != null -> filledItem
            else -> colors.emptyDay
        }

        Box(
            modifier = Modifier
                .aspectRatio(1f)
                .background(backgroundColor)
                
        ) {
            if (!calendarDay.isFake) {
                dayCellContent(calendarDay)
            }
        }
    }
}

BTW a “fake day” is just a blank square so the calendar gets padded.

You can see in the screenshot that the last three squares in each row is not quite the right size, and the background color shows through.

I have also tried using a FlowRow but the same thing happens, just the first three items in a row not the last.

It’s almost like there isn’t enough width to display them so it shrinks some of them. How would I make this LazyGrid scale to the width?

Any ideas?