Calendar UI

Setup

Add the dependency below to your module's build.gradle.kts file.

1. Add Repository Add the JitPack repository to your root settings.gradle.kts:

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://jitpack.io") } // Add this
    }
}

2. Add Dependency

• For Compose Multiplatform projects, add the dependency to your commonMain:

sourceSets {
    commonMain.dependencies {
        // Includes both UI components and core calendar logic
        implementation("com.github.komodgn.KMP:calendar-ui:$version")
    }
}

• For Android-only Projects

dependencies {
    // You can use the same artifact for Android-only projects
    implementation("com.github.komodgn.KMP:calendar-ui:$version") 
}

Usage

Load a simple calendar in your Compose Multiplatform screen:

import io.github.komodgn.kmp.calendar.ui.MetaCalendar
import kotlinx.datetime.Month

MetaCalendar(
    initialYear = 2026,
    initialMonth = Month.APRIL,
    onDayClick = { date ->
        // date is a kotlinx.datetime.LocalDate object
        println("Clicked date: ${date.dayOfMonth}")
    }
)

Handling Selection

You can manage the selected date state and perform actions when a user picks a day:

var selectedDate by remember { mutableStateOf<LocalDate?>(null) }

MetaCalendar(
    initialYear = 2026,
    initialMonth = Month.APRIL,
    onDayClick = { date ->
        selectedDate = date
        // Navigate or update UI based on selectedDate
    }
)

Scroll Orientation

Supports scroll behaviors. The default is None (Static).

import io.github.komodgn.kmp.calendar.core.CalendarScrollOrientation

MetaCalendar(
    scrollOrientation = CalendarScrollOrientation.Horizontal,
    initialYear = 2026,
    initialMonth = Month.APRIL,
    onDayClick = { /* ... */ }
)

Customization (Optional)

Use Modifier to adjust the layout and look of your calendar:

MetaCalendar(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .clip(RoundedCornerShape(12.dp)),
    initialYear = 2026,
    initialMonth = Month.MAY,
    onDayClick = { /* Handle click */ }
)

---

Learn more about Kotlin Multiplatform, Compose Multiplatform, Kotlin/Wasm.