Tutorials Android Custom Calendar View Library in Android

Custom Calendar View Library in Android

The CustomCalendarView provides an easy and customizable option to create a Calendar. It displays the days of a month in a grid layout and allows navigating between months.

1. Custom Calendar View Features

Currently it allows the following features:

  • Next and previous month navigation
  • Allow various customization including background color for day, week and title
  • Set custom typeface using setCustomTypeFace() method.
  • Show hide next previous month overflow days
  • Set custom day options for start day of week. By default it is set to Calendar.SUNDAY
  • Unlimited customizations for day of the month using custom Decorators.
  • Allow you to handle event when user changes month and day selection.

Custom Calendar View Android

2. Library Compatibility

This library is compatible from API 14.

3. Add CustomCalendarView Library

To use the CustomCalendarView in your application, you first need to add the library to your application. You can do this by either from Gradle, Maven or by directly downloading the source code form GitHub.

Gradle

Step 1. Add the JitPack repository to your build file

Step-1 Add it in your build.gradle at the end of repositories:

repositories {
    maven { url "https://jitpack.io" }
}

Step-2 Add the dependency in the form

dependencies {
    compile 'com.github.npanigrahy:Custom-Calendar-View:v1.1'
}

Maven

<repository>
     <id>jitpack.io</id>
     <url>https://jitpack.io</url>
</repository>

Step 2. Add the dependency in the form

<dependency>
     <groupId>com.github.npanigrahy</groupId>
     <artifactId>Custom-Calendar-View</artifactId>
     <version>v1.1</version>
</dependency>

Sbt

Step-1 Add it in your build.sbt at the end of resolvers:

resolvers += "jitpack" at "https://jitpack.io"

Step-2 Add the dependency in the form

libraryDependencies += "com.github.npanigrahy" % "Custom-Calendar-View" % "v1.1"

4. Using CustomCalendarView Library

The GitHub project source includes a sample application, that is used for demonstrating the various features currently supported by this library. Once the library is added to your project, you can include the CustomCalendarView into your activity/fragment layout using the following code snippets.

<com.stacktips.view.CustomCalendarView
	android:id="@+id/calendar_view"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="@color/off_white">
</com.stacktips.view.CustomCalendarView>

The above code snippet will show the simple Calendar View with default design. Now, you can use the following attributes, to customize the appearance of calendar.

<com.stacktips.view.CustomCalendarView
	android:id="@+id/calendar_view"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="@color/off_white"
	app:calendarBackgroundColor="@color/off_white"
	app:calendarTitleTextColor="@color/black"
	app:currentDayOfMonthColor="@color/blue"
	app:dayOfMonthTextColor="@color/black"
	app:dayOfWeekTextColor="@color/black"
	app:disabledDayBackgroundColor="@color/off_white"
	app:disabledDayTextColor="@color/grey"
	app:selectedDayBackgroundColor="@color/blue"
	app:titleLayoutBackgroundColor="@color/white"
	app:weekLayoutBackgroundColor="@color/white">
</com.stacktips.view.CustomCalendarView>

Let us now, initialize the calendar view to control the various other appearance and behavior of calendar using the following methods.

//Initialize CustomCalendarView from layout
calendarView = (CustomCalendarView) findViewById(R.id.calendar_view);

//Initialize calendar with date
Calendar currentCalendar = Calendar.getInstance(Locale.getDefault());

//Show Monday as first date of week
calendarView.setFirstDayOfWeek(Calendar.MONDAY);

//Show/hide overflow days of a month
calendarView.setShowOverflowDate(false);

//call refreshCalendar to update calendar the view
calendarView.refreshCalendar(currentCalendar);

//Handling custom calendar events
calendarView.setCalendarListener(new CalendarListener() {
    @Override
    public void onDateSelected(Date date) {
        SimpleDateFormat df = new SimpleDateFormat("dd-MM-yyyy");
        Toast.makeText(MainActivity.this, df.format(date), Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onMonthChanged(Date date) {
        SimpleDateFormat df = new SimpleDateFormat("MM-yyyy");
        Toast.makeText(MainActivity.this, df.format(date), Toast.LENGTH_SHORT).show();
    }
});

5. Using Custom TypeFace

//Setting custom font
final Typeface typeface = Typeface.createFromAsset(getAssets(), "fonts/Arch_Rival_Bold.ttf");
if (null != typeface) {
    calendarView.setCustomTypeface(typeface);
    calendarView.refreshCalendar(currentCalendar);
}

Custom Calendar View Library in Android Custom Font

6. Using Day Decorators

Example2: How to Disable Past Dates in CustomCalendarView using Decorators.

//adding calendar day decorators
List decorators = new ArrayList<>();
decorators.add(new ColorDecorator());
calendarView.setDecorators(decorators);
calendarView.refreshCalendar(currentCalendar);

Custom Calendar View Library in Android Decorator

If you enjoy this library, don’t forget to like our Facebook page or follow us on twitter @Stacktips.

Total
0
Shares
guest
86 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nabeel Hafeez
Nabeel Hafeez
6 years ago

ArrayList error occured “Diamond types are not supported at this language level” and ColorDecorator() class can not resolved.

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  Nabeel Hafeez

Check your java version.

Dhananjay tiwari
Dhananjay tiwari
6 years ago

i need to implement background icons instead of colors in decoraters.Can you help me?

MAHAPRASAD CHAND
MAHAPRASAD CHAND
6 years ago

i want to add an event to your calendar when clicked a particular date . can you do that

Punithapriya
Punithapriya
6 years ago

did u find the answer

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  Punithapriya

You can do that using following code snippets

Intent intent = new Intent(Intent.ACTION_INSERT)
.setData(CalendarContract.Events.CONTENT_URI)
.putExtra(CalendarContract.EXTRA_EVENT_BEGIN_TIME, eventDate.getTimeInMillis())
.putExtra(CalendarContract.EXTRA_EVENT_END_TIME, eventDate.getTimeInMillis() + 60 * 60 * 1000)
.putExtra(CalendarContract.Events.TITLE, title)
.putExtra(CalendarContract.Events.DESCRIPTION, description)
.putExtra(CalendarContract.Events.AVAILABILITY, CalendarContract.Events.AVAILABILITY_BUSY);
context.startActivity(intent);
Toast.makeText(context, context.getString(R.string.added_to_calendar_message), Toast.LENGTH_SHORT).show();

Naveen hoovinahalli
Naveen hoovinahalli
6 years ago
Reply to  Nabeel Hafeez

use this it will work

List decorators = new ArrayList();

Kamal Sampath upasena
Kamal Sampath upasena
6 years ago

This a awesome lib thank you for creating such a awesome one, But how to use decorator for specific date ? can you please post a example on that , if i want colour a specific date on calendar (Like Public Holiday) how can i achieve this ?

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

check the example and comments in this post

maheshTs
maheshTs
6 years ago

i want to change the color of current week.how it?

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  maheshTs

check the example in this library and previous comments.

Prashanth
Prashanth
6 years ago

Awesome library. I need to set the max and min date, please help me how can i achieve this by using your library

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  Prashanth

Unfortunately the library is limited with this feature. you need to extend yourself

Marek Mošať
Marek Mošať
6 years ago

Is it possible add small text to Dates in calendar. I have database with 2 columns: date and name. How add this columns (arrays) to calendar?

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  Marek Mošať

yes. You can add it using SpanableString

SANdeep Tengale
SANdeep Tengale
6 years ago

Is is possible to show only months of the year and days of the week in this library??

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

currently not supported. You need to extend the library.

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

You need to use the DaysDecorator to achieve this. Here is the sample code that might help you..

private class DaysDecorator implements DayDecorator {
@Override
public void decorate(DayView dayView) {
if(!isPastDay(dayView.getDate())){
dayView.setBackgroundColor(getResources().getColor(R.color.disable_color));
}
}
}

private boolean isPastDay(Date date) {
Calendar c = Calendar.getInstance();

// set the calendar to start of today
c.set(Calendar.HOUR_OF_DAY, 0);
c.set(Calendar.MINUTE, 0);
c.set(Calendar.SECOND, 0);
c.set(Calendar.MILLISECOND, 0);

// and get that as a Date
Date today = c.getTime();

// test your condition, if Date specified is before today
if (date.before(today)) {
return true;
}
return false;
}

Prachi Karapurkar
Prachi Karapurkar
6 years ago

its not working can u please help me out..

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

What is not working? Can you be more specific ?

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

Can you do a pull request and modify. Once you done, I can merge it back to trunk.

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

You need to implement DayDecorator. See the example in the comments above.

Naveen hoovinahalli
Naveen hoovinahalli
6 years ago

Hi
As requested by girish singh, Even I want to set the background color of some days of month in different color, And I saw that day decor example but i dint get the solution , Can you please explain how can we do that

Mahesh Lad
Mahesh Lad
6 years ago

is it possible to show month like 26 feb to 26 march ?

Akeshwar Jha
Akeshwar Jha
6 years ago

Hi Nilanchala, thanks for the library. I have a simple question: How do I retrieve a particular DayView corresponding to a date in my activity class?

Vinay
Vinay
6 years ago

Hi , i want to display round background with color to the particular day.

Nageswararao CH
Nageswararao CH
6 years ago

I need to customize sun,Mon,tue… Sat ,like some special text (Ex: 1,2,..7),how I need to replace ?please guid me,your response will appriceated.

Ameen Maheen
Ameen Maheen
6 years ago

hey can you tell me how to mark days with different color for a set of dates on the calandar

neil
neil
6 years ago

Its Possible to hide previous day for current day in same month

Neha Sharma
Neha Sharma
6 years ago

Can I change the month by scrolling down in this calendar?

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  Neha Sharma

Hey @disqus_dz0L9TTcVs:disqus. Currently the calendar view is not supporting scrolling down.

Neha Sharma
Neha Sharma
6 years ago

Please help me because currently I am making an app and I want this function in your calendar

Neha Sharma
Neha Sharma
6 years ago

Its very urgent ….

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

You can do that in decorator as follows

private class DaysDecorator implements DayDecorator {
@Override
public void decorate(DayView dayView) {
if(null == dayView) return;

if (dayView.getDate().before(new Date())) {
dayView.setClickable(false);
}
}

SubbuRaj Reddy
SubbuRaj Reddy
6 years ago

Thanks bro

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  SubbuRaj Reddy

Cheers 🙂

bhavin h makwana
bhavin h makwana
6 years ago

hi, i am making math formula app…so what i ahve to use offline webview or imageview to store formula…i appreciate ur help ..how can i contact u

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

Hi Amit, unfortunately currently it is not supported.

Maju Sumanto
Maju Sumanto
6 years ago

Sorry this is the first time i develop an android apps…
and i want to ask could i add item list under the custom calendar view which is contains our schedule?

StackTips
StackTips
6 years ago
Reply to  Maju Sumanto

You can absolutely do that. For that you need to add the CalendarView to list header.

// inflate custom header and attach it to the list
LayoutInflater inflater = getLayoutInflater();
ViewGroup header = (ViewGroup) inflater.inflate(R.layout.custom_header, listView, false);
listView.addHeaderView(header, null, false);

Checkout similar example ListView Header Parallax in Android

Maju Sumanto
Maju Sumanto
6 years ago
Reply to  StackTips

thanks!!!

Cesar Daniel Meneses Guevara
Cesar Daniel Meneses Guevara
6 years ago

Hi I need help with the following problem. Clicking on a date that has a specific color given by the DayDecorator class color is lost

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

Hi Cesar, This is a known bug. Will fix it in my free time.

Cesar Daniel Meneses Guevara
Cesar Daniel Meneses Guevara
6 years ago

I hope it is soon

Humayoon
Humayoon
6 years ago

#Nilanchala Panigrahy Hy

how can i change specific dates colors in any month I tried but could not set color of specifice dates

because I tried to set colors of specific dates fore example

dayView = (DayView) view.findViewWithTag(DAY_OF_MONTH_TEXT + date);
dayView.setTextColor(mContext.getResources().getColor(R.color.no_leaverecieve_text_color));

if i set 14 and 18 it will set 12 and 16 and some time in another months when i set 8 and 12 it will set 10 and 14

Humayoon
Humayoon
6 years ago

#Nilanchala Panigrahy Thanks for help but that will not change some dates color it will change the whole month dates color
for example i want to change 16 ,17,20,5,7 dates color not full of month dates

Myz
Myz
5 years ago
Reply to  Humayoon

Yes, I also would like to change the color of a specific date I specify but it only changes the date of today. Please help with the code for changing the color of your own specified day of the month.

Nilanchala Panigrahy
Nilanchala Panigrahy
5 years ago
Reply to  Myz
Humayoon
Humayoon
6 years ago

Thanks I have Resolved my issue And Thanks For help this code help me alot

StackTips
StackTips
6 years ago
Reply to  Humayoon

Cheers. 🙂

Myz
Myz
5 years ago
Reply to  StackTips

Great customeCalendar Nilanchala!
I need your help in decorating my own specified date. Similar problem as Humayoon.
I will be really greatful if you can share this code.
Thanks a lot 😀

Nilanchala Panigrahy
Nilanchala Panigrahy
5 years ago
Reply to  Myz
Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  Humayoon

Thank you.

Myz
Myz
5 years ago
Reply to  Humayoon

Hi Humayoon, please can you share the solution with me?

keyur
keyur
6 years ago

hey Nilanchala Panigrahy am developing app and i want to add public holiday list in it then can you give some hint how can i implement that??

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  keyur

You can do that using DaysDecorator provided in library. Check out our example and featured comment section

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

Currently it is not supporting localization.

Pankaj
Pankaj
6 years ago

Great library. Does all basic stuffs you need. However it doesn’t support week view.

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  Pankaj

Currently the library is not supporting the week view layout.

bayerish
bayerish
6 years ago

how to add this awesome lib on Eclipse?

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  bayerish

Currently we do not have the Eclipse portable project. You can build a JAR out of the library and add it to your eclipse project lib directly.

Prachi Karapurkar
Prachi Karapurkar
6 years ago

how to disable previous dates from current date..sir can you help me out..

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Prachi Karapurkar
Prachi Karapurkar
6 years ago

what is ‘CalendarUtils’ i am getting error for this.. 🙁

Prachi Karapurkar
Prachi Karapurkar
6 years ago

what is ‘CalendarUtils’ i am getting error for this.. 🙁
Can u help me out please..its urgent..Thanks in advance..

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

The Custom Calendar View is updated yesterday. The CalendarUtiils class is added in v1.1 release. You can change the gradle dependency to the following:

compile ‘com.github.npanigrahy:Custom-Calendar-View:v1.1’

Or alternatively, you can add calendar view manually. Here is the link to the source
https://github.com/npanigrahy/Custom-Calendar-View/blob/master/library/src/com/stacktips/view/utils/CalendarUtils.java

Prachi Karapurkar
Prachi Karapurkar
6 years ago

thank you so much..Nilanchala Panigrahy..god bless u.. 🙂

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

@prachi_karapurkar You’re welcome. Happy that helped you.

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

replace “com.imanoweb.calendarview.CustomCalendarView” with com.stacktips.view.CustomCalendarView if you using v1.1

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

The onMonthChanged() callback in CalendarListener does it.

//Handling custom calendar events
calendarView.setCalendarListener(new CalendarListener() {
@Override
public void onDateSelected(Date date) {
SimpleDateFormat df = new SimpleDateFormat(“dd-MM-yyyy”);
Toast.makeText(MainActivity.this, df.format(date), Toast.LENGTH_SHORT).show();
}

@Override
public void onMonthChanged(Date date) {
SimpleDateFormat df = new SimpleDateFormat(“MM-yyyy”);
Toast.makeText(MainActivity.this, df.format(date), Toast.LENGTH_SHORT).show();
}

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

Sure you can. You may use TextView span in conjunction with DayDecorator

Joe
Joe
6 years ago

Hi Nilanchala,I used library,I done event drawing(Same day when I asked question). Library is really useful.Thanks 🙂

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  Joe

Thanks Joe. Glad it helped.
Would you mind pasting an screenshot if possible? It might help other users. 🙂

friend swades
friend swades
5 years ago

Can you please paste code to add dot or image to the dayview?

friend swades
friend swades
5 years ago

Can you please share the code to update the date cell please?

James
James
6 years ago

Hi great tutorial sir , can I get the date data in database then mark it in this custom calendar?
please help

Nilanchala Panigrahy
Nilanchala Panigrahy
5 years ago
Reply to  James

Thanks James. You may use the DayDecorator to do styling using Spannable.

JWest
JWest
5 years ago

How could I get the current selected date of the calendar in a Button event? I have a button below of the calendar. After the user click into calendar, He needs to click a button to go to next activity. I need to get the selected date clicked to pass as a bunlde. Is it possible? I have used Date dd=calendarView.getCurrentCalendar().getTime(); but it returns the current date not the selected date. Does someone can help me?

Coderkatta
Coderkatta
5 years ago

how to add events or color on particular days / dates.
I am not getting Decorators

Emmanuel Busobozi
Emmanuel Busobozi
5 years ago

Good morning Nilanchala, this is a nice library but I have two questions to ask
1..Iam using this customCalendarView but I want to change the background color for only one day in the calendar and that background color of that day should not disapear even when I close the app,how can i do that.

Second Question
2.How can i display a certain month of the year programmatically with a button click in the calendar without having to press next until i reach the year and month.For example I want the calendar to show me November 2030.How can I do that.

Narendra
Narendra
5 years ago

Hi, please help me ,, its urgent

How to stop previous month navigation from current month

MacketSWE
MacketSWE
5 years ago

Hi! Why does the theme for my entire app change when I put this in my repository and dependencies?

Kajetan
Kajetan
4 years ago

Hi,
I’m using calendar in Polish language but some of day’s names are written with capital letters, some with small letters. How can I fix it? Can I change names of days and months or just delete them?

Ayala Bartal
Ayala Bartal
4 years ago

Hi,

There is any way to initialize the calendar with day that is different from the current day? I tried to use the instruction but it open with the day I chose but still mark the current day with the actual one and not the one I want.

Thank you

Previous Post

Android Wear Now Officially Adds Support to iPhone Devices

Next Post

How to filter posts from WordPress home page archive

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
86
0
Would love your thoughts, please comment.x
()
x