Kalendar - An Elementary Compose Calendar.
This is a calendar to integrate Calendar with Custom design in your jetpack compose project.You can also add list of events for your days. Made with
Introduction
With Compose getting the attention, it was about time to have its own Calendar. Kalendar is all about it with the customization and design.
Implementation
Gradle setup
In build.gradle of app module, include this dependency
dependencies {
implementation("com.himanshoe:kalendar:1.0.0-RC1")
}
Usage
1. Setup the Kalendar
Kalendar(kalendarType = KalendarType.Firey(), onCurrentDayClick = { day, event ->
//handle the date click listener
}, errorMessage = {
//Handle the error if any
})
In
onCurrentDayClickyou will get aLocalDateandKalendarEvent?.
Here, you can also pass optional params:
- List: It lets you pass a list of all events in
KalendarEventformat. - KalendarKonfig : It lets you set the configuration for Kalendar.
- KalendarStyle : It lets you setup the design of Kalendar.
- LocalDate : the by default selection where the KalendarSelector is placed.
2. Pass KalendarType
You need to pass the KalendarType with its value in the constructor. It has two values Firey and Ocenic. Firey repesents the MonthView like:
and Ocenic represents the Week View.
3. KalendarKonfig
By default it takes the initial values added to it.
data class KalendarKonfig(
val yearRange: YearRange = YearRange(),
)
where,
YearRange takes value min to max for years in Int
4. KalendarStyle
You can customize you calendar by editing the params in KalendarStyle which looks like,
data class KalendarStyle(
val kalendarBackgroundColor: Color? = null,
val kalendarColor: Color? = null,
val kalendarSelector: KalendarSelector = KalendarSelector.Circle(),
val hasRadius: Boolean = true,
val elevation: Dp = if (hasRadius) Grid.One else Grid.Zero,
val shape: Shape = ButtomCurvedShape,
)
Here, if you have to design and change the selector shape and color you need to configure the KalendarSelector to the Shape. The options here are, Circle, Rounded, Dot and Square.
5. KalendarSelector
sealed class KalendarSelector(
val shape: Shape,
val selectedColor: Color,
val defaultColor: Color,
val todayColor: Color,
val selectedTextColor: Color,
val defaultTextColor: Color,
val eventTextColor: Color
)
Here the KalendarSelector has 4 different shapes with default colors. If you want to set your custom color you can pass the shape and your desired color set like,
KalendarSelector.Circle(
// Colors set based on above variables
)
6. KalendarEvent
You can also add list of KalendarEvent which can be used to list the event for the specific day. KalendarEvent looks like,
data class KalendarEvent(
val date: LocalDate,
val eventName: String,
val eventDescription: String? = null,
)
Here,
- date: The Localdate on which the event is recorded
- eventName: Pass a name for the event.
- eventDescription: Pass a description for the event.
If the event is marked it looks like,
Here, 10 Jan 2022 is an event on the calendar and you verify it on onCurrentDayClick
365 Nov 21, 2022
8 Aug 17, 2022
46 Oct 10, 2022
4.4k Dec 20, 2022
1.4k Jan 5, 2023
1.5k Dec 9, 2022
473 Nov 10, 2022
444 Dec 9, 2022
10 May 12, 2022
6 Aug 17, 2022
6 Oct 18, 2022
1 Aug 9, 2022
3.4k Jan 3, 2023
5.8k Jan 5, 2023
30 Nov 17, 2022
4 Dec 23, 2022
6 Sep 16, 2022
35 Jan 31, 2023