Kotlin Multiplatform Calendar

Jetpack compose multiplatform calendar

Screenshot

Installation

repositories { 
    mavenCentral()
    maven { url = uri("https://s01.oss.sonatype.org/content/repositories/snapshots") }
}

Dependency

implementation("io.github.ronjunevaldoz:kmp-calendar:0.0.1-SNAPSHOT") // common library
implementation("io.github.ronjunevaldoz:kmp-calendar-android:0.0.1-SNAPSHOT") // android library

[libraries]
calendar = {group = "io.github.ronjunevaldoz", name ="kmp-calendar-android", version.ref ="calendar"}

Usage

Calendar(
    modifier = Modifier,
    state = rememberCalendarState(),
    colors = CalendarDefaults.calendarColors(),
    actionHeader = {  
        // Composable 
    },
    weekHeader = {   
        // DayWeek 
    } ,
    calendarDay = { day, inRange, onDaySelected ->
        DefaultCalendarDayItem(
            modifier = Modifier
                .size(30.dp)
                .clickableNoRipple {
                    onDaySelected(day)
                    airBnbSelector(day)
                },
            inRange = inRange,
            start = calendarState.start,
            end = calendarState.end,
            colors = CalendarDefaults.calendarColors(),
            selectedDate = calendarState.selected,
            day = day,
        )
    }
    calendarMonth = {
        CalendarMonthView(state = state, colors = colors)
    }, 
)

Customize

val calendarState = rememberCalendarState(
    selection = if (isDateRangePicker) CalendarSelection.Range else CalendarSelection.Single,
)

val setCalendarDefaults = {
    if (calendarState.selection == CalendarSelection.Single) {
        calendarState.selected = // selected date 
    } else {
        calendarState.start = // selected start date 
        calendarState.end = // selected end date
    }
}

// Calendar Picker
Text(
    text = "Select start date",
    modifier = Modifier
        .clickable { 
            isDatePickerShow = true
            calendarState.cursor = CalendarCursor.StartDate
            setCalendarDefaults()
        }, 
)
Text(
    text = "Select end date",
    modifier = Modifier
        .clickable { 
            isDatePickerShow = true
            calendarState.cursor = CalendarCursor.EndDate
            setCalendarDefaults()
        }, 
)

// Calendar Dialog
Dialog(onDismissRequest = {
    isDatePickerShow = !isDatePickerShow
}, DialogProperties(usePlatformDefaultWidth = false)) {
    Card(
        modifier = Modifier
            .width(230.dp)
            .wrapContentHeight(),
        colors = CardDefaults.cardColors(
            containerColor = Color.White
        ),
        shape = RoundedCornerShape(16.dp),
    ) {
        SetImmersiveScreen()
        CustomCalendar(state = calendarState)
    }
}

// Custom Calendar
@Composable
fun CustomCalendar(state: CalendarState) {
    Calendar(
        modifier = Modifier.padding(vertical = 12.dp),
        state = calendarState,
        colors = CalendarDefaults.calendarColors(),
        weekHeader = {
            Text(text = "${it.name.first()}")
        },
        calendarDay = { day, inRange, onDaySelected ->
            DefaultCalendarDayItem(
                modifier = Modifier
                    .size(30.dp)
                    .clickableNoRipple {
                        onDaySelected(day)
                        airBnbSelector(day)
                    },
                inRange = inRange,
                start = calendarState.start,
                end = calendarState.end,
                colors = CalendarDefaults.calendarColors(),
                selectedDate = calendarState.selected,
                day = day,
            )
        }
    )
}

Contributors

• realubit02