``` @Composable fun DynamicSchedule( viewModel: CalenderViewModel, modifier: Modifier = Mod...

# compose

[Elio Maroun]

@Composable
fun DynamicSchedule(
    viewModel: CalenderViewModel,
    modifier: Modifier = Modifier,
    appointmentContent: @Composable (appointment: Appointment) -> Unit = {
        ScheduleCard(
            appointment = it
        )
    },
    minDate: LocalDate,
    maxDate: LocalDate,
    dayWidth: Dp,
    hourHeight: Dp
) {
    val numDays = ChronoUnit.DAYS.between(minDate, maxDate).toInt() + 1
    val dividerColor = if (MaterialTheme.colors.isLight) Color.LightGray else Color.DarkGray
    var offsetY by remember { mutableStateOf(0f) }
    Layout(
        content = {
            viewModel.state.value.appointmentList.sortedBy { it.startDate }

                .forEach { appointment ->
                    Box(modifier = Modifier.appointmentData(appointment)) {
                        appointmentContent(appointment)
                    }
                }
        },
        modifier = modifier
            .drawBehind {
                repeat(23) {
                    drawLine(
                        dividerColor,
                        start = Offset(0f, (it + 1) * hourHeight.toPx()),
                        end = Offset(size.width, (it + 1) * hourHeight.toPx()),
                        strokeWidth = 1.dp.toPx()
                    )
                }
                repeat(numDays - 1) {
                    drawLine(
                        dividerColor,
                        start = Offset((it + 1) * dayWidth.toPx(), 0f),
                        end = Offset((it + 1) * dayWidth.toPx(), size.height),
                        strokeWidth = 1.dp.toPx()
                    )
                }
            }
            .pointerInput(Unit) {
                detectTapGestures {
                    val x = it.x.toDp()
                    val y = it.y.toDp()
                    val time = y.value.toInt() / hourHeight.value
                    val date = (x.value.toInt() / dayWidth.value)
                    println("X: $x, Y: $y")
                    println("Day: $date, Time: $time")

                }

            }
            .draggable(
                orientation = Orientation.Vertical,
                state = rememberDraggableState { delta ->
                    offsetY += delta
                    println("Delta: $offsetY")

                }
            ),
    ) { measurables, constraints ->
        println("i got recomposed ======== ")
        val height = hourHeight.roundToPx() * 24
        val width = dayWidth.roundToPx() * numDays
        val placeablesWithAppointment = measurables.map { measurable ->
            val appointment = measurable.parentData as Appointment
            val appointmentDurationInMinutes =
                ChronoUnit.MINUTES.between(
                    appointment.startDate.time.toJavaLocalTime(),
                    appointment.endDate.time.toJavaLocalTime()
                )

            val appointmentHeight =
                ((appointmentDurationInMinutes / 60f) * hourHeight.toPx()).roundToInt()
            val placeable = measurable.measure(
                constraints.copy(
                    minWidth = dayWidth.roundToPx(),
                    maxWidth = dayWidth.roundToPx(),
                    minHeight = appointmentHeight,
                    maxHeight = appointmentHeight
                )
            )
            Pair(placeable, appointment)
        }
        layout(width, height) {
            placeablesWithAppointment.forEach { (placeable, appointment) ->
                //appointment time - midnight
                val appointmentOffsetMinutes =
                    ChronoUnit.MINUTES.between(
                        LocalTime.MIN,
                        appointment.startDate.time.toJavaLocalTime()
                    )
                val appointmentY =
                    ((appointmentOffsetMinutes / 60f) * hourHeight.toPx()).roundToInt()
                val appointmentOffsetDays =
                    ChronoUnit.DAYS.between(
                        minDate,
                        appointment.startDate.date.toJavaLocalDate()
                    ).toInt()

                val appointmentX = appointmentOffsetDays * dayWidth.roundToPx()
                placeable.place(appointmentX, appointmentY)

            }
        }

    }
}

I have a custom schedule representing a weekview, how may I listen to drag events to change background color of that surface.

[Elio Maroun]

I am using this tutorial https://danielrampelt.com/blog/jetpack-compose-custom-schedule-layout-part-1/