Posted by: Lauri Nevala | June 20, 2011

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.

About these ads

Responses

  1. i am getting error(FORCE CLOSE) when i click open button.

  2. 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.

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

  3. Wow this is great! Thanks a lot.

  4. 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

    • 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….

  5. Really this is a great post i’m using this in my poject….but don’t know how to overcome the above issue..

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

    • 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

      • 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 :)

  7. if suppose i want to keep sunday has the first day of week,what changes i have to make…

    • 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.

  8. 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.

  9. This is simple great! You save my day!
    Great coding and Happy New Year! ;)

  10. 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

  11. 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?

  12. 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?

  13. 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.

  14. hi…can you please help i selected 100 as height .How can i decrease the height of grid column.

    • 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.

  15. 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 ..

    • I got the solution thanks man…

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

  16. Thanks a lot for the code, I made some simplifications to make it look cleaner and it works great!

  17. Superb, thanks for the help :)

  18. Hi Lauri, could you please tell me how to create an event in this calendar.

  19. 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?

  20. 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.

    • 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.

  21. 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.

  22. hi,

    How to implement dayview in android

  23. 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

  24. 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

  25. [...] Implement CalenderView [...]

  26. [...] calendar. Since, calendar view is available from API level 11, so, I used grid view instead. Basically, I follwed this tutorial. Calendar is working, but data in Calendar in appearing with delay, means, when I click on button [...]

  27. [...] calendar. Since, calendar view is available from API level 11, so, I used grid view instead. Basically, I follwed this tutorial. Calendar is working, but data in Calendar in appearing with delay, means, when I click on button [...]

  28. I really need to implement the iconUpdate() metho
    d but have no idea how to go about this?

  29. 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?

  30. This has problem 01.04.2013 and 01.07.2013 please check it out

  31. Great! You write very well and your code is very nice. Thanks!

  32. how do you add, edit and remove an event much like in the native calendar application that android comes with.?

  33. You my friend, are epic….

  34. 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

  35. Thank you so much.It Really Help Me a LOT.You Rock!!!!

  36. how can i skip CalendarViewSampleActivity.java? i want direct show calendar. date is today’s.

  37. how can you draw icon you want? i know you use random, but i need drawing icon today ToT


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

Categories

Follow

Get every new post delivered to your Inbox.

Join 27 other followers

%d bloggers like this: