I am using https://github.com/kizitonwose/Calendar/tree/main/sample/src/main/java/com/kizitonwose/calendar/sample/compose to build a vertical calendar, how can I limit the number of recomposition of the days, because my app is getting slow. This is my view containing all components.
When scrolling it its becoming very slow due to recomposition
@Composable
fun ChooseDateView(
appointmentViewModel: AppointmentViewModel,
modifier: Modifier = Modifier
.background(color = Color.White)
.height(400.dp)
) {
var selectedDate by remember { mutableStateOf<LocalDate>(appointmentViewModel.state.value.currentDateTime) }
val currentMonth =
remember { mutableStateOf<LocalDate>(appointmentViewModel.state.value.currentDateTime).value.yearMonth }
val startMonth = remember { YearMonth.now().minusMonths(24) }
val endMonth = remember { YearMonth.now().plusMonths(24) }
val daysOfWeek = remember { daysOfWeek(firstDayOfWeek = DayOfWeek.MONDAY) }
val state = rememberCalendarState(
startMonth = startMonth,
endMonth = endMonth,
firstVisibleMonth = currentMonth,
firstDayOfWeek = daysOfWeek.first()
)
Card(
shape = RoundedCornerShape(8.dp),
elevation = 8.dp
) {
Column {
TopBar(
modifier = Modifier
.background(color = Color.White),
title = "Choose Date",
leftContent = {
IconButton(
modifier = Modifier,
onClick = {
appointmentViewModel.onEvent(AppointmentEvent.ClosedDialog)
}) {
Icon(
Icons.Default.ArrowBack,
contentDescription = "back"
)
}
}
)
DaysOfWeekTitle(daysOfWeek = daysOfWeek)
VerticalCalendar(
modifier = modifier
.height(360.dp),
state = state,
dayContent = { day ->
Day(day, isSelected = selectedDate == day.date) { day ->
selectedDate = day
appointmentViewModel.onEvent(AppointmentEvent.OnSelectedDate(day))
}
},
monthHeader = { month ->
println("========== i got rerender i am maping entire weekdays")
//val daysOfWeek = month.weekDays.first().map { it.date.dayOfWeek }
MonthHeader(month)
}
)
Row(
modifier = Modifier
.fillMaxWidth()
.background(color = appColors.primary),
horizontalArrangement = Arrangement.SpaceEvenly
) {
TextButton(onClick = { appointmentViewModel.onEvent(AppointmentEvent.ClosedDialog) }) {
Text(
text = "Dismiss",
style = FontLibrary.regularBody14(color = Color.White),
modifier = Modifier.padding(top = 5.dp, bottom = 5.dp)
)
}
TextButton(onClick = { appointmentViewModel.onEvent(AppointmentEvent.ClosedDialog) }) {
Text(
text = "Change Date",
style = FontLibrary.regularBody14(color = Color.White),
modifier = Modifier.padding(
top = 5.dp, bottom = 5.dp)
)
}
}
}
}
}
@Composable
fun Day(day: CalendarDay, isSelected: Boolean, onClick: (LocalDate) -> Unit) {
println("======== day is recomposed")
Box(
modifier = Modifier
.aspectRatio(1f) // This is important for square sizing!
.clip(CircleShape)
.background(color = if (isSelected && day.position == DayPosition.MonthDate) appColors.primary else Color.Transparent)
.clickable(
enabled = day.position == DayPosition.MonthDate,
onClick = { onClick(day.date) }
),
contentAlignment = Alignment.Center
) {
Text(
text = day.date.dayOfMonth.toString(),
style = FontLibrary.Outfit18(
color = if (day.position == DayPosition.MonthDate && isSelected) Color.White
else if (day.position == DayPosition.MonthDate) appColors.secondary
else Color.Transparent
)
)
}
}