Calendar

Labeled

Day	Night

Month

Day	Night

Range

Day	Night

Installation

Backpack Android is available through Maven Central. Check the main Readme for a complete installation guide.

The calendar implementation relies on the Android adaptation of the JSR-310 backport for dealing with dates: ThreeTenABP

Add the following line in your base module's Gradle script:

                                                
                                                implementation 'com.jakewharton.threetenabp:threetenabp:$latestVersion'

Usage

Be sure to initialize the ThreeTenABP library according to their usage guidelines in your Application's context:

                                                
                                                override fun onCreate() {
                                                  super.onCreate()
                                                  AndroidThreeTen.init(this)
                                                }

BpkCalendar uses coroutines under the hood. Since it designed with coroutines, the API is designed primarily for Kotlin language and may not be interoperable with Java. To use the API, make sure kotlinx-coroutines is included to your project.

BpkCalendar is designed as a state machine. All the information it contains is available as a state in the StateFlow. Each method of the public API and some of the user interactions will change its state and emit it.

Example of a declaration in Compose

                                                
                                                import net.skyscanner.backpack.calendar2.CalendarParams
                                                import net.skyscanner.backpack.compose.calendar.BpkCalendar
                                                import net.skyscanner.backpack.compose.calendar.BpkCalendarController
                                                import net.skyscanner.backpack.compose.calendar.rememberCalendarController
                                                
                                                val controller = rememberCalendarController(
                                                  initialParams = CalendarParams(
                                                    range = LocalDate.of(2019, 1, 2)..LocalDate.of(2019, 12, 31), // start and end dates in the range
                                                    selectionMode = CalendarParams.SelectionMode.Single, // selection mode - can be Single, Dates, Months or Disabled
                                                  )
                                                )
                                                
                                                BpkCalendar(controller)

Now the component is ready. You can listen for the selection change using its state:

                                                
                                                controller
                                                  .state
                                                  .map { it.selection }
                                                  .onEach { selection ->
                                                    when (selection) { // reacting to the selection
                                                      is CalendarSelection.None -> {}
                                                      is CalendarSelection.Single -> {}
                                                      is CalendarSelection.Dates -> {}
                                                      is CalendarSelection.Month -> {}
                                                    }
                                                  }
                                                  .launchIn(myCoroutineScope)

Advanced dates customisation

You can attach some of the information to each date displayed in calendar. This information will update its appearance and behaviour.

In order to do this, specify cellInfo parameters like shown here:

                                                
                                                controller.setParams(
                                                  CalendarParams(
                                                    range = range,
                                                    selectionMode = selectionMode,
                                                    cellsInfo = mapOf(
                                                      LocalDate.of(2019, 1, 2) to CellInfo(
                                                        disabled = true, // marks date as disabled
                                                        status = CellStatus.Positive, // adds green colour to cell, you can use Neutral, Negative, Empty and null as well
                                                        label = "£30", // adds label below the date
                                                      ),
                                                    )
                                                  )
                                                )