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

A fully customizable calendar component for Jetpack Compose.
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 등 다양한 설정 옵션을 제공하는 Jetpack Compose를 이용한 캘린더 컴포넌트입니다.

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("io.github.dongchyeon:photo-calendar:1.0.0")
}

Usage

Grid-based Calendar Example

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

val events = listOf(
    CalendarEvent(
        date = LocalDate.now().plusDays(1),
        imgUrl = "https://picsum.photos/200/300",
        imgShape = CircleShape
    ),
    CalendarEvent(
        date = LocalDate.now().plusDays(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().plusDays(1),
        imgUrl = "https://picsum.photos/200/300",
        imgShape = CircleShape
    ),
    CalendarEvent(
        date = LocalDate.now().plusDays(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().plusDays(1),
        imgUrl = "https://example.com/image1.jpg",
        imgShape = CircleShape
    ),
    CalendarEvent(
        date = LocalDate.now().plusDays(3),
        imgUrl = "https://example.com/image2.jpg",
        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!