DatePickerTimeline

A linear date picker for compose multiplatform.
Inspired by https://pub.dev/packages/date_picker_timeline

Installation
Add the dependency to your build.gradle or build.gradle.kts file
repositories {
mavenCentral()
}
dependencies{
implementation ("io.github.rafsanjani:datepickertimeline:<latest_version>")
}
Usage
For a horizontal date picker with no customization
DatePickerTimeLine(
modifier = Modifier,
onDateSelected = {selectedDate: LocalDate->
}
)
For a vertical date picker with no customization
import com.foreverrafs.datepicker.Orientation
DatePickerTimeLine(
modifier = Modifier,
orientation = Orientation.Vertical,
onDateSelected = {selectedDate: LocalDate->
}
)
You can pass an optional state to the picker and specify the initial selected date
DatePickerTimeLine(
modifier = Modifier,
state = rememberDatePickerState(initialDate = LocalDate.now()),
onDateSelected = { selectedDate: LocalDate ->
}
)
To customize the full list of properties
com.foreverrafs.datepicker.Orientation
today = LocalDate.now()
datePickerState =
rememberDatePickerState(initialDate = LocalDate.now())
DatePickerTimeline(
modifier = Modifier.wrapContentSize(),
onDateSelected = { selectedDate: LocalDate ->
},
backgroundColor = Color.Yellow,
state = datePickerState,
orientation = Orientation.Horizontal,
selectedBackgroundColor = Color.Green,
selectedTextColor = Color.White,
dateTextColor = Color.Black,
eventDates = listOf(
today.plusDays(),
today.plusDays(),
today.plusDays(),
today.plusDays(),
),
todayLabel = {
Text(
modifier = Modifier.padding(dp),
text = ,
color = Color.White,
style = MaterialTheme.typography.h6
)
},
pastDaysCount = ,
eventIndicatorColor = Color.Brown
)
Scrolling to different dates
You can store the DatePickerState object into a variable and use it to perform smooth scrolling to any date. This is very similar to how LazyListState works. If you try to scroll to an invalid date as constrained by the pastDaysCount property, you are scrolled to the first valid date in the calendar instead.
val today = LocalDate.now()
val datePickerState =
rememberDatePickerState(initialDate = LocalDate.now())
Column{
DatePickerTimeline(
state = datePickerState
)
Button(
onClick = {
datePickerState.smoothScrollTodate(LocalDate.of(2022, 1, 1)
}
){
Text("Go to different date")
}
}
Credits
- https://github.com/godaddy/compose-color-picker for the beautiful color picker library used in the samples
License