How to implement CalendarView in Android

Android does not offer any calendar view in the SDK. That is a big loss from the developer’s point of view. There are lots of situations where it would be beneficial to display days of a month and provide some option for the user to choose the day.

One solution is to use a 3rd party component. The second one is to implement one by your own, like I did.

Picture 1. CalendarView

When I started to implement  the calendar view, I googled around with some search terms and found this tip.

AFAIK, there are no other way than implement your own calendar. So… what you would have to do is using a GridLayout with 7 columns and create a custom BaseAdapter to display data correctly.

That sounded reasonable and I went ahead and tried it. My aim was to implement a single calendar view where user can navigate between months and choose a date (Picture 1). You can see the result here: https://github.com/nevalla/CalendarView

Basically two classes are needed to create the implementation mentioned above. One class to display calendar grid and the other one to adapt calendar days and items into the grid.

CalendarView.java

CalendarView is  a class that encapsulates the UI of the Calendar:  a header (navigation and name of the month) and a GridView.  onCreate() method does some initializations and res/layout/calendar.xml is set for the content view. Then handler attribute is used to populate some calendar items into to the calendar. Finally some event listeners are set. GridView’s OnClickListener returns selected date as string format:

gridview.setOnItemClickListener(new OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
    	TextView date = (TextView)v.findViewById(R.id.date);
        if(date instanceof TextView && !date.getText().equals("")) {

        	Intent intent = new Intent();
        	String day = date.getText().toString();
        	if(day.length()==1) {
        		day = "0"+day;
        	}
        	// return selected date as string format
        	intent.putExtra("date", android.text.format.DateFormat.format("yyyy-MM", month)+"-"+day);
        	setResult(RESULT_OK, intent);
        	finish();
        }

    }
});

refreshCalendar() method asks calendar adapter to refresh itself and changes month name.
onNewItem() method captures date parameter and sets it as current date.

CalendarAdapter.java

CalendarAdapter is a class that handles the content of the calendar – how many days to display and whether to display calendar item icon or not.

refreshDays() method formats source array for the grid. Application assumes that weeks start on Monday, thus calculation is needed on how many empty days are before the first day of the month.

getView() method creates a view for each item referenced by the adapter. Layout of the view is defined in res/layout/calendar_item.xml.

CalendarViewSampleActivity.java

CalendarViewSampleActivity is an activity class that opens CalendarView. DatePicker’s date is updated by the return  value of the CalendarView.
So this is relatively simplified example of how to display calendar month and populate some items into it. How do you like it and how would you improve it?

UPDATE 1:

Since API level 11 (Android 3.0) there has been the native implementation of the CalendarView. However it’s just the view where you can pick a date, no calendar items can be shown.

47 thoughts on “How to implement CalendarView in Android

  1. Thanks for the information. Problem was that onNewIntent() method was called before the month variable was constructed in the CalendarView.java. Issue is fixed now.

    1. im getting problem in starting Calendarview…. when i click the open button application is closed…… i have downloaded latest version of this application….

  2. In calendar updater class while we adding dates the items array,dates get added but while displaying icons appear only for the date greater than 10..i can able to mark the the date from 1to9….how to solve this ssue

    1. can’t able to add icon to date 1to9….can able to add icon ly from date 10..can u plz say how to pvercome this issue….

  3. hi sorry i only made mistake,now it works correctly….can u plz say how to reduce the height of that grid cell…

    1. hi mukesh,
      i am having same problem. only dates greater than 9 are showing event icons. can you please explain how you solved the issue?

      Thanks

      1. ohh i solved it myself. the issue is that the dates array is storing dates as double digits “01”, “02” instead of 1, 2 and so on.

        hope this helps others in future :)

    1. An update is now available @github. In the CalendarAdapter class there is the line (34):
      static final int FIRST_DAY_OF_WEEK =0; // Sunday = 0, Monday = 1
      where you can choose which format you want to use. Please see the commit history for more detailed changes.

      Currently height of the cell depends on the size of the icon image. By resizing or replacing it you can change to size of the cell.

  4. hi,
    I found a bug.
    Example: when you select the day 12/29/2011, presses the “next” button and then the “previous” button, two cells of the grid are focused.

    I’m trying to fix, but still could not.

  5. great post my problem that i cant add icon to event and another thing that i need to add notification to user to remember him/her of his event ,,,any help plz as android begineer

    thanks

  6. Hi,

    I want to display the CalendarView activity first to show the calendar first and then when click on date, it shows the next activity. Can anyone tell me how to do this please?

  7. I am trying to implement a regional calendar with custom months and days. So is it possible to tweak the gridview to display custom months and days of the week. Or does it require a new implementation of Calendar class?

    JFYI, the dates in my regional calendar can easily be calculated from a Gregorian calendar date. All I want is a custom display. Any suggestions?

  8. i found these codes aftr lot of effort…i just want to know how to add a feature so that i can sync some of the events to the google calendar.

    1. Height of the cell depends on the size of the content (in this case it is the icon that defines size of the cell). By resizing or replacing the content you can change to size of the cell.

  9. Hi Lauri thanks for your reply…In this case even if I remove the icon but still the size is same can you any other alternate solution for this ..

      1. Can you explain your solution here, I also want to decrease the height of the Grid cell

  10. Does anyone know how to depict the icons for a specific date? Now, they can only be depicted accoridng to a specific day and the icons are shown for that day on every month. An icon shown for example the fifth of june 2012 would be very nice. Can anyone help?

  11. Does anyone know how to show an icon for a specific date (event)? No an icon can only be shown for a specific day and is shown then for each month on that day.

    1. Hi Lauri Nevala ,

      Thanks for the tutorial .
      I have two questions with me ,
      1. How to decrease the height of the Grid cell
      2. How to show the icon or image on specific days
      (like 2012-7-30, 2012-7-9,2012-8-12).

      Please help me to solve this two issues .

      Thanks,
      KumarVarma.

  12. Thank you very much. I can’t understand why SDK has not a native calendar. Neither iOS :p
    I saved up a lot of time thanks to you.
    Regards.

  13. Hi Lauri, If you would be very kind I have just started learning to program and would love to know how to change the calendar updater so that I can display the event icons on dates of my choosing? i.e, I can get a date from a different datepicker to the one included in your app and use that different date to set an icon/item for that date, I have that all in place I just can’t figure how to get the icon/item to show up on that date? Please help if you can, I am very much stuck and would love some help on this. Thanks

  14. Hello Lauri.
    Thank you for your tutorial.
    You have the comment “You can implement a dedicated class to provide real values”. How does one do this? I need to get the real values from a public google calendar.
    Thanks

  15. Hi Lauri thanks for posting such great works, btw I’m a newbie on android could you please tell me how to show an icon for a specific date (event) and specific month like e.g feb 9?

  16. Hi Lauri Nevala ,

    Thanks for the tutorial .
    I have two questions with me ,
    1. How to decrease the height of the Grid cell
    2. How to show the icon or image on specific days
    (like 2012-7-30, 2012-7-9,2012-8-12).

    Please help me to solve this two issues .

    Thanks,
    Tamil Selvam .P

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s