Month is Incorrect Height when using OutDateStyle.EndOfRow and non-Sunday firstDayOfWeek

Library information:

• Version: 2.0.1
• Compose

Describe the bug**

If we set the the firstDayOfWeek in the CalendarState to Monday (e.g. daysOfWeek(firstDayOfWeek = DayOfWeek.MONDAY)) and then use OutDateStyle.EndOfRow. December 2022 is the wrong height. If we change the firstDayOfWeek to Sunday, the height is correct.

Expected behavior (if applicable)

When using EndOfRow month height should always wrap.

[kizitonwose]

Hi, this is not a bug but because the off-screen month which has 6 rows is being measured by LazyRow, see the screenshot below.

Since you have square days, this should be easy to fix, you need to use a fixed height => (calendarWidth / 7) * weeksInVisibleMonth, where 7 is the days in a week.

With that, we have the result below:

I have added the code with this fix here so you can take a look.

There is an upcoming feature in LazyList which should hopefully allow customizing the off-screen items. I say hopefully because I am not sure if the API is purely for prefetching data without actually using those indices for measurement.

[kizitonwose]

So I decided to write some code for this, here’s my approach to finding the most visible month by 50%:

private fun CalendarLayoutInfo.firstMostVisibleMonth(viewportPercent: Float = 50f): CalendarMonth? {
    return if (visibleMonthsInfo.isEmpty()) {
        null
    } else {
        val viewportSize = (viewportEndOffset + viewportStartOffset) * viewportPercent / 100f
        visibleMonthsInfo.firstOrNull { itemInfo ->
            if (itemInfo.offset < 0) {
                itemInfo.offset + itemInfo.size >= viewportSize
            } else {
                itemInfo.size - itemInfo.offset >= viewportSize
            }
        }?.month
    }
}

Then wrap it in a snapshotFlow:

@Composable
fun rememberFirstMostVisibleMonth(state: CalendarState, viewportPercent: Float = 50f): CalendarMonth {
    val visibleMonth = remember(state) { mutableStateOf(state.firstVisibleMonth) }
    LaunchedEffect(state) {
        snapshotFlow { state.layoutInfo.firstMostVisibleMonth(viewportPercent) }
            .filterNotNull()
            .collect { month -> visibleMonth.value = month }
    }
    return visibleMonth.value
}

Finally, since you already have the width from here, you replace the visible month logic:

val mostVisibleMonth = rememberFirstMostVisibleMonth(state)
BoxWithConstraints {
    HorizontalCalendar(
        modifier = Modifier
            .height((maxWidth / 7) * mostVisibleMonth.weekDays.count()),
    )
}

Result:

https://user-images.githubusercontent.com/15170090/207551750-be21d3d8-eab7-4fb2-86a6-a40e6be9d7c5.mp4

---

Result with animation and month header - The code for this can be found here.

https://user-images.githubusercontent.com/15170090/207669858-fd2776ae-b96f-49fb-ac96-4e423d03e436.mp4