Jetpack Compose Calendar Usage

content.kt

@Composable
internal fun Content(
    viewState: OnSiteScheduleViewState,
    actioner: (OnSiteScheduleAction) -> Unit,
) {
    MonthCalendar(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp),
        onMonthChanged = { day -> actioner(OnSiteScheduleAction.OnMonthChanged(day)) }
    ) {
        // scope renderings can be overridden and drawn by receiver
        day = { padding, day, today -> DayCell(padding, day = day, today = today, viewState.scheduledEvents) }
        header = { month, actioner -> CalendarHeader(month = month, actioner = actioner) }
        dayLabel = { dayOfWeek, width -> DayLabel(dow = dayOfWeek, width = width) }
    }
}

@Composable
private fun CalendarHeader(month: CalendarDay, actioner: (CalendarAction) -> Unit) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        IconButton(onClick = { actioner(CalendarAction.MoveBack)  }) {
            Icon(imageVector = Icons.Default.ArrowBack, contentDescription = "Month back")
        }
        Text(
            text = month.month.format(DateTimeFormatter.ofPattern("MMMM, yyyy")),
            style = MaterialTheme.typography.h6,
        )
        IconButton(onClick = { actioner(CalendarAction.MoveForward) }) {
            Icon(imageVector = Icons.Default.ArrowForward, contentDescription = "Month forward")
        }
    }
}

@Composable
private fun DayLabel(dow: DayOfWeek, width: Dp) {
    Column(horizontalAlignment = CenterHorizontally) {
        Text(
            modifier = Modifier.padding(4.dp),
            text = dow.name.take(3),
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.body2.copy(fontWeight = FontWeight.Medium)
        )
        Box(
            modifier = Modifier
                .width(width)
                .height(1.dp)
                .background(color = Color.LightGray)
        )
    }
}

@Composable
private fun BoxScope.DayCell(contentPadding: PaddingValues, day: CalendarDay, today: CalendarDay, scheduled: List<CalendarDay>) {
    val primaryColor = MaterialTheme.colors.primary
    var isScheduledDay = false
    val ldr = LocalLayoutDirection.current

    Box(modifier = Modifier.fillMaxSize().padding(contentPadding)) {

        when {
            scheduled.contains(day) -> {
                isScheduledDay = true
                Canvas(modifier = Modifier.matchParentSize(), onDraw = {
                    drawCircle(
                        radius = size.minDimension / 1.5f,
                        color = primaryColor
                    )
                })
            }
            day == today -> {
                Canvas(modifier = Modifier.matchParentSize(), onDraw = {
                    drawCircle(
                        radius = size.minDimension / 1.5f,
                        color = primaryColor,
                        style = Stroke(
                            width = 3.dp.roundToPx().toFloat(),
                            pathEffect = PathEffect.dashPathEffect(
                                intervals = floatArrayOf(10f, 20f),
                                phase = 25f
                            )
                        )
                    )
                })
            }
        }
        Text(
            "${day.day}",
            modifier = Modifier.align(Center),
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.body2.copy(
                color = if (isScheduledDay) MaterialTheme.colors.onPrimary else MaterialTheme.colors.onBackground,
                fontWeight = FontWeight.Medium
            )
        )
    }
}