A beautiful material calendar with endless scroll, range selection and a lot more!

Overview

alt text

CrunchyCalendar

A light, powerful and easy to use Calendar Widget with a number out of the box features:

  • Infinite vertical scrolling in both directions;
  • Setting date boundaries to restrict scrolling inside of a specific time period;
  • Single / multiple / range dates selection;
  • Pre-selecting dates;
  • Color customization;
  • Displaying color indicators;
  • Setting own custom ItemDecoration;
  • Presented as a View subclass which can be displayed everywhere: in Activity, Fragment or Dialog, or can be integrated into another custom View.

alt text

Dependency

This library is available on jCenter. jCenter is the default Maven repository used by Android Studio. Download

Gradle

implementation 'ru.cleverpumpkin:crunchycalendar:2.0.0'

Maven

<dependency>
  <groupId>ru.cleverpumpkin</groupId>
  <artifactId>crunchycalendar</artifactId>
  <version>2.0.0</version>
  <type>pom</type>
</dependency>

Usage

Here's a basic example of Calendar usage.

First of all, you should declare CalendarView in your layout XML file.

  <ru.cleverpumpkin.calendar.CalendarView 
        android:id="@+id/calendar_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

Perform Calendar setup in your Activity or Fragment class.

val calendarView = view.findViewById(R.id.calendar_view)
val calendar = Calendar.getInstance()

// Initial date
calendar.set(2018, Calendar.JUNE, 1)
val initialDate = CalendarDate(calendar.time)

// Minimum available date
calendar.set(2018, Calendar.MAY, 15)
val minDate = CalendarDate(calendar.time)

// Maximum available date
calendar.set(2018, Calendar.JULY, 15)
val maxDate = CalendarDate(calendar.time)

// List of preselected dates that will be initially selected
val preselectedDates: List<CalendarDate> = getPreselectedDates()

// The first day of week
val firstDayOfWeek = java.util.Calendar.MONDAY

// Set up calendar with all available parameters
calendarView.setupCalendar(
    initialDate = initialDate, 
    minDate = minDate,
    maxDate = maxDate,
    selectionMode = SelectionMode.NONE,
    selectedDates = preselectedDates,
    firstDayOfWeek = firstDayOfWeek,
    showYearSelectionView = true
)
                

Note: all parameters in setupCalendar() method are optional and have default values.

To handle date click / long click with custom action, you can do this:

// Set date click callback 
calendarView.onDateClickListener = { date ->

    // Do something ... 
    // for example get list of selected dates
    val selectedDates = calendarView.selectedDates 
}

// Set date long click callback 
calendarView.onDateLongClickListener = { date ->

    // Do something ... 
}

Saving and Restoring state

Calendar takes care of saving and restoring its internal state (selected dates, selection mode, etc.), so there's no need to save it manually and call CalendarView.setupCalendar() method every time, when Activity or Fragment is recreated.

If a Calendar was set up with CalendarView.setupCalendar() method before restoring state, previous saved state will be ignored.

Dates Selection

Calendar supports several selection modes: single, multiple and range.

Note: You can restrict selection of some dates by implementing your own filtration logic:

// Here we make weekends unavailable for selection
calendarView.dateSelectionFilter = { date ->
    date.dayOfWeek != Calendar.SATURDAY && date.dayOfWeek != Calendar.SUNDAY
}

Single date selection

Only one date can be selected at a time.

// Set up calendar with SelectionMode.SINGLE
calendarView.setupCalendar(selectionMode = SelectionMode.SINGLE)

...

// Get selected date or null
val selectedDate: CalendarDate? = calendarView.selectedDate

// Get list with single selected date or empty list
val selectedDates: List<CalendarDate> = calendarView.selectedDates

Multiple dates selection

A number of dates can be selected. Pressing an already selected date will unselect it.

// Set up calendar with SelectionMode.MULTIPLE
calendarView.setupCalendar(selectionMode = SelectionMode.MULTIPLE)

...

// Get all selected dates in order they were added or empty list
val selectedDates: List<CalendarDate> = calendarView.selectedDates

Range date selection

Allows you to select a date range. Previous selected range is cleared when you select another one.

// Set up calendar with SelectionMode.RANGE
calendarView.setupCalendar(selectionMode = SelectionMode.RANGE)

... 

// Get all selected dates in range (includes start and end date) or empty list
val selectedDates: List<CalendarDate> = calendarView.selectedDates

Color Indicators

The Calendar is able to display simple color indicators (dots) on the date cell.

Color indicator represents as simple interface, which you can implement in your classes.

interface DateIndicator {
    val date: CalendarDate // indicator date
    val color: Int // indicator color
}

Here's an example of setting indicators to display on the Calendar.

// Set up calendar
calendarView.setupCalendar()


val indicators: List<DateIndicator> = getDatesIndicators()

// Set List of indicators that will be displayed on the calendar 
calendarView.datesIndicators = indicators

To get all indicators for specific date, you can do this:

// Set date click callback 
calendarView.onDateClickListener = { date ->

    // Get all indicators for the date
    val indicatorsForDate = calendarView.getDateIndicators(date)
    
    // do something ... 
}

View Customization

Calendar appearance open for customization.

Styling using XML

Calendar appearance can be customized with XML attributes. Here's an example of applying custom style to change Calendar appearance.

Define your custom style for the Calendar.

<style name="CalendarViewCustomStyle">
    <item name="android:background">@android:color/white</item>
    <item name="calendar_date_background">@drawable/custom_date_bg_selector</item>
    <item name="calendar_date_text_color">@color/custom_date_text_selector</item>
    <item name="calendar_day_bar_background">@color/custom_calendar_days_bar_background</item>
    <item name="calendar_day_bar_text_color">@color/custom_calendar_days_bar_text_color</item>
    <item name="calendar_grid_color">@color/custom_calendar_grid_color</item>
    <item name="calendar_grid_on_selected_dates">false</item>
    <item name="calendar_month_text_color">@color/custom_calendar_month_text_color</item>
    <item name="calendar_year_selection_arrows_color">
        @color/custom_calendar_year_selection_arrows_color
    </item>
    <item name="calendar_year_selection_background">
        @color/custom_calendar_year_selection_background
    </item>
    <item name="calendar_year_selection_text_color">
        @color/custom_calendar_year_selection_text_color
    </item>
</style>

Apply your custom style.

<ru.cleverpumpkin.calendar.CalendarView
    android:id="@+id/calendar_view"
    style="@style/CalendarViewCustomStyle"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

To define custom styles for all Calendars in your app at once you can do this:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

    <!-- ...snip... -->
    
    <item name="calendarViewStyle">@style/CalendarViewCustomStyle</item>
    
    <!-- ...etc... -->
</style>

Styling using code

You can also set styles and colors programmatically:

 with(calendarView) {
     setDrawGridOnSelectedDates(drawGrid = true)
     setGridColorRes(R.color.custom_calendar_grid_color)
     setYearSelectionBarBackgroundColorRes(R.color.custom_calendar_year_selection_background)
     setYearSelectionBarArrowsColorRes(R.color.custom_calendar_year_selection_arrows_color)
     setYearSelectionBarTextColorRes(R.color.custom_calendar_year_selection_text_color)
     setDaysBarBackgroundColorRes(R.color.custom_calendar_days_bar_background)
     setDaysBarTextColorRes(R.color.custom_calendar_days_bar_text_color)
     setMonthTextColorRes(R.color.custom_calendar_month_text_color)
     setDateCellBackgroundRes(R.drawable.custom_date_bg_selector)
     setDateCellTextColorRes(R.color.custom_date_text_selector)
}

If you need to add some custom drawing logic for Calendar, you can implement standard RecyclerView.ItemDecoration and add it for Calendar using addCustomItemDecoration() method.

// Set up calendar
calendarView.setupCalendar()

// Some custom decoration logic 
val customItemDecoration = CustomItemDecoration()

// Add custom item decoration for calendar
calendarView.addCustomItemDecoration(customItemDecoration)

There is an abstract helper class AbsDateItemDecoration that you can extend to implement custom drawing logic for specific dates cells.

Sample app

The Sample app is available for download from Google Play.

Sketch file

Wouldn’t it be a real pain for your designer to ignore Calendar View in your apps mockups? Or for them to try and explain to you, which colors you should use by adding them to Jira task in plain text?

That is lame. That’s why we’ve added a .sketch-file to this repository here. Have fun!

License


MIT License

Copyright (c) 2018 CleverPumpkin Ltd.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Maintainers

alt text

CrunchyCalendar is maintained and developed by CleverPumpkin.

Comments
  • Not scrolling to current day.

    Not scrolling to current day.

    Hi. In setupCalendar() if initialDate and minDate are too far apart then it won't scroll to initialDate. For example. Set calendar with minDate as 1st of January of this year and initialDate as today (August 1st) then when loaded it won't scroll to today. moveToDate() also won't scroll to that date.

    Now, if we initialize calendar with minDate set as March and initialDate as August then when loaded we will see August on the screen.

    I guess it has something to do with how many items recyclerView loads because after we scroll to today it all works fine.

    opened by pixelsbyweb 8
  • create event in calendar

    create event in calendar

    Hello, From server i got some date and i want to show this date as a event and mark it. I want to use java but i can't find a helpful sample to add event into the calendar. I am stack on this. say i have a array of date i want to show this date into the calendar with a mark

    Thanks in advance

    opened by pavelsust 7
  • Disabled day cell with custom background color

    Disabled day cell with custom background color

    Thank you for this awesome library again. :)

    Is there any way to set the 'disabled days' cell's background color conditionally? Example: one of them 'reserved' (red), another one is 'processing' (orange) stb..

    Thank you.

    opened by wyzard 4
  • Can I add a selection programmatically?

    Can I add a selection programmatically?

    Hello,

    I would like to select all the week (Monday to sunday) when a user clicks on a day.

    I'm trying to select all days with onDateClickListener and setupCalendar but it's not work.

    Do you have any idea? :/

    opened by bellierjonathan 4
  • New logo/icon proposal

    New logo/icon proposal

    Good day sir. I am a graphic designer and i am interested in designing a logo for your good project. I will be doing it as a gift for free. I just need your permission first before I begin my design. Hoping for your positive feedback. Thanks

    opened by mansya 3
  • Theming

    Theming

    First of all, thanks for the library :)

    Please, add more possibilities for theming:

    1. Make properties public, to allow theming from code, not xml only
    2. Do not ignore defStyleAttr from the constructor, right now it just goes to the super classes, but is ignored in the "obtainStyledAttributes" in init block
    opened by antonshkurenko 3
  • Logo Design: CrunchyCalendar

    Logo Design: CrunchyCalendar

    Hello!

    I examined your project and I saw that Crunchy Calendar has no logo design yet. I'm a graphic designer and I like to support open source projects. I would like to design a logo for your project if you interested, I will be happy to work with you! :)

    Best Regards

    Baran Pirinçal

    Graphic Designer

    opened by baranpirincal 3
  • Date Range Selection and dateSelectionFilter

    Date Range Selection and dateSelectionFilter

    Hi,

    Thanks for the great library.

    Is it possible to disallow users to select date ranges if one or more of the days in the selected range is not selectable?

    So, let's say, I'm setting my dateSelectionFilter to not allow selecting date 17/06/2019. In that case, user should not be able to select a range like between 15/06/2019 and 19/06/2019 or a wider range because that one not selectable day is in the range.

    I checked and couldn't find a solution for it. Is it possible to do that at the moment or do we need an update?

    I can still manually achieve this by after user makes a range selection, I can loop through the selected days and check them one-by-one, but just wondered if the CalendarView have this feature already.

    opened by polatolu 2
  • How to display a single month?

    How to display a single month?

    Is there a way to display a single month, such as image

    ?

    I want to create an events-like calendar, and I want the user to browse month by month, as I'll display information below the calendar.

    Is this possible / planned with Crunchy?

    opened by LeoColman 2
  • Adding events after loading JSON data

    Adding events after loading JSON data

    First of all, I really love this calendar. I have tried a lot of calendars in the past few days but this was by far the best and easiest to implement.

    I am currently having an issue with reloading the event indicators after loading JSON from the google Calendar API. The calendar runs the generateCalendarDateIndicators() function before the data is there however when I run it manually after I have the data, no new dots appear. I am currently running the code inside of its own activity instead of a fragment.

    I am imagining that I need to have the calendar refresh the UI once I have the JSON data. I have tried a few different ideas for refreshing the UI but they all lead to refreshing the entire page which puts me in a big circle.

    Any thoughts or suggestions would be well appreciated.

    opened by 3-14159jam 2
  • Performance drawbacks

    Performance drawbacks

    Try to implement calendar on nested RecyclerViews (outer RV+LinearLayoutManager hold month items & every month has its own inner RV+GridLayoutManager with its days) and compare performance of both implementation. Your variant with single RV+GridLayoutManager is much slower

    opened by smbduknow 2
  • Make example of getPreselectedDates() and getDatesIndicators() in main page

    Make example of getPreselectedDates() and getDatesIndicators() in main page

    I think it would be convenient to make an example on how these functions could be implemented.

    Indeed, I'm having problems to do a test getDatesIndicators() function, though I'm trying to do it in java code as seen here: https://stackoverflow.com/questions/63298266/how-to-implement-kotlin-interface-in-java.

    Thanks for the attention.

    opened by moylir 1
  • Impossible to customize some colors

    Impossible to customize some colors

    Hello! Why impossible to customize colors: "calendar_date_selected_background" and probably "calendar_date_today_text_color" Hardcoded light blue color not suitable for some color themes. I don’t understand how to change it.

    opened by MegaDedh 2
Releases(v2.2.0)
  • v2.2.0(Apr 15, 2021)

  • v2.1.0(Jul 21, 2020)

  • v2.0.1(Aug 9, 2019)

  • v2.0.0(May 14, 2019)

    1. Add public methods for calendar appearance customisation.
    2. Add the ability to determine whether a date is a weekend or not.
    3. Internal upgrades and improvements.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta1(Apr 7, 2019)

    1. Migrate from the legacy Support Libraries to the new AndroidX packages.
    2. Add new public method (CalendarView.updateSelectedDates) for selected dates updating.
    3. Rename SelectionMode.NON to the SelectionMode.NONE.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Aug 31, 2018)

    1. Add the ability to set the firstDayOfWeek in the setupCalendar() method.
    2. Add the ability to set a onDateLongClickListener for the Calendar dates.
    3. Add the ability to set a dateSelectionFilter that indicates whether a date available for selection or not.
    4. Add an optional year selection control that allows to quickly navigate between years.
    5. Add a calendarViewStyle attribute as a default value for defStyleAttr in the CalendarView constructor. So now it is possible to define common style for all Calendars in the application Theme file.
    6. Change visibility level to internal of some library classes and interfaces.
    7. Some internal cleanup and refactoring.
    Source code(tar.gz)
    Source code(zip)
    sample.apk(2.18 MB)
Owner
CleverPumpkin
CleverPumpkin
Android Spinner Dialog Library supported on both Java and Kotlin, Use for single or multi selection of choice

SpinnerDialog Android Spinner Dialog Library, Use for single or multi selection of choice Android UI Download To include SpinnerDialog in your project

Hamza Khan 55 Sep 15, 2022
A smart colored time selector. Users can select just free time with a handy colorful range selector.

Colored Time Range Selector A smart colored time range selector. Users can select just free time with a handy colorful range selector. Screen Shots Fe

Ehsan Mehranvari 154 Oct 3, 2022
Live Scroll Transcript with kotlin

Live Scroll Transcript This project enables Android users to automatically scroll text content in-sync with currently playing audio (For example, list

Kyle Finlinson 3 Dec 15, 2022
Workout Journal is a mobile app based on Multi-Module and Clean Architecture for those who want to track their progress over a workout and a calendar period.

Workout-Journal Workout Journal is a mobile app for those who want to track their progress over a workout and a calendar period. The app allows you to

Maxim Smolyakov 4 Oct 23, 2022
Modern Calendar View Supporting Both Hijri and Gregorian Calendars but in highly dynamic way

KCalendar-View Modern calendar view supporting both Hijri and Gregorian calendar

Ahmed Ibrahim 8 Oct 29, 2022
A highly customizable calendar library for Android, powered by RecyclerView.

CalendarView A highly customizable calendar library for Android, powered by RecyclerView. With this library, your calendar will look however you want

Kizito Nwose 3.4k Jan 3, 2023
Android calendar library provides easy to use widget with events

Kotlin-AgendaCalendarView Kotlin-AgendaCalendarView based on AgendaCalendarView Kotlin-AgendaCalendarView is a awesome calendar widget with a list of

Ognev Zair 88 Nov 21, 2022
An amazing expense tracker app, with great features and beautiful UI. Check it out!

My Expense Tracker Expense tracker app to keep your finances in order. Built entirely in Kotlin using modern architecture components. Build ??️ My Exp

Ken Ali 7 Oct 26, 2022
A beautiful Fashion Store like Android App Mock built on Jetpack Compose with compose navigation, hilt, dark theme support and google's app architecture found on uplabs Here

A beautiful Fashion Store like Android App Mock built on Jetpack Compose with compose navigation, hilt, dark theme support and google's app architecture found on uplabs Here

Puncz 87 Nov 30, 2022
EightyTwenty is life planner application with beautiful user interface.

EightyTwenty EightyTwenty is life planner application with beautiful user interface. Version 0.0.1 Add notes Add categories Add notes with image Move

Behzod Halil 3 Jul 15, 2022
A CLI tool to convert multi-module Jetpack Compose compiler metrics into beautiful HTML reports

A CLI tool to convert multi-module Jetpack Compose compiler metrics into beautiful HTML reports 1. What are Jetpack Compose compiler metrics? The Comp

Jaya Surya Thotapalli 116 Jan 3, 2023
This server uses json files to model items, entities and more.

Design Server | Simple server to design items, entities or more About this project/server: This server uses json files to model items, entities and mo

Phillipp Glanz 5 Jan 7, 2022
An awesome list that curates the best KMM libraries, tools and more.

Awesome KMM Kotlin Multiplatform Mobile (KMM) is an SDK designed to simplify creating cross-platform mobile applications. With the help of KMM, you ca

Konstantin 994 Dec 28, 2022
🔎 An HTTP inspector for Android & OkHTTP (like Charles but on device) - More Chucker than Chuck

Chucker A fork of Chuck Getting Started Features Multi-Window Configure Redact-Header️ Decode-Body Migrating Snapshots FAQ Contributing Building Ackno

Chucker Team 2.9k Dec 30, 2022
Celebrate more with this lightweight confetti particle system 🎊

Konfetti ?? ?? Celebrate more with this lightweight confetti particle system. Create realistic confetti by implementing this easy to use library. Demo

Dion Segijn 2.7k Dec 28, 2022
A FDPClient fork , It aims to add more modules.

LightClient A FDPClient fork , It aims to add more modules. You can download development version at Github-Actions , Release at Release Only running o

Ad973_ 3 Aug 26, 2021
Muhammad Ariananda 7 Jul 17, 2022
:octocat: A demo project based on MVVM architecture and material design & animations.

GithubFollows A simple demo project based on MVVM clean architecture and material design & animations. Architecture Specs & Open-source libraries Mini

Jaewoong Eum 289 Jan 4, 2023
🎬 A demo project for The Movie DB based on Kotlin MVVM architecture and material design & animations.

TheMovies A simple project for The Movie DB based on Kotlin MVVM clean architecture and material design & animations. How to build on your environment

Jaewoong Eum 419 Jan 7, 2023