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.
Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!
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.
