Update README.MD

WojciechOsak · Mar 27, 2024 · 466c722 · 466c722
1 parent ac6f67f
commit 466c722
Show file tree

Hide file tree

Showing 20 changed files with 178 additions and 112 deletions.
diff --git a/README.MD b/README.MD
@@ -46,13 +46,86 @@ Features:
 | Web(Wasm) |     ✅     |
 |  Desktop  |     ✅     |
 
-# Usage
+# Setup
 
+[![Maven Central](https://img.shields.io/badge/dynamic/xml.svg?label=Maven%20Central&color=blue&url=https://repo1.maven.org/maven2/io/github/wojciechosak/calendar/maven-metadata.xml&query=(//metadata/versioning/versions/version)[not(contains(text(),%27-%27))][last()])](https://repo1.maven.org/maven2/io/github/wojciechosak/calendar/)
+
+In Android project: 
+
+```groovy
+dependencies {
+  implementation 'io.github.wojciechosak:calendar:<latest-version>'
+}
+```
 
+In Kotlin Multiplatform project:
 
-# Documentation:
+```groovy
+commonMain.dependencies {
+  implementation 'io.github.wojciechosak:calendar:<latest-version>'
+}
+```
+
+```kotlin
+CalendarView(
+  config = rememberCalendarState(
+    startDate = LocalDate.today(),
+    monthOffset = 0
+  ),
+  day = { dayState ->
+    // define your day composable here!
+  }
+)
+```
 
-Documentation can be found here: 
+# Composables
+
+Simply use in Compose any view you want: 
+
+|   View type    |                      Preview                       |
+|:--------------:|:--------------------------------------------------:|
+|  CalendarView  | <img src="readme/calendar-view.png" height="250"/> |
+| HorizontalView |  <img src="readme/horizontal.gif" height="250"/>   |
+|  VerticalView  |   <img src="readme/vertical.gif" height="250"/>    |
+|    WeekView    |   <img src="readme/weekview.gif" height="250"/>    |
+|  MonthPicker   |  <img src="readme/monthpicker.png" height="250"/>  |
+|   YearPicker   |  <img src="readme/yearpicker.gif" height="250"/>   |
+
+Each view get as parameter day cell composable. Thanks to that your calendar can look whatever you like:
+<img src="readme/sample1.png" height="250"/>
+<img src="readme/sample2.png" height="250"/>
+
+## Range selection:
+
+```kotlin
+CalendarView(
+  config = rememberCalendarState(
+    startDate = startDate,
+    monthOffset = monthOffset,
+  ),
+  selectionMode = SelectionMode.Range,
+  rangeConfig = RangeConfig(rangeIllustrator = RoundedRangeIllustrator(Pallete.LightGreen)),
+)
+```
+
+ <img src="readme/range.png" height="250"/> 
+
+You can draw yourself implementations of RangeIllustrator, or use predefined `RoundedRangeIllustrator` 
+and `UnderlineIllustrator`.
+
+## Selection callbacks:
+
+```kotlin
+CalendarView(
+  config = ...,
+  onDateSelected = { date ->
+    // date: List<LocalDate>
+  },
+  selectionMode = SelectionMode.Multiply(3) // SelectionMode.Single or SelectionMode.Range
+)
+```
+
+---
 
 # Sample project:
 

diff --git a/calendar/src/commonMain/kotlin/io/wojciechosak/calendar/view/CalendarView.kt b/calendar/src/commonMain/kotlin/io/wojciechosak/calendar/view/CalendarView.kt
@@ -2,6 +2,7 @@ package io.wojciechosak.calendar.view
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.material3.Text
@@ -73,37 +74,38 @@ fun CalendarView(
             },
         )
     }
+    Column {
+        if (config.value.showHeader) {
+            header(yearMonth.month, yearMonth.year)
+        }
 
-    if (config.value.showHeader) {
-        header(yearMonth.month, yearMonth.year)
-    }
-
-    LazyVerticalGrid(
-        columns = GridCells.Fixed(7),
-        horizontalArrangement = horizontalArrangement,
-        verticalArrangement = verticalArrangement,
-        userScrollEnabled = false,
-        modifier = modifier,
-    ) {
-        val state = config.value
-        val weekDaysCount = if (state.showWeekdays) 7 else 0
+        LazyVerticalGrid(
+            columns = GridCells.Fixed(7),
+            horizontalArrangement = horizontalArrangement,
+            verticalArrangement = verticalArrangement,
+            userScrollEnabled = false,
+            modifier = modifier,
+        ) {
+            val state = config.value
+            val weekDaysCount = if (state.showWeekdays) 7 else 0
 
-        items(previousMonthDays + daysInCurrentMonth + nextMonthDays + weekDaysCount) { iteration ->
-            Item(
-                iteration = iteration,
-                config = config,
-                weekDaysCount = weekDaysCount,
-                previousMonthDays = previousMonthDays,
-                daysInCurrentMonth = daysInCurrentMonth,
-                dayOfWeekLabel = dayOfWeekLabel,
-                yearMonth = yearMonth,
-                state = state,
-                selectionMode = selectionMode,
-                onDateSelected = onDateSelected,
-                isActiveDay = isActiveDay,
-                rangeConfig = rangeConfig,
-                day = day,
-            )
+            items(previousMonthDays + daysInCurrentMonth + nextMonthDays + weekDaysCount) { iteration ->
+                Item(
+                    iteration = iteration,
+                    config = config,
+                    weekDaysCount = weekDaysCount,
+                    previousMonthDays = previousMonthDays,
+                    daysInCurrentMonth = daysInCurrentMonth,
+                    dayOfWeekLabel = dayOfWeekLabel,
+                    yearMonth = yearMonth,
+                    state = state,
+                    selectionMode = selectionMode,
+                    onDateSelected = onDateSelected,
+                    isActiveDay = isActiveDay,
+                    rangeConfig = rangeConfig,
+                    day = day,
+                )
+            }
         }
     }
 }
@@ -170,7 +172,7 @@ private fun Item(
                             selectDate(
                                 date = newDate,
                                 mode = selectionMode,
-                                list = selectedDates,
+                                list = config.value.selectedDates,
                             )
                         config.value = config.value.copy(selectedDates = selectionList)
                         onDateSelected(selectionList)
@@ -202,7 +204,6 @@ private fun selectDate(
     if (list.firstOrNull() == date) return list
     val result = mutableListOf<LocalDate>()
     result.addAll(list)
-
     when (mode) {
         is SelectionMode.Multiply -> {
             result.add(0, date)

diff --git a/calendar/src/commonMain/kotlin/io/wojciechosak/calendar/view/HorizontalCalendarView.kt b/calendar/src/commonMain/kotlin/io/wojciechosak/calendar/view/HorizontalCalendarView.kt
@@ -28,7 +28,7 @@ fun HorizontalCalendarView(
         ),
     modifier: Modifier = Modifier,
     pageSize: PageSize = PageSize.Fill,
-    beyondBoundsPageCount: Int = 0,
+    beyondBoundsPageCount: Int = 3,
     contentPadding: PaddingValues = PaddingValues(0.dp),
     calendarAnimator: CalendarAnimator = CalendarAnimator(startDate),
     calendarView: @Composable (monthOffset: Int) -> Unit,

diff --git a/calendar/src/commonMain/kotlin/io/wojciechosak/calendar/view/MonthPicker.kt b/calendar/src/commonMain/kotlin/io/wojciechosak/calendar/view/MonthPicker.kt
@@ -2,35 +2,45 @@ package io.wojciechosak.calendar.view
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
 import io.wojciechosak.calendar.modifiers.passTouchGesture
 import kotlinx.datetime.Month
 
 @Composable
 fun MonthPicker(
     columns: Int = 4,
-    horizontalArrangement: Arrangement.Horizontal = Arrangement.Center,
+    horizontalArrangement: Alignment.Horizontal = Alignment.CenterHorizontally,
     verticalArrangement: Arrangement.Vertical = Arrangement.Center,
     modifier: Modifier = Modifier,
     userScrollEnabled: Boolean = true,
     monthCount: Int = 12,
     onMonthSelected: (Month) -> Unit = {},
     monthView: @Composable (month: Month) -> Unit = { month ->
-        Text(month.name)
+        Column(
+            verticalArrangement = verticalArrangement,
+            horizontalAlignment = horizontalArrangement,
+            modifier = Modifier.aspectRatio(1f),
+        ) {
+            Text(
+                month.name,
+                textAlign = TextAlign.Center,
+            )
+        }
     },
 ) {
     require(monthCount in 0..12) {
         throw IllegalArgumentException("Month count should be greater than 0 and <= 12!")
     }
     LazyVerticalGrid(
         columns = GridCells.Fixed(columns),
-        horizontalArrangement = horizontalArrangement,
-        verticalArrangement = verticalArrangement,
         userScrollEnabled = userScrollEnabled,
         modifier = modifier,
     ) {
@@ -39,11 +49,7 @@ fun MonthPicker(
             Box(
                 modifier =
                     Modifier.passTouchGesture {
-                        selectedMonth?.let { month ->
-                            onMonthSelected(
-                                month,
-                            )
-                        }
+                        selectedMonth?.let { month -> onMonthSelected(month) }
                     },
                 contentAlignment = Alignment.Center,
             ) {

diff --git a/calendar/src/commonMain/kotlin/io/wojciechosak/calendar/view/VerticalCalendarView.kt b/calendar/src/commonMain/kotlin/io/wojciechosak/calendar/view/VerticalCalendarView.kt
@@ -23,6 +23,7 @@ fun VerticalCalendarView(
     modifier: Modifier = Modifier,
     pageSize: PageSize = PageSize.Fill,
     contentPadding: PaddingValues = PaddingValues(0.dp),
+    beyondBoundsPageCount: Int = 3,
     calendarView: @Composable (monthOffset: Int) -> Unit,
 ) {
     val pagerState =
@@ -38,7 +39,7 @@ fun VerticalCalendarView(
         state = pagerState,
         modifier = modifier.fillMaxWidth(),
         pageSize = pageSize,
-        beyondBoundsPageCount = 0,
+        beyondBoundsPageCount = beyondBoundsPageCount,
         contentPadding = contentPadding,
     ) {
         val index = it - INITIAL_PAGE_INDEX

diff --git a/calendar/src/commonMain/kotlin/io/wojciechosak/calendar/view/YearPicker.kt b/calendar/src/commonMain/kotlin/io/wojciechosak/calendar/view/YearPicker.kt
@@ -33,7 +33,9 @@ fun YearPicker(
     pageSize: PageSize = PageSize.Fill,
     onYearSelected: (Int) -> Unit = {},
     yearView: @Composable (year: Int) -> Unit = { year ->
-        Text(year.toString(), modifier = Modifier.padding(32.dp))
+        Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
+            Text(year.toString(), modifier = Modifier.padding(35.dp))
+        }
     },
 ) {
     val pagerState =

diff --git a/readme/calendar-view.png b/readme/calendar-view.png
diff --git a/readme/horizontal.gif b/readme/horizontal.gif
diff --git a/readme/monthpicker.png b/readme/monthpicker.png
diff --git a/readme/range.png b/readme/range.png
diff --git a/readme/sample1.png b/readme/sample1.png
diff --git a/readme/sample2.png b/readme/sample2.png
diff --git a/readme/vertical.gif b/readme/vertical.gif
diff --git a/readme/weekview.gif b/readme/weekview.gif
diff --git a/readme/yearpicker.gif b/readme/yearpicker.gif
diff --git a/...App/src/commonMain/kotlin/io/wojciechosak/calendar/calendar/screens/CalendarViewScreen.kt b/...App/src/commonMain/kotlin/io/wojciechosak/calendar/calendar/screens/CalendarViewScreen.kt
@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeGesturesPadding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.OutlinedButton
@@ -32,26 +31,24 @@ class CalendarViewScreen : NamedScreen {
 
     @Composable
     override fun Content() {
-        Box(Modifier.safeGesturesPadding()) {
-            CalendarView(
-                day = { state ->
-                    DayView(
-                        date = state.date,
-                        isDotVisible = state.isActiveDay || Random.nextBoolean(),
-                        onClick = { },
-                    )
-                },
-                config =
-                    rememberCalendarState(
-                        startDate = MonthYear(year = 1994, month = Month.APRIL).toLocalDate(),
-                        monthOffset = 0,
-                        showNextMonthDays = false,
-                        showPreviousMonthDays = false,
-                        showHeader = false,
-                        showWeekdays = false,
-                    ),
-            )
-        }
+        CalendarView(
+            day = { state ->
+                DayView(
+                    date = state.date,
+                    isDotVisible = state.isActiveDay || Random.nextBoolean(),
+                    onClick = { },
+                )
+            },
+            config =
+                rememberCalendarState(
+                    startDate = MonthYear(year = 1994, month = Month.APRIL).toLocalDate(),
+                    monthOffset = 0,
+                    showNextMonthDays = false,
+                    showPreviousMonthDays = false,
+                    showHeader = false,
+                    showWeekdays = false,
+                ),
+        )
     }
 }
 

diff --git a/...poseApp/src/commonMain/kotlin/io/wojciechosak/calendar/calendar/screens/FullDateScreen.kt b/...poseApp/src/commonMain/kotlin/io/wojciechosak/calendar/calendar/screens/FullDateScreen.kt
@@ -2,14 +2,17 @@ package io.wojciechosak.calendar.calendar.screens
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
@@ -49,12 +52,17 @@ class FullDateScreen : NamedScreen {
                     date = date.copy(month = it)
                     mode = DatePickerMode.YEAR
                 }) {
-                    Text(
-                        text = it.name.substring(IntRange(0, 2)).capitalize(),
-                        color = Color.Black,
-                        textAlign = TextAlign.Center,
+                    Column(
+                        verticalArrangement = Arrangement.Center,
+                        horizontalAlignment = Alignment.CenterHorizontally,
                         modifier = Modifier.aspectRatio(1f),
-                    )
+                    ) {
+                        Text(
+                            text = it.name.substring(IntRange(0, 2)).capitalize(),
+                            color = Color.Black,
+                            textAlign = TextAlign.Center,
+                        )
+                    }
                 }
             }