Android Calendar View Example using Cosmo Calendar Library

What's in this blog? Hide

Android Calendar View Example

In this blog about Android Calendar View Example, learn how to implement the Cosmo Android Calendar Library in Android project and build a calendar app.

Android Cosmo calendar library is an advance Android Calendar Library that you can easily implement in your android studio project and with a bit of customisation can select single, multiple or a range of dates.

Here is a step by step guide to work with Android Cosmo Calendar library.

Android Calendar View Example

Getting Started

Create a blank new Android Studio project and add following new line of dependency to your build.gradle (app) file.

dependencies {
    implementation 'com.github.applikeysolutions:cosmocalendar:1.0.4'
}

Building the layout

Because its a build from scratch project, we are using a simple LinearLayout with vertical orientation. To this add, CalendarView (from Cosmo calendar library) and a button.

Here is the layout we are building:

Here is the code for the same:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <com.applikeysolutions.cosmocalendar.view.CalendarView
       android:layout_width="match_parent"
       android:id="@+id/cosmo_calendar"
       android:layout_height="wrap_content"/>

   <Button
       android:textColor="#FFF"
       android:backgroundTint="@color/colorAccent"
       android:id="@+id/selectButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textSize="15sp"
       android:padding="10dp"
       android:textAlignment="center"
       android:layout_gravity="center"
       android:layout_margin="10dp"
       android:text="Search"/>

</LinearLayout>

Let’s Code It

Now in the MainActivity.java file (in whichever activity you have inflate the view), use findViewById to attach widgets.

CalendarView calendarView;
Button button;
String startDate, endDate;

Now in the calendarView of Cosmo Calendar Library, to set first day of the week, we use following line of code:

//Set First day of the week
calendarView.setFirstDayOfWeek(Calendar.MONDAY);

To set the calendar orientation use:

//Set Orientation 0 = Horizontal | 1 = Vertical
calendarView.setCalendarOrientation(0);

To set weekend days we use:

calendarView.setWeekendDays(new HashSet(){{
    add(Calendar.SATURDAY);
    add(Calendar.SUNDAY);
}});

The Cosmo Calendar Library comes in 4 different selection type:

Single
Multiple
Range
Customized

To set your calendarView selection type, use the following line of code:

calendarView.setSelectionType(SelectionType.RANGE);

On Button selection here is how you generate result for them:

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (calendarView.getSelectionManager() instanceof RangeSelectionManager) {
            RangeSelectionManager rangeSelectionManager = (RangeSelectionManager) calendarView.getSelectionManager();
            if(rangeSelectionManager.getDays() != null) {
                startDate = rangeSelectionManager.getDays().first.toString();
                endDate = rangeSelectionManager.getDays().second.toString();
            } else {
                Toast.makeText(MainActivity.this, "Invalid Selection", Toast.LENGTH_SHORT).show();
            }
        }
    }
});

If you are planning to show a Calendar Dialog there is a code for that too:

new CalendarDialog(this, new OnDaysSelectionListener() {
         @Override
         public void onDaysSelected(List<Day> selectedDays) {
             
         }
     }).show();

Here is the complete source code for the Android Calendar View Example:

package com.example.androidcalendarview;

import androidx.appcompat.app.AppCompatActivity;

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

import com.applikeysolutions.cosmocalendar.dialog.CalendarDialog;
import com.applikeysolutions.cosmocalendar.dialog.OnDaysSelectionListener;
import com.applikeysolutions.cosmocalendar.model.Day;
import com.applikeysolutions.cosmocalendar.selection.MultipleSelectionManager;
import com.applikeysolutions.cosmocalendar.selection.RangeSelectionManager;
import com.applikeysolutions.cosmocalendar.selection.SingleSelectionManager;
import com.applikeysolutions.cosmocalendar.settings.appearance.ConnectedDayIconPosition;
import com.applikeysolutions.cosmocalendar.utils.SelectionType;
import com.applikeysolutions.cosmocalendar.view.CalendarView;

import java.util.Calendar;
import java.util.HashSet;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    CalendarView calendarView;
    Button button;
    String startDate, endDate;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        calendarView = findViewById(R.id.cosmo_calendar);
        button = findViewById(R.id.selectButton);

        //Set First day of the week
        calendarView.setFirstDayOfWeek(Calendar.MONDAY);

        //Set Orientation 0 = Horizontal | 1 = Vertical
        calendarView.setCalendarOrientation(0);

        calendarView.setWeekendDays(new HashSet(){{
            add(Calendar.SATURDAY);
            add(Calendar.SUNDAY);
        }});

        //Range Selection
        calendarView.setSelectionType(SelectionType.RANGE);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (calendarView.getSelectionManager() instanceof RangeSelectionManager) {
                    RangeSelectionManager rangeSelectionManager = (RangeSelectionManager) calendarView.getSelectionManager();
                    if(rangeSelectionManager.getDays() != null) {
                        startDate = rangeSelectionManager.getDays().first.toString();
                        endDate = rangeSelectionManager.getDays().second.toString();
                    } else {
                        Toast.makeText(MainActivity.this, "Invalid Selection", Toast.LENGTH_SHORT).show();
                    }
                }
            }
        });

    }
}

Interested in creating your own custom caledar, see here.