How to Create a Custom Calendar Date Picker in Android Using TimeSquare Library

Date selection is a common feature in modern Android applications.

Applications use calendar pickers for:

• Booking systems
• Travel applications
• Task scheduling
• Event management
• Hotel reservations

Although Android provides a default DatePickerDialog, many developers prefer custom calendar views for better user experience and UI flexibility.

In this tutorial, we will learn how to create a custom Calendar Date Picker in Android using the TimeSquare library.

---

What Is TimeSquare Library?

TimeSquare is an Android calendar library developed by Square.

It provides:

• Custom calendar UI
• Date range selection
• Single date selection
• Customizable calendar views

---

Features of CalendarPickerView

• Range selection support
• Minimum and maximum date support
• Custom date formatting
• Modern calendar interface
• Multiple date selection

---

Step 1 — Add Dependency

Open your build.gradle file and add:

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

Then sync your Gradle project.

---

Step 2 — Create activity_main.xml

Create the layout file.

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.squareup.timessquare.CalendarPickerView
        android:id="@+id/calendar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

---

Step 3 — Implement MainActivity.java

Open MainActivity.java and add the following code.

package com.example.timesquaredatepicker;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.Toast;

import com.squareup.timessquare.CalendarPickerView;

import java.util.Calendar;
import java.util.Date;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        Date today = new Date();

        Calendar nextYear =
                Calendar.getInstance();

        nextYear.add(Calendar.YEAR, 1);

        CalendarPickerView datePicker =
                findViewById(R.id.calendar);

        datePicker.init(
                today,
                nextYear.getTime()
        )
        .inMode(
                CalendarPickerView.SelectionMode.RANGE
        )
        .withSelectedDate(today);

        datePicker.setOnDateSelectedListener(
                new CalendarPickerView
                        .OnDateSelectedListener() {

                    @Override
                    public void onDateSelected(Date date) {

                        Calendar selectedCalendar =
                                Calendar.getInstance();

                        selectedCalendar.setTime(date);

                        String selectedDate =
                                selectedCalendar.get(
                                        Calendar.DAY_OF_MONTH
                                )
                                + "/"
                                + (
                                selectedCalendar.get(
                                        Calendar.MONTH
                                ) + 1
                        )
                                + "/"
                                + selectedCalendar.get(
                                        Calendar.YEAR
                        );

                        Toast.makeText(
                                MainActivity.this,
                                selectedDate,
                                Toast.LENGTH_SHORT
                        ).show();
                    }

                    @Override
                    public void onDateUnselected(Date date) {
                    }
                });
    }
}

---

How This Implementation Works

The workflow is:

1. Calendar initializes with current date
2. Maximum range extends to next year
3. User selects dates
4. Listener detects selected date
5. Selected date displays using Toast

---

Understanding Selection Modes

Selection Mode	Description
SINGLE	Select only one date
RANGE	Select multiple dates as a range
MULTIPLE	Select multiple independent dates

---

How Date Formatting Works

The selected date is converted using the Calendar class.

Calendar calendar = Calendar.getInstance();
calendar.setTime(date);

This helps extract:

• Day
• Month
• Year

---

How to Get Selected Date Range

For range selection, developers can retrieve selected dates using:

List<Date> selectedDates =
        datePicker.getSelectedDates();

This is useful for booking and reservation systems.

---

Common Mistakes Developers Make

1. Invalid Date Range

Minimum date should always be before maximum date.

---

2. Forgetting Date Formatting

Raw Date objects are difficult for users to understand.

---

3. Large Calendar Ranges

Very large date ranges may affect performance.

---

Modern Android Improvements

Modern Android applications can improve this implementation using:

• Kotlin
• Material 3 Date Pickers
• Jetpack Compose
• MVVM architecture
• ViewBinding

---

TimeSquare vs Default DatePickerDialog

TimeSquare	DatePickerDialog
Custom calendar UI	Default Android UI
Supports range selection	Single date only
More flexible customization	Limited UI customization

---

FAQ

Can TimeSquare select multiple dates?

Yes. It supports single, multiple, and range date selection modes.

Is TimeSquare still useful in 2026?

Yes, especially for maintaining legacy Android projects and creating custom calendar experiences.

What is the modern alternative?

Material 3 Date Pickers and Jetpack Compose date components are modern alternatives.

---

Conclusion

Custom calendar pickers improve user experience significantly in Android applications.

The TimeSquare library provides flexible date selection functionality with support for custom calendar views and date ranges.

Modern Android applications should combine lifecycle-aware architecture with modern Material Design components for scalable UI development.

---

About the Author

Salil Jha is a Full Stack and Mobile Developer with experience in Android, React Native, scalable SaaS platforms, fintech systems, and developer tooling applications.

CodeChain Dev — Build Modern Products. Solve Real Problems.