A Material design back port of Android's CalendarView

Last update: May 17, 2022

Material Calendar View

Android Arsenal Travis branch

A Material design back port of Android's CalendarView. The goal is to have a Material look and feel, rather than 100% parity with the platform's implementation.

Demo Screen Capture

Installation

Step 1. Add the JitPack repository to your build file

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

Step 2. Add the dependency

dependencies {
  implementation 'com.github.prolificinteractive:material-calendarview:${version}'
}

Usage

  1. Add MaterialCalendarView into your layouts or view hierarchy.
  2. Set a OnDateSelectedListener or call MaterialCalendarView.getSelectedDates() when you need it.

Javadoc Available Here

Example:

<com.prolificinteractive.materialcalendarview.MaterialCalendarView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/calendarView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:mcv_showOtherDates="all"
    app:mcv_selectionColor="#00F"
    />

Documentation

Make sure to check all the documentation available here.

Customization

One of the aims of this library is to be customizable. The many options include:

Events, Highlighting, Custom Selectors, and More!

All of this and more can be done via the decorator api. Please check out the decorator documentation.

Recent Changes

Major Change in 2.0

Material CalendarView 2.0 comes in with a major change into the core of it's API, we transitioned from using java.util.Calendar to java.time.LocalDate. Also that should not impact the public api (we are still using CalendarDay), both Calendar and LocalDate function a little bit differently. One example of that: Months are now indexed from 1 (January) to 12 (December). You can access from the LocalDate from CalendarDay using getDate().

Major Change in 1.6.0

Also this release doesn't have any break changes, it provides significant improvements to the widget. More customization have been added for the user (custom fonts, long click listener, show/hide weekdays) as well as various fixes, improvements to the sample app, and general cleanup. Make sure to check the CHANGELOG and the release section for more details.

Major Change in 1.5.0

We recently updated to the latest gradle and decided to move over our libraries to the hosting service Jitpack. Please refer to the installation section for more details.

Major Change in 1.4.0

  • Breaking Change: setFirstDayOfWeek, setMin/MaxDate, and setCalendarDisplayMode are moved to a State object. This was necessary because it was unclear that these were not simple setters--individually, they were side effecting and triggered full adapter/date range recalculations. Typical usage of the view involves setting all these invariants up front during onCreate and it was unknown to the user that setting all 4 of these would create a lot of waste. Not to mention certain things were side effecting--some would reset the current day or selected date. As a result, the same 4 methods called in a different order could result in a different state, which is bad.

    For most cases you will simply need to replace setting those invariants with:

    mcv.state().edit()
      .setFirstDayOfWeek(Calendar.WEDNESDAY)
      .setMinimumDate(CalendarDay.from(2016, 4, 3))
      .setMaximumDate(CalendarDay.from(2016, 5, 12))
      .setCalendarDisplayMode(CalendarMode.WEEKS)
      .commit();

    mcv.state().edit() will retain previously set values; mcv.newState() will create a new state using default values. Calling commit will trigger the rebuild of adapters and date ranges. It is recommended these state changes occur as the first modification to MCV (before configuring anything else like current date or selected date); we make no guarantee those modifications will be retained when the state is modified.

    See CUSTOMIZATION_BUILDER for usage details.

  • New: setSelectionMode(SELECTION_MODE_RANGE) was added to allow 2 dates to be selected and have the entire range of dates selected. Much thanks to papageorgiouk for his work on this feature.

See other changes in the CHANGELOG.

Contributing

Would you like to contribute? Fork us and send a pull request! Be sure to checkout our issues first.

License

Material Calendar View is Copyright (c) 2018 Prolific Interactive. It may be redistributed under the terms specified in the LICENSE file.

Maintainers

prolific

Material Calendar View is maintained and funded by Prolific Interactive. The names and logos are trademarks of Prolific Interactive.

GitHub

https://github.com/prolificinteractive/material-calendarview
Comments
  • 1. Horizontal tile spacing

    Hi @dandc87, I just started experimenting with the library (versions 0.8.1 and 1.0.0-beta1) and I think it's awesome! I'm wondering if it's possible to set the tile size and still make the view fill all of the horizontal space. Currently, if I set the tile size to something smaller than the default 44dp, the tiles group together in the center, leaving padding on the left and right sides of the calendar. Basically, I'm trying to reduce the overall height of the calendar view, while still making it fill the horizontal space of the screen.

    This is what I'm doing in XML:

    <com.prolificinteractive.materialcalendarview.MaterialCalendarView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    

    And then in Java:

    calendarView.setTileSizeDp(38);
    

    Here's a screenshot of what the calendar looks like:

    screenshot_2015-09-20-17-54-19

    And here's a screenshot of roughly what I'm going for:

    screenshot_2015-09-20-18-00-00

    Thanks in advance! -Dan

    Reviewed by dsn5ft at 2015-09-20 22:21
  • 2. How can i display Week number

    I want to implement to display week number on top of date number or lefts side of calendar. First approach(display on top of number): - i couldn`t give various style to week number and date number.Both of them has the same last style 1111

    Second approach - dont have any idea yet

    http://sanziro.com/wp-content/uploads/2015/07/display-week-number-in-calendar-app-for-ios.png

    Reviewed by nAkhmedov at 2016-11-09 12:01
  • 3. setCalendarDisplayMode(CalendarMode.WEEKS) wrong week when Date selected

    When you "collapse" the Calendar with .setCalendarDisplayMode(CalendarMode.WEEKS), the week displayed is one week to early, when using Monday as first day of the week. (Only working when i select the Sunday) [BUG]

    Reviewed by ghost at 2016-01-28 15:17
  • 4. Circle Background is too big

    Hi I am trying to reduce the circle background of a selected date. The gray circle of the date selected by default is getting too big, can i decrease the circle size of the selected day?

    Any help would be appreciated ThankYou

    Reviewed by Greenikl at 2017-04-04 12:56
  • 5. ClassCastException - WeekView to MonthView

    I am using this calendar inside row on RecyclerView. I am setting calendar's display mode to CalendarMode.WEEKS. This row is on top of list.

    I scroll down the list and then on the top of the list, then there is class cast exception.

    I am using view holder pattern. Imo this is viewholder fault.

    java.lang.ClassCastException: com.prolificinteractive.materialcalendarview.WeekView cannot be cast to com.prolificinteractive.materialcalendarview.MonthView
                                                                                    at com.prolificinteractive.materialcalendarview.CalendarPagerAdapter.getItemPosition(CalendarPagerAdapter.java:125)
                                                                                    at com.prolificinteractive.materialcalendarview.WeekPagerAdapter.getItemPosition(WeekPagerAdapter.java:9) 
    

    Any solutions?

    Reviewed by kostaniakm at 2016-05-09 14:38
  • 6. Selecting a range of dates

    Greetings, how can I select a range of dates by clicking the first and last date? Example: I want to mark an event from jan 1 to fab 10 by clicking in jan 1 and then fabruary 10. Thanks

    Reviewed by curliq at 2016-03-11 12:32
  • 7. How to DisableDecorator to one days of week?

    I need DisableDecorator to one days of week. for example disale Decorator for all Monday days. How to do it using method

       private class PrimeDayDisableDecorator implements DayViewDecorator {
    
       }  
    

    thanks

    Reviewed by erioana at 2016-02-28 03:30
  • 8. Option to disable swiping between months

    I really like the library, but I have a simple UX issue when I try to integrate it in my application. I would like to display the calendar in a viewpager, so the swiping is used to change pages. But this lib uses the swipe gesture to change between months, so it currently behaves really odd. The arrows at the top would be sufficent to change months in my use case, so could you provide an option (either from code or from xml) to disable the lib's listening to swipe gestures?

    Thank you in advance.

    Reviewed by balazsgerlei at 2015-08-25 18:53
  • 9. (solved) How to add multiple event dots per day

    [Fairly new ti github, if this is not the correct way of spreading knowledge, do tell]

    First off, you need a custom DotSpan class, which is just ever so slightly altered:

    public class CustmMultipleDotSpan implements LineBackgroundSpan {
    
    
        private final float radius;
        private int[] color = new int[0];
    
    
        public CustmMultipleDotSpan() {
            this.radius = DEFAULT_RADIUS;
            this.color[0] = 0;
        }
    
    
        public CustmMultipleDotSpan(int color) {
            this.radius = DEFAULT_RADIUS;
            this.color[0] = 0;
        }
    
    
        public CustmMultipleDotSpan(float radius) {
            this.radius = radius;
            this.color[0] = 0;
        }
    
    
        public CustmMultipleDotSpan(float radius, int[] color) {
            this.radius = radius;
            this.color = color;
        }
    
        @Override
        public void drawBackground(
                Canvas canvas, Paint paint,
                int left, int right, int top, int baseline, int bottom,
                CharSequence charSequence,
                int start, int end, int lineNum
        ) {
    
            int total = color.length > 5 ? 5 : color.length;
            int leftMost = (total - 1) * -10;
    
            for (int i = 0; i < total; i++) {
                int oldColor = paint.getColor();
                if (color[i] != 0) {
                    paint.setColor(color[i]);
                }
                canvas.drawCircle((left + right) / 2 - leftMost, bottom + radius, radius, paint);
                paint.setColor(oldColor);
                leftMost = leftMost + 20;
            }
        }
    }
    

    You will also need an ever so slightly altered EventDecorator:

    public class EventDecorator implements DayViewDecorator {
    
        private final int[] colors;
        private final HashSet<CalendarDay> dates;
    
    
        public EventDecorator(Collection<CalendarDay> dates, int[] colors) {
            //this.color = color;
            this.dates = new HashSet<>(dates);
    
            this.colors = colors;
    
        }
    
    
        public EventDecorator(List<MainActivity.Filter> filteredEvents) {
            //this.color = color;
    
            this.dates = new HashSet<>(filteredEvents.get(0).calDayArr);
            int[] colors = new int[1];
            colors[0] = filteredEvents.get(0).color;
            this.colors = colors;
    
        }
    
        @Override
        public boolean shouldDecorate(CalendarDay day) {
            return dates.contains(day);
        }
    
        @Override
        public void decorate(DayViewFacade view) {
    
            view.addSpan((new CustmMultipleDotSpan(5,colors)));
    
        }
    
    
    }
    

    And that is basically it.

    Now find your calendarview in your activity, and give it some dates, and colors to show on those dates. In my particular case, I sort my dates in 5 different lists based on the amount of events per day, so you will end up with something like

    calendarView.addDecorator(new EventDecorator(threeEventDays,threeColors)); Where threeEventDays is a Collection of CalendarDay and threeColors is an int array int[] threeColors = { Color.rgb(0, 0, 255), Color.rgb(0, 255, 0), Color.rgb(255, 0, 0)};

    It's nowhere near as ideal as it should be, but what it does is it expects an array of colors. Calculates the leftmost position, based on the array size, so for a size one, the left most position is the middle dot we all know and love. For size 2 the left most position is -10, for size 3 it's -20 and so on. Then loops through and paints the dots.

    It's limited to 5 event dots as it gets quite ugly above that, and though currently not on my roadmap, if it turns out to be a requirement I might add support for a second line of dots.

    Reviewed by teneketo at 2018-04-16 06:43
  • 10. Cannot create variant 'android-lint' after configuration

    I'm trying to run Sample in android studio 3.1 canary 4 and get the error: Error: Can not create variant 'android-lint' after configuration ': library: debugRuntimeElements' has been resolved

    Reviewed by KORuL at 2017-11-27 19:12
  • 11. Add other month days until week row is filled

    I'd like to show other month dates, but I don't want to add an entire row with other month days. Something like this

    image

    Currently, mcv_showOtherDates fills the 6 week rows with CalendarDay, but it would be nice if we could specify a new showOtherDates mode, for example fill_week

    I guess this could be done by creating a Decorator in onDateSelected and dynamically calculating which dates fit, but it would be nice if the library provided an easier way

    Reviewed by Maragues at 2016-06-16 16:20
  • 12. first time initialize the calendar, selected circle will expand to parent width and height

    when setTileWidth or setTileHeight, and setSelectedDate the first time we initialize the calendar, the selected circle expands to view width and height, like oval shape, but after a while, it returns to a normal circle.

    I have tried using DayViewDecorator, and set setSelectionDrawable for custom drawable with fixed size, but no luck.

    Reviewed by jerrylkc at 2022-02-22 04:51
  • 13. Saving and accessing decorators

    I have implemented code through which a user can add decorators through a button click. But how do I permanently save it. Here is my decorator class:

    class RedMarkDecorator(context: MainActivity?, currentDay: CalendarDay?) : DayViewDecorator {
            var myDay = currentDay
            var color = RED
            override fun shouldDecorate(day: CalendarDay?): Boolean {
                return day == myDay
            }
    
            override fun decorate(view: DayViewFacade) {
                view.addSpan(DotSpan(7f, color))
            }
        }
    

    onDateSelected:

    override fun onDateSelected(
         widget: MaterialCalendarView,
         date: CalendarDay,
         selected: Boolean
     ) {
         // Toast.makeText(context,"$date",Toast.LENGTH_SHORT).show()
         redButton.isVisible = true
         greenButton.isVisible = true
         clearButton.isVisible = true
         val thisDate = calendarView.selectedDate?.date
         val date: CalendarDay = CalendarDay.from(thisDate)
         redButton.setOnClickListener {
             calendarView.addDecorator(RedMarkDecorator(myActivity, date))
         }
    
         greenButton.setOnClickListener {
             calendarView.addDecorator(GreenMarkDecorator(myActivity, date))
         }
    
         clearButton.setOnClickListener {
             calendarView.removeDecorator(RedMarkDecorator(myActivity,date))
             Toast.makeText(context,"cancel clicked",Toast.LENGTH_SHORT).show()
         }
     }
    
    
    Reviewed by dexter-ops at 2022-01-22 04:31
  • 14. calendars in recycler view

    Hi i have a recycler view containing multiple calendars and for each calendar i am setting different min and max date. But when i select a date in any calendar then it always takes min max date of first calendar. do you have any idea why it is behaving like that. thanks

    Reviewed by ramanpreet0899 at 2021-10-21 01:51
  • 15. How to highligh the current date as the view loads in .

    ok so i set the calendarview to week mod which works perfectly. good job guys.

    all i wanna do now is whenever i load the view, the user gets to see ( TODAYS DATE ) highlighted .

    Reviewed by HatzoriHanzo at 2021-10-08 20:40
πŸ“… Material Design Calendar compatible with API 11+
πŸ“… Material Design Calendar compatible with API 11+

> Prettier and simpler Material Design CalendarView MaterialCalendarView is a prettier and simpler, material design calendar that allows full customiz

Dec 30, 2021
Android interval timer app using compose + compose navigation, dagger hilt, room, kotlin coroutines + flow and mvvm design pattern.
Android interval timer app using compose + compose navigation, dagger hilt,  room, kotlin coroutines + flow and mvvm design pattern.

What's InTime? ⏳ InTime is an interval timer application using android jetpack components and a long running service. The purpose of this project is t

Feb 18, 2022
Kalendar - A calendar to integrate Calendar with Custom design in your jetpack compose project
Kalendar - A calendar to integrate Calendar with Custom design in your jetpack compose project

Kalendar - An Elementary Compose Calendar. This is a calendar to integrate Calen

May 13, 2022
A material Date Range Picker based on wdullaers MaterialDateTimePicker
A material Date Range Picker based on wdullaers MaterialDateTimePicker

Material Date and Time Picker with Range Selection Credits to the original amazing material date picker library by wdullaer - https://github.com/wdull

May 19, 2022
A material Date Range Picker based on wdullaers MaterialDateTimePicker
A material Date Range Picker based on wdullaers MaterialDateTimePicker

Material Date and Time Picker with Range Selection Credits to the original amazing material date picker library by wdullaer - https://github.com/wdull

May 19, 2022
A material-styled android view that provisions picking of a date, time & recurrence option, all from a single user-interface.
A material-styled android view that provisions picking of a date, time & recurrence option, all from a single user-interface.

SublimePicker A customizable view that provisions picking of a date, time & recurrence option, all from a single user-interface. You can also view 'Su

May 21, 2022
Monet color system with Material You

Monet Google's Monet color system (Android 12 Beta 2) library. Usage Jetpack Compose Generate Monet color palette monetColorsOf(Color, darkTheme) Loca

Feb 16, 2022
A Material design back port of Android's CalendarView
A Material design back port of Android's CalendarView

Material Calendar View A Material design back port of Android's CalendarView. The goal is to have a Material look and feel, rather than 100% parity wi

May 17, 2022
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar

#Android-LollipopShowcase This is a simple showcase to show off Android's all new Material Design and some other cool new stuff which is (new) in Andr

Apr 17, 2022
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar

#Android-LollipopShowcase This is a simple showcase to show off Android's all new Material Design and some other cool new stuff which is (new) in Andr

Apr 17, 2022
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar

#Android-LollipopShowcase This is a simple showcase to show off Android's all new Material Design and some other cool new stuff which is (new) in Andr

Apr 17, 2022
A simple library which gives you custom design CalendarView with dialog functionality and event handlers.
A simple library which gives you custom design CalendarView with dialog functionality and event handlers.

CalendarView A simple library which gives you custom design CalendarView with dialog functionality and event handlers. 1: CalendarView Demo Screen 1.1

Jan 4, 2022
Visual back-port of the rotating drawer-to-arrow drawable from Android L
Visual back-port of the rotating drawer-to-arrow drawable from Android L

DrawerArrowDrawable A simple drawable backport of the new drawer-indicator/back-arrow rotating drawable from the upcoming Android L. License Copyright

Apr 17, 2022
Visual back-port of the rotating drawer-to-arrow drawable from Android L
Visual back-port of the rotating drawer-to-arrow drawable from Android L

DrawerArrowDrawable A simple drawable backport of the new drawer-indicator/back-arrow rotating drawable from the upcoming Android L. License Copyright

Apr 17, 2022
Androids EditText that animates the typed text. EditText is extended to create AnimatedEditText and a PinEntryEditText.
Androids EditText that animates the typed text. EditText is extended to create AnimatedEditText and a PinEntryEditText.

AnimatedEditText for Android This repository contains AnimatedEditText and TextDrawable all of which extend the behaviour of EditText and implement fe

May 17, 2022
Material Design text field that comes in a box, based on (OLD) Google Material Design guidelines.
Material Design text field that comes in a box, based on (OLD) Google Material Design guidelines.

TextFieldBoxes A new Material Design text field that comes in a box, based on Google Material Design guidelines. ???? δΈ­ζ–‡ηœ‹θΏ™ι‡Œ UPDATE NOTICE 1.4.5 Releas

May 2, 2022
CuteToast is an Material Design Custom Toast for Android | Custom Material Design Toast
CuteToast is an Material Design Custom Toast for Android | Custom Material Design Toast

CuteToast is an Android Custom Toast library that could be used instead of Default Toast. It does everything as Toast but with some extra spice.

Dec 14, 2021
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html

Material Bottom Navigation Library Lightweight Bottom Navigation library component inspired by the Google Material Design Guidelines at https://www.go

May 18, 2022
Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.
Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.

Material Design Dimens Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library. Dimens Pattern: R.di

May 4, 2022
πŸ“± Android Library to implement Rich, Beautiful, Stylish 😍 Material Navigation View for your project with Material Design Guidelines. Easy to use.
πŸ“± Android Library to implement Rich, Beautiful, Stylish 😍 Material Navigation View for your project with Material Design Guidelines. Easy to use.

Material NavigationView for Android ?? ?? Android Library to implement Rich, Beautiful Material Navigation View for your project with Material Design

May 16, 2022