Calendar

Highly configurable calendar picker logic with customizable day-cell UI, multiple view modes (month, week, vertical, horizontal), selection types (single, multiple, range), and animated scrolling.

#web
#ui
#desktop
#datepicker
#compose-ui
#compose-multiplatform
#compose
#calendar
#apple
#animation

Suggest an edit

Android JVMJVMKotlin/NativeJS

GitHub stars0

Authorsvickyleu

Open issues0

LicenseApache License 2.0

Creation datealmost 2 years ago

Last activity12 days ago

Latest release2.0.0 (12 days ago)

GitHub repository Wiki page

Compose Multiplatform Calendar

Highly configurable Kotlin Multiplatform Compose library where you can easily draw calendar picker for any platform you want: Android, iOS, Desktop or even Web!

We give you logic, you define UI with Composables!

Features:

Feature	Supported
Single month calendar view	✅
Week calendar	✅
Horizontal calendar	✅
Customizable UI	✅
Headers support	✅
Calendar offsets	✅
Single selection	✅
Multiple selection	✅
Month/Year picker	✅
Scroll to date animation	✅
Vertical calendar	✅
Range selection	✅

Setup

In Android project:

dependencies {
  implementation 'io.github.wojciechosak:calendar:<latest-version>'
}

In Kotlin Multiplatform project:

commonMain.dependencies {
  implementation 'io.github.wojciechosak:calendar:<latest-version>'
}

HorizontalCalendarView(startDate = startDate) { monthOffset ->
  CalendarView(
    config = rememberCalendarState(
      startDate = startDate,
      monthOffset = 0
    ),
    day = { dayState ->
      // define your day composable here!
    }
  )
}

Basic horizontal scrollable view:

HorizontalCalendarView(startDate = startDate) { monthOffset ->
  CalendarView(
    config = rememberCalendarState(
      startDate = startDate,
      monthOffset = monthOffset,
    ),
  )
}

Documentation

Documentation can be found here: docs.md

Composables

List of available views

Simply use in Compose any view you want:

View type	Preview
CalendarView
HorizontalView
VerticalView
WeekView
MonthPicker
YearPicker

Each view get as parameter day cell composable. Thanks to that your calendar can look whatever you like:

Versions

Compose version	Library version
1.5.11	0.0.8-compose-1.5.11
1.6.1	0.0.8

Samples:

In directory sample you can find bunch of examples. You can run Android/iOS application and test it yourself. Below you can find instruction how to run sample project on your computer.

Sample project

Before running!

check your system with KDoctor
install JDK 17 on your machine

Android

To run the application on android device/emulator:

open project in Android Studio and run imported android run configuration

To build the application bundle:

run ./gradlew :sample:composeApp:assembleDebug
find .apk file in sample/composeApp/build/outputs/apk/debug/composeApp-debug.apk

Desktop

Run the desktop application: ./gradlew :sample:composeApp:run

iOS

To run the application on iPhone device/simulator:

Open iosApp/iosApp.xcproject in Xcode and run standard configuration
In XCode open Build Phases -> Run Script -> paste script:

    cd "$SRCROOT/../../"
    ./gradlew :sample:composeApp:embedAndSignAppleFrameworkForXcode

And build the project.

After that you can use Kotlin Multiplatform Mobile plugin for Android Studio

Browser

Run the browser application: ./gradlew :sample:composeApp:jsBrowserDevelopmentRun