PhotoCalendar

Customizable calendar UI component offering grid and horizontal week views, per-day background images, extensive styling options, indicators, and English/Korean localization.

#compose-multiplatform
#compose
#calendar

Suggest an edit

Android JVMJVMKotlin/Native

GitHub stars39

AuthorsDongChyeon

Open issues0

Creation dateabout 1 year ago

Last activity5 months ago

Latest release1.1.1 (5 months ago)

GitHub repository Wiki page

Photo Calendar - A customizable Compose Multiplatform calendar that allows you to add background image to specific days.

A fully customizable Compose calendar component for Compose Multiplatform.
It supports both horizontal scrolling calendars and grid-based calendars.
This library lets you add rich visual elements, like background images for specific days.
It also provides extensive configuration options for styling and localization.

특정 날짜에 배경 이미지를 추가, Styling과 Localization 등 다양한 설정 옵션을 제공하는 Compose Multiplatform 기반 캘린더 컴포넌트입니다.

Grid-based Calendar	Horizontal Calendar

Features

1. Customizable Styling

Header Configuration: Customize the text style, color, and layout of the month and year display.
Week Header Configuration: Adjust weekday labels (e.g., Sun, Mon, etc.) with different styles and colors.
Day Configuration: Set the text style, color, and background for both regular and selected days.
Day Indicator: Add customizable shapes (e.g., CircleShape, RoundedCornerShape) and colors to selected day.

2. Localization Support

Supports both English (EN) and Korean (KO) locales.
Dynamically formats headers and weekday labels:
EN: “February 2024” KO: “2024년 2월”

3. Day Background Images

Customize the background of specific days using events.

4. Layouts

Horizontal Scrolling Calendar: Week-based, scrollable layout.
Grid-based Calendar: Month view with weeks in rows.

Getting Started

Add the following to your build.gradle file:

// Project level build.gradle
allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

// App level build.gradle
dependencies {
    implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.1")
    implementation("io.github.dongchyeon:photo-calendar:<latest_version>")
}

Usage

🚀 Migration Update

Replace usages of java.time.LocalDate with kotlinx.datetime.LocalDate:

// Before
import java.time.LocalDate

// After
import kotlinx.datetime.LocalDate

Grid-based Calendar Example

var selectedDate by remember { mutableStateOf(LocalDate.now()) }

val events = listOf(
  CalendarEvent(
    date = LocalDate.now().plus(DatePeriod(days = 1)),
    imgUrl = "https://picsum.photos/200/300",
    imgShape = CircleShape
  ),
  CalendarEvent(
    date = LocalDate.now().plus(DatePeriod(days = 2)),
    imgUrl = "https://picsum.photos/200/300",
    imgShape = RoundedCornerShape(8.dp)
  ),
)

Calendar(
  selectedDate = selectedDate,
  events = events,
) {
  selectedDate = it
}

Horizontal Calendar Example

var selectedDate by remember { mutableStateOf(LocalDate.now()) }

val events = listOf(
  CalendarEvent(
    date = LocalDate.now().plus(DatePeriod(days = 1)),
    imgUrl = "https://picsum.photos/200/300",
    imgShape = CircleShape
  ),
  CalendarEvent(
    date = LocalDate.now().plus(DatePeriod(days = 2)),
    imgUrl = "https://picsum.photos/200/300",
    imgShape = RoundedCornerShape(8.dp)
  ),
)

HorizontalCalendar(
  selectedDate = selectedDate,
  events = events,
) {
  selectedDate = it
}

Customized Options

1. Adding Events (Add background image to specific days)

You can add events to specific dates using the CalendarEvent class. Each event can include a background image and a shape.

val events = listOf(
  CalendarEvent(
    date = LocalDate.now().plus(DatePeriod(days = 1)),
    imgUrl = "https://picsum.photos/200/300",
    imgShape = CircleShape
  ),
  CalendarEvent(
    date = LocalDate.now().plus(DatePeriod(days = 3)),
    imgUrl = "https://picsum.photos/200/300",
    imgShape = RoundedCornerShape(8.dp)
  ),
)

HorizontalCalendar(
  selectedDate = LocalDate.now(),
  events = events,
  onDayClicked = { selectedDate ->
    println("Selected Date: $selectedDate")
  }
)

2. Header Configuration

Calendar(
  // ...
  headerConfig = CalendarHeaderConfig.default().copy(
    textStyle = Typography.titleLarge,
    textColor = Color.Red
  )
  // ...
)

3. Week Header Configuration

Calendar(
  // ...
  weekHeaderConfig = CalendarWeekHeaderConfig.default().copy(
    textStyle = Typography.bodyLarge,
    textColor = Color.Gray
  )
  // ...
)

4. Day Configuration

Calendar(
  // ...
  dayConfig = CalendarDayConfig.default().copy(
    dayTextColor = Color.Blue,
    selectedDayTextColor = Color.White
  )
  // ...
)

5. Indicator Configuration

Calendar(
  // ...
  indicatorConfig = CalendarIndicatorConfig(
    indicatorColor = Color.Yellow.copy(alpha = 0.4f),
    shape = RoundedCornerShape(12.dp)
  )
  // ...
)

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributions, bug reports, and feature requests are welcome!