Android multi datepicker calendar example

In android using DatePickerDialog class we can display default calendar and we can allow user to pick one date from the calendar. What if we want to allow the user to select multiple dates or a range of dates from the calendar. Here in this example we will see how to implement a multi datepicker in android using time-square library.

If you are not familiar with how to implement a simple datepicker in android, please refer the following article Android datepicker example which will explain how to implement a simple date picker fragment in android.


  • Create new project in android studio
  • Configure the build.gradle file
  • Add the calendar picker widget to layout
  • Implement the java code.
  • Customization of colours

Expected output


Create New project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.

Configure the build.gradle file

As i told above ,this application is developed using a library. So it is important to access the library files in our project. For that all you have to do is to add the following line to your build.gradle and sync the project

compile 'com.squareup:android-times-square:1.6.5@aar'

Add the calendar picker widget to layout

In this example the layout will contain a calendar widget and a button which display all selected dates on onClick. So add the following code to your layout file for creating button and calendar in your  layout.


    android:text="Display Dates"

Implement the java code

Now add the following code to your activity’s class file to get the calendar functioning.The code should be placed inside the onCreate function or some functions which is being called inside onCreate function. Since we need to implement a range calendar we are setting calendar view mode as RANGE in which you can select multiple dates

final CalendarPickerView calendar_view = (CalendarPickerView) findViewById(;
//getting current
Calendar nextYear = Calendar.getInstance();
nextYear.add(Calendar.YEAR, 1);
Date today = new Date();

//add one year to calendar from todays date
calendar_view.init(today, nextYear.getTime())

The above code will display the calendar and allow you to click and select the multiple days. But if you want to add some functionality while the user is clicking on the date you need set a date selected listener. For implementing the date selected listener just add the following code under the above code which will give actions while user is selecting/unselecting a date.

//action while clicking on a date
calendar_view.setOnDateSelectedListener(new CalendarPickerView.OnDateSelectedListener() {
    public void onDateSelected(Date date) {

        Toast.makeText(getApplicationContext(),"Selected Date is : " +date.toString(),Toast.LENGTH_SHORT).show();


    public void onDateUnselected(Date date) {

        Toast.makeText(getApplicationContext(),"UnSelected Date is : " +date.toString(),Toast.LENGTH_SHORT).show();

Once the user selected all the dates in the multi date picker calendar we need to first fetch all the dates he selected and may be we need to display it or save it into our database. So the following code will help you to get all the selected dates and store it into a list.

//fetch dates
List<Date> dates = calendar_view.getSelectedDates();

Now we have all the selected dates in our list next step will be specific to your requirement. Some app needs to display all the selected dates somewhere ,some app just want to save all dates in database. So here am writing the code for just displaying all selected dates as a toast message. We already added a button in our layout file. We will refer that button in java file and inside the onclick of that button we will implement the code to disaplay all dates aas toast .

//Displaying all selected dates while clicking on a button
Button btn_show_dates = (Button) findViewById(;
btn_show_dates.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {

        for (int i = 0; i< calendar_view.getSelectedDates().size();i++){

            //here you can fetch all dates


Customization of colors

In this step we will see how to customize certain color codes in the above multi date picker calendar. The customizing colors is not very complex .You just need to add some tags with specific color codes in to your color.xml file

How to change color of selected dates

To change the color of selected dates you need to add the following code into your color.xml file by replacing the color code with color you required

<color name="calendar_selected_day_bg">#FF4081</color>

How to change color of range dates

Suppose if you have selected a range of dates and you need to have some other color code for intermediate dates of start date and end date ,then you need to add the following code into your color.xml file by replacing the color code with color you required

<color name="calendar_selected_range_bg">#FF4081</color>

Other tags which can be customized is listed below. You can use this based on your requirement.

<color name="calendar_active_month_bg">your color code</color>
<color name="calendar_bg">your color code</color>
<color name="calendar_divider">your color code</color>
<color name="calendar_inactive_month_bg">your color code</color>
<color name="calendar_highlighted_day_bg">your color code</color>
<color name="calendar_text_inactive">your color code</color>
<color name="calendar_text_active">your color code</color>
<color name="calendar_text_selected">your color code</color>
<color name="calendar_text_unselectable">your color code</color>

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.


  1. Rupesh kumar singh November 11, 2019 Reply

Add a Comment

Your email address will not be published. Required fields are marked *