Sunday, September 7, 2025
HomeLanguagesJavaHow to create a CalendarPickerView using TimeSquare library

How to create a CalendarPickerView using TimeSquare library

This article shows how to create a calendarPickerView using TimeSquare Library. We have seen the use of calendarPickerView to select a date in many applications. With the help of this library, we can easily add a calendar in our app.

Approach:

  1. Add the support Library in build.gradle file and add dependency in the dependencies section. This library provides the inbuilt calendar widget and various functions such as to select a particular date, etc.




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

    
    
  2. Now add the following code in the activity_main.xml file. This will add the CalendarPickerView Layout in the app.

    activity_main.xml




    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
      
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
      
        <com.squareup.timessquare.CalendarPickerView
            android:id="@+id/calendar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
      
    </androidx.constraintlayout.widget.ConstraintLayout>

    
    
  3. Now add the following code in the MainActivity.java file. This will show the calendar of next one year from the current day’s date. A setOnDateSelectedListener is added in the calendar which is invoked when the user clicks on any date. The function Toasts the selected day’s date on the screen.

    MainActivity.java




    package org.neveropen.gfgcalendarPickerView;
      
    import androidx.appcompat
        .app.AppCompatActivity;
    import android.os.Bundle;
    import android.widget.Toast;
    import com.squareup
        .timessquare
        .CalendarPickerView;
    import java.text.DateFormat;
    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);
      
            // This will return us today date
            Date today = new Date();
      
            Calendar nextYear
                = Calendar.getInstance();
      
            // This will help us
            // to show date from
            // today to next year
            nextYear.add(Calendar.YEAR, 1);
      
            CalendarPickerView
                datePicker
                = findViewById(
                    R.id.calendar);
      
            // we have to initialize
            // our calendar picker view
            // so we select min date as today
            // max date as next year
            // we call getTime() method
            // because we want to
            // retrieve date from it.
            datePicker
                .init(today, nextYear.getTime())
                .inMode(CalendarPickerView
                            .SelectionMode
                            .RANGE)
                .withSelectedDate(today);
      
            // when the user select
            // or un select any date then
            // this method called automatically.
            datePicker
                .setOnDateSelectedListener(
                    new CalendarPickerView
                        .OnDateSelectedListener() {
      
                            @Override
                            public void onDateSelected(Date date)
                            {
                                // we have to format our date
                                // object that's why we are
                                // using DateFormat class.
                                String selectedDate
                                    = DateFormat
                                          .getDateInstance(
                                              DateFormat.FULL)
                                          .format(date);
                                Toast
                                    .makeText(
                                        MainActivity.this,
                                        selectedDate,
                                        Toast.LENGTH_SHORT)
                                    .show();
                            }
      
                            @Override
                            public void onDateUnselected(
                                Date date)
                            {
                            }
                        });
        }
    }

    
    

Output:

RELATED ARTICLES

Most Popular

Dominic
32271 POSTS0 COMMENTS
Milvus
82 POSTS0 COMMENTS
Nango Kala
6641 POSTS0 COMMENTS
Nicole Veronica
11807 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11870 POSTS0 COMMENTS
Shaida Kate Naidoo
6755 POSTS0 COMMENTS
Ted Musemwa
7030 POSTS0 COMMENTS
Thapelo Manthata
6705 POSTS0 COMMENTS
Umr Jansen
6721 POSTS0 COMMENTS