How to Implement Custom Calendar in Android?

Nowadays in most of the apps, we see Calendar in most of the apps for displaying birth dates or for any appointment application. Displaying the date in the app with the help of the Calendar view gives a better user experience. In this article, we are going to make a custom calendar for our android application. In this custom calendar, we have highlighted the current date and other dates which seemed important to us.

What we are going to build in this article?

Here we have added the required dependency for the custom calendar and then worked on it using the calendar view. Here is a sample video of the application which we are going to build. Note that we are going to implement this project in Java Language.

Step by Step Implementation

Step 1: Create a new project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• You can change the name of the project at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?  

Step 2: Adding required dependency-

Navigate to Gradle Scripts -> build.gradle(Module) and implement the following dependency in it-

implementation 'org.naishadhparmar.zcustomcalendar:zcustomcalendar:1.0.1'

Step 3: Working on XML files

Working with actvity_main.xml file:

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <org.naishadhparmar.zcustomcalendar.CustomCalendar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/custom_calendar"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Navigate to app > res > layout > right click > new > layout resource file and name it as absent_view.xml. Use the following code in it-

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="2dp"
    android:padding="2dp">

    <androidx.cardview.widget.CardView
        android:layout_width="40dp"
        android:layout_height="32dp"
        android:layout_margin="4dp"
        app:cardCornerRadius="4dp"
        app:cardBackgroundColor="@android:color/holo_red_light">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/text_view"
            android:textColor="@color/white"
            android:gravity="center"/>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

Navigate to app > res > layout > right click > new > layout resource file and name it as present_view.xml. Use the following code in it-

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="2dp"
    android:padding="2dp">

    <androidx.cardview.widget.CardView
        android:layout_width="40dp"
        android:layout_height="32dp"
        android:layout_margin="4dp"
        app:cardCornerRadius="4dp"
        app:cardBackgroundColor="@android:color/holo_green_light">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/text_view"
            android:textColor="@color/white"
            android:gravity="center"/>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

Navigate to app > res > layout > right click > new > layout resource file and name it as current_view.xml. Use the following code in it

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="2dp"
    android:padding="2dp">

    <androidx.cardview.widget.CardView
        android:layout_width="40dp"
        android:layout_height="32dp"
        android:layout_margin="4dp"
        app:cardCornerRadius="4dp"
        app:cardBackgroundColor="@android:color/holo_blue_light">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/text_view"
            android:textColor="@color/white"
            android:gravity="center"/>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

Navigate to app > res > layout > right click > new > layout resource file and name it as default_view.xml. Use the following code in it-

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="2dp"
    android:padding="2dp">

    <androidx.cardview.widget.CardView
        android:layout_width="40dp"
        android:layout_height="32dp"
        android:layout_margin="4dp"
        app:cardCornerRadius="4dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/text_view"
            android:textColor="@color/black"
            android:gravity="center"/>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

Step 4: Working with MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. 

Java

package com.example.customcalendar;

import androidx.appcompat.app.AppCompatActivity;

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

import org.naishadhparmar.zcustomcalendar.CustomCalendar;
import org.naishadhparmar.zcustomcalendar.OnDateSelectedListener;
import org.naishadhparmar.zcustomcalendar.Property;

import java.util.Calendar;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity {

    // Initialize variable
    CustomCalendar customCalendar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // assign variable
        customCalendar=findViewById(R.id.custom_calendar);

        // Initialize description hashmap
        HashMap<Object, Property> descHashMap=new HashMap<>();

        // Initialize default property
        Property defaultProperty=new Property();

        // Initialize default resource
        defaultProperty.layoutResource=R.layout.default_view;

        // Initialize and assign variable
        defaultProperty.dateTextViewResource=R.id.text_view;

        // Put object and property
        descHashMap.put("default",defaultProperty);

        // for current date
        Property currentProperty=new Property();
        currentProperty.layoutResource=R.layout.current_view;
        currentProperty.dateTextViewResource=R.id.text_view;
        descHashMap.put("current",currentProperty);

        // for present date
        Property presentProperty=new Property();
        presentProperty.layoutResource=R.layout.present_view;
        presentProperty.dateTextViewResource=R.id.text_view;
        descHashMap.put("present",presentProperty);

        // For absent
        Property absentProperty =new Property();
        absentProperty.layoutResource=R.layout.absent_view;
        absentProperty.dateTextViewResource=R.id.text_view;
        descHashMap.put("absent",absentProperty);

        // set desc hashmap on custom calendar
        customCalendar.setMapDescToProp(descHashMap);

        // Initialize date hashmap
        HashMap<Integer,Object> dateHashmap=new HashMap<>();

        // initialize calendar
        Calendar calendar=  Calendar.getInstance();

        // Put values
        dateHashmap.put(calendar.get(Calendar.DAY_OF_MONTH),"current");
        dateHashmap.put(1,"present");
        dateHashmap.put(2,"absent");
        dateHashmap.put(3,"present");
        dateHashmap.put(4,"absent");
        dateHashmap.put(20,"present");
        dateHashmap.put(30,"absent");

        // set date
        customCalendar.setDate(calendar,dateHashmap);

        customCalendar.setOnDateSelectedListener(new OnDateSelectedListener() {
            @Override
            public void onDateSelected(View view, Calendar selectedDate, Object desc) {
                // get string date
                String sDate=selectedDate.get(Calendar.DAY_OF_MONTH)
                        +"/" +(selectedDate.get(Calendar.MONTH)+1)
                        +"/" + selectedDate.get(Calendar.YEAR);

                // display date in toast
                Toast.makeText(getApplicationContext(),sDate, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Here is the final output of our application.

Output: