Home

Awesome

Material-Calendar-View

Material-Calendar-View is a simple and customizable calendar widget for Android based on Material Design. The widget has two funcionalities: a date picker to select dates (available as an XML widget and a dialog) and a classic calendar. The date picker can work either as a single day picker, many days picker or range picker.

We described a simple usage of the component in this article.

34562830-637ddbae-f150-11e7-8004-9024fb84a883 device-2018-01-04-125741 device-2018-01-04-125831 device-2018-01-04-125915

Features

How to use?

Make sure you are using Java 8 in your project. If not, add below code to build.gradle file:

android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

Make sure you have defined the mavenCentral() repository in project's build.gradle file:

allprojects {
    repositories {
        mavenCentral()
    }
}

Add the dependency to module's build.gradle file:

dependencies {
    implementation 'com.applandeo:material-calendar-view:1.9.2'
}

To your XML layout file add:

<com.applandeo.materialcalendarview.CalendarView
    android:id="@+id/calendarView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Adding events with icons:

List<CalendarDay> calendarDays = new ArrayList<>();

Calendar calendar = Calendar.getInstance();
CalendarDay calendarDay = new CalendarDay(calendar);
calendarDay.setImageResource(R.drawable.sample_icon);
calendarDays.add(event);

//or if you want to specify event label color
calendarDay.setLabelColor(Color.parseColor("#228B22"));
calendarDays.add(calendarDay);

CalendarView calendarView = (CalendarView) findViewById(R.id.calendarView);
calendarView.setCalendarDays(calendarDays);

How to create icons?

Drawable with text:

You can use our utils method to create Drawable with text

CalendarUtils.getDrawableText(Context context, String text, Typeface typeface, int color, int size);

Dots indicator:

Take a look at sample_three_icons.xml and adjust it to your project

Clicks handling:

calendarView.setOnCalendarDayClickListener(new OnCalendarDayClickListener() {
    @Override
    public void onDayClick(CalendarDay calendarDay) {
        Calendar clickedDayCalendar = calendarDay.getCalendar();    
    }
});

...or long click:

calendarView.setOnCalendarDayLongClickListener(new OnCalendarDayLongClickListener() {
    @Override
    public void onDayLongClick(CalendarDay calendarDay) {
        Calendar clickedDayCalendar = calendarDay.getCalendar();
    }
});

Getting a selected days in the picker mode:

If you want to get all selected days, especially if you use multi date or range picker you should use the following code:

List<Calendar> selectedDates = calendarView.getSelectedDates();

...or if you want to get the first selected day, for example in case of using single date picker, you can use:

Calendar selectedDate = calendarView.getFirstSelectedDate();

Setting a current date:

Calendar calendar = Calendar.getInstance();
calendar.set(2019, 7, 5);

calendarView.setDate(calendar);

Setting minumum and maximum dates:

Calendar min = Calendar.getInstance();
Calendar max = Calendar.getInstance();

calendarView.setMinimumDate(min);
calendarView.setMaximumDate(max);

Setting disabled dates:

List<Calendar> calendars = new ArrayList<>();
calendarView.setDisabledDays(calendars);

Setting highlighted days:

List<Calendar> calendars = new ArrayList<>();
calendarView.setHighlightedDays(calendars);

Setting selected dates:

List<Calendar> calendars = new ArrayList<>();
calendarView.setSelectedDates(calendars);

...or if you want to remove selected dates:

calendarView.clearSelectedDays();

Caution!

Previous and forward page change listeners:

calendarView.setOnPreviousPageChangeListener(new OnCalendarPageChangeListener() {
    @Override
    public void onChange() {
        ...
    }
});

calendarView.setOnForwardPageChangeListener(new OnCalendarPageChangeListener() {
    @Override
    public void onChange() {
        ...
    }
});

Customization

If you want to use calendar in the picker mode, you have to use the following tags:

If you want to display event icons in the picker mode, add:

Colors customization:

...or in code:

CalendarView calendarView = (CalendarView) findViewById(R.id.calendarView);
calendarView.setHeaderColor([color]);
calendarView.setHeaderLabelColor([color]);
calendarView.setForwardButtonImage([drawable]);
calendarView.setPreviousButtonImage([drawable]);

Custom view for days cells:

To use custom view for calendar cells create XML file (like in example below) and set it using setCalendarDayLayout(@LayoutRes layout: Int) method. XML file must contain TextView with id dayLabel and can contain ImageView with id dayIcon. Do not set colors or textStyle here, it will be overwritten.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:orientation="vertical">

    <!--REQUIRED-->
    <TextView
        android:id="@+id/dayLabel"
        ... />

    <!--CAN BE SKIPPED-->
    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/dayIcon"
        ... />

</LinearLayout>

Customization of specific cells:

If you want to customize specyfic cells create list of CalendarDay objects and pass it by setCalendarDays() method like in example below:

val list = listOf(
    CalendarDay(Calendar.getInstance()).apply { 
        labelColor = [color resource]
        backgroundResource = [drawable resource]
        backgroundDrawable = [drawable]
        selectedLabelColor = [color resource]
        selectedBackgroundResource = [drawable resource]
        selectedBackgroundDrawable = [drawable]
    }
)

calendarView.setCalendarDays(list)

In the future CalendarDay will replace EventDay.

Customized font:

Disable month swipe:

If you want to disable the swipe gesture to change the month, you have to use the following tag:

...or in code:

calendarView.setSwipeEnabled(false);

First day of a week:

If you want to change default first day of week:

...or in code:

calendarView.setFirstDayOfWeek([CalendarWeekDay]);

By default the first day is monday or sunday depending on user location.

Translations:

To translate months names, abbreviations of days, "TODAY", "OK" and "CANCEL" buttons, just add below tags to your strings.xml file:

<string name="material_calendar_monday">M</string>
<string name="material_calendar_tuesday">T</string>
<string name="material_calendar_wednesday">W</string>
<string name="material_calendar_thursday">T</string>
<string name="material_calendar_friday">F</string>
<string name="material_calendar_saturday">S</string>
<string name="material_calendar_sunday">S</string>

<array name="material_calendar_months_array">
    <item>January</item>
    <item>February</item>
    <item>March</item>
    <item>April</item>
    <item>May</item>
    <item>June</item>
    <item>July</item>
    <item>August</item>
    <item>September</item>
    <item>October</item>
    <item>November</item>
    <item>December</item>
</array>

<string name="material_calendar_today_button">Today</string>
<string name="material_calendar_positive_button">OK</string>
<string name="material_calendar_negative_button">Cancel</string>

Date Picker Dialog

DatePickerBuilder builder = new DatePickerBuilder(this, listener)
                .pickerType(CalendarView.ONE_DAY_PICKER);

DatePicker datePicker = builder.build();
datePicker.show();

To use another picker type replace CalendarView.ONE_DAY_PICKER with CalendarView.MANY_DAYS_PICKER or CalendarView.RANGE_PICKER.

Getting date handling:

private OnSelectDateListener listener = new OnSelectDateListener() {
    @Override
    public void onSelect(List<Calendar> calendars) {
        ...
    }
};

Customization:

new DatePickerBuilder(this, listener)
        .date(Calendar.getInstance()) // Initial date as Calendar object
        .minimumDate(Calendar.getInstance()) // Minimum available date
        .maximumDate(Calendar.getInstance()) // Maximum available date
        .disabledDays(List<Calendar>) /// List of disabled days
        .headerColor(R.color.color) // Color of the dialog header
        .headerLabelColor(R.color.color) // Color of the header label
        .previousButtonSrc(R.drawable.drawable) // Custom drawable of the previous arrow
        .forwardButtonSrc(R.drawable.drawable) // Custom drawable of the forward arrow
        .previousPageChangeListener(new OnCalendarPageChangeListener(){}) // Listener called when scroll to the previous page
        .forwardPageChangeListener(new OnCalendarPageChangeListener(){}) // Listener called when scroll to the next page
        .abbreviationsBarColor(R.color.color) // Color of bar with day symbols
        .abbreviationsLabelsColor(R.color.color) // Color of symbol labels
        .abbreviationsBarVisibility(int) // Visibility of abbreviations bar
        .pagesColor(R.color.sampleLighter) // Color of the calendar background
        .selectionColor(R.color.color) // Color of the selection circle
        .selectionLabelColor(R.color.color) // Color of the label in the circle
        .daysLabelsColor(R.color.color) // Color of days numbers
        .aotherMonthsDaysLabelsColor(R.color.color) // Color of visible days numbers from previous and next month page
        .disabledDaysLabelsColor(R.color.color) // Color of disabled days numbers
        .highlightedDaysLabelsColor(R.color.color) // Color of highlighted days numbers
        .todayColor(R.color.color) // Color of the present day background
        .todayLabelColor(R.color.color) // Color of the today number
        .dialogButtonsColor(R.color.color); // Color of "Cancel" and "OK" buttons
        .maximumDaysRange(int) // Maximum number of selectable days in range mode
        .navigationVisibility(int) // Navigation buttons visibility
        .typefaceSrc(R.font.sample_font) // Calendar font
        .todayTypefaceSrc(R.font.sample_font_bold) // (Optional) calendar today date font
        .firstDayOfWeek(CalendarWeekDay) // Default is monday or sunday depending on user location

Changelog

Version 1.9.0-rc*:

Version 1.8.0-rc*

Version 1.7.0:

Version 1.6.0:

Version 1.5.0:

Version 1.4.0:

Version 1.3.2:

Version 1.3.1:

Version 1.3.0:

Version 1.2.0:

Version 1.1.1:

Version 1.1.0:

Version 1.0.1:

Version 1.0.0:

Get in touch

It would be great if you decide to use our component in your project. It’s open source, feel free. Write to us at hi@applandeo.com if you want to be listed and we will include your app in our repo. If you have any questions or suggestions just let us know.

Apps using Material-Calendar-View:

License

Copyright 2017, Applandeo sp. z o.o.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.