{"id":1922,"date":"2016-05-30T08:14:28","date_gmt":"2016-05-30T08:14:28","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=1922"},"modified":"2019-06-12T06:41:16","modified_gmt":"2019-06-12T06:41:16","slug":"calendarview","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/calendarview","title":{"rendered":"Calendar View Tutorial With Example In Android Studio"},"content":{"rendered":"

In Android, Calendar View widget was added in API level 11(Android version 3.0) which means this view is only\u00a0supported in the device that are\u00a0running on\u00a0Android 3.0 and higher\u00a0version. It is used for displaying and selecting dates.<\/p>\n

\"Calendar<\/p>\n

The supported range of dates of this calendar is configurable. User can select a date by taping\/clicking on it and also can scroll & find the calendar to a desired date. Developer\u00a0can also set minimum and maximum date shown in\u00a0calendar view.<\/p>\n

\n

Basic\u00a0Calendar View\u00a0XML Code:<\/strong><\/h4>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\" \/>\r\n<\/pre>\n
\"Calendar<\/p>\n
\n
Important Methods Of Calendar View:<\/strong><\/h4>\n
Let\u2019s we discuss some important methods of Calendar View that may be called in order to manage the CalendarView.<\/p>\n
1. getDate():<\/strong> <\/span>This method is used to get the selected date of CalendarView in milliseconds since January 1, 1970 00:00:00 in user\u2019s preferred \u00a0time zone. This method returns long type value for selected date.<\/p>\n
Below we get the selected of CalendarView in milliseconds.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nlong selectedDate = simpleCalendarView.getDate(); \/\/ get selected date in milliseconds\r\n<\/pre>\n
2. setDate(long date):<\/strong> <\/span>This method is used to set the selected date in milliseconds since January 1, 1970 00:00:00 in user\u2019s preferred \u00a0time zone.<\/p>\n
Below we set the selected date in milliseconds for a CalendarView.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setDate(1463918226920L); \/\/ set selected date 22 May 2016 in milliseconds\r\n<\/pre>\n
\"setDate<\/p>\n
3. setFirstDayOfWeek(int firstDayOfWeek):<\/strong><\/span> This method is used to set the first day of the week.<\/p>\n
Below we set the 2 value means Monday as the first day of the week.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setFirstDayOfWeek(2); \/\/ set Monday as the first day of the week\r\n<\/pre>\n
\"setFirstDayOfWeek<\/p>\n
4. getFirstDayOfWeek():\u00a0<\/strong><\/span>This method is used to get the first day of week. This method returns an int type value.<\/p>\n
Below we get the first day of the week of CalendarView.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nint firstDayOfWeek= simpleCalendarView.getFirstDayOfWeek(); \/\/ get first day of the week\r\n<\/pre>\n
5. setMaxDate(long maxDate):<\/strong><\/span>\u00a0This method is used to set the maximal date supported by thisCalendarView\u00a0in milliseconds since January 1, 1970 00:00:00 in\u00a0user\u2019s preferred time zone.<\/p>\n
Below we set the long value for maximal date supported by the CalendarView.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setMaxDate(1463918226920L); \/\/ set 22nd May 2016 as max date supported by this CalendarView\r\n<\/pre>\n
\"setMaxDate<\/p>\n
6. getMaxDate():<\/strong><\/span> This method is used to get the maximal date supported by this\u00a0CalendarView\u00a0in milliseconds since January 1, 1970 00:00:00 in\u00a0user\u2019s preferred\u00a0time zone. This method returns long type value for maximal date supported by this CalendarView.<\/p>\n
Below we firstly set the long value for the maximal date and then get the maximal value supported by the CalendarView.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setMaxDate(1463918226920L); \/\/ set max date supported by this CalendarViewlong maxDate= simpleCalendarView.getMaxDate(); \/\/ get max date supported by this CalendarView\r\n<\/pre>\n
7. setMinDate(long minDate):<\/strong> <\/span>This method is used to to set the minimal date supported by this\u00a0CalendarView\u00a0in milliseconds since January 1, 1970 00:00:00 in\u00a0user\u2019s preferred time zone.<\/p>\n
Below we set the long value for minimal date supported by the CalendarView.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setMinDate(1463918226920L); \/\/ set min date supported by this CalendarView\r\n<\/pre>\n
8. getMinDate():<\/strong><\/span> This method is used to to get the minimal date supported by thisCalendarView\u00a0in milliseconds since January 1, 1970 00:00:00 in user\u2019s preferred\u00a0time zone. This method returns long type value for minimal date supported by this CalendarView.<\/p>\n
Below we firstly set the long value for the minimal date and then get the minimal value supported by the CalendarView.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setMinDate(1463918226920L); \/\/ set min date supported by this CalendarViewlong minDate= simpleCalendarView.getMinDate(); \/\/ get min date supported by this CalendarView\r\n<\/pre>\n
9. setShowWeekNumber(boolean showWeekNumber):<\/strong> <\/span>This method is used to show or hide the week number of CalendarView. In this method we set Boolean type value means true or false.<\/p>\n
Below we set the true value for showing the week numbers of CalendarView.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setShowWeekNumber(true); \/\/ set true value for showing the week numbers.\r\n<\/pre>\n
\"setShowWeekNumber<\/p>\n
10. getShowWeekNumber():<\/strong><\/span> This method is used to check whether the week number are shown or not. This method returns Boolean type value means true or false. True indicates week numbers are shown and false indicates week numbers are currently hidden.<\/p>\n
Below we checks whether the week number are currently showing or not.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.getShowWeekNumber(); \/\/ checks whether the week number are shown or not.\r\n<\/pre>\n
11. getSelectedDateVerticalBar():<\/strong><\/span> This method is used to get the drawable i.e used for the vertical bar shown at the beginning and at the end of the selected date. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we get the applied drawable for the vertical bar shown at the beginning and at the end of the selected date.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nDrawable verticalBar=simpleCalendarView.getSelectedDateVerticalBar(); \/\/ get the applied drawable for the vertical bar\r\n<\/pre>\n
12. setSelectedDateVerticalBar(Drawabledrawable):<\/strong><\/span> This method is used to set the drawable for the vertical bar shown at the beginning and at the end of the selected date. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we set the drawable for the vertical bar shown at the beginning and at the end of the selected date.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setSelectedDateVerticalBar(getResources().getDrawable(R.drawable.ic_launcher)); \/\/ set the drawable for the vertical bar\r\n<\/pre>\n
\"setSelectedDateVerticalBar<\/p>\n
13. setSelectedDateVerticalBar(int resourceId):<\/strong><\/span> This method is used to set the color for the vertical bar shown at the beginning and at the end of the selected date. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we set the blue color for the vertical bar shown at the beginning and at the end of the selected date.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setSelectedDateVerticalBar(Color.BLUE); \/\/ set the color for the vertical bar\r\n<\/pre>\n
14. setSelectedWeekBackgroundColor(int color):<\/strong><\/span> This method is used to set the color in the background of selected week of CalendarView. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we set the black color in the background of selected week of CalendarView.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setSelectedWeekBackgroundColor(Color.BLACK); \/\/ set black color in the background of selected week<\/pre>\n
\"setSelectedWeekBackgroundColor<\/p>\n
15. getSelectedWeekBackgroundColor():<\/strong> <\/span>This method is used to get the background color of selected week of CalendarView. This method returns an int type value. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we get the applied color in the background of selected week of CalendarView.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nint backColor=simpleCalendarView.getSelectedWeekBackgroundColor(); \/\/ get applied color in the background of selected week\r\n<\/pre>\n
16. getWeekNumberColor():<\/strong><\/span> This method is used to get the color of week numbers. This method returns an int type value. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we get the applied color of week numbers.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nint weekNumberColor=simpleCalendarView.getWeekNumberColor(); \/\/ get applied color of week number\r\n<\/pre>\n
17. setWeekNumberColor(int color):<\/strong><\/span> This method is used to set the color for the week numbers. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we set the red color of week numbers.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setWeekNumberColor(Color.RED); \/\/ set red color for the week number\r\n<\/pre>\n
18.\u00a0setWeekSeparatorLineColor(int color):<\/strong><\/span> This method is used to set the color for the week separator line. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we set the green color for the week separator line.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setWeekSeparatorLineColor(Color.GREEN); \/\/ set green color for the week separator line.\r\n<\/pre>\n
19. getWeekSeparatorLineColor():<\/strong><\/span> This method is used to get the color of week separator line. This method returns an int type value. This method was deprecated in API level 23 so no longer used by Material style Calendar View.<\/p>\n
Below we get the applied color of week separator line.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nint weekSeperatorLineColor=simpleCalendarView.getWeekSeparatorLineColor(); \/\/ get applied color of week seperator line\r\n<\/pre>\n
20. setUnfocusedMonthDateColor(int color):<\/strong><\/span> This method is used to set the color for the dates of an unfocused month. This method was deprecated in API level 23 so no longer used by Material style Calendar View.<\/p>\n
Below we set the gray color for the dates of an unfocused month.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setUnfocusedMonthDateColor(Color.GRAY); \/\/ set gray color for the dates of an unfocused month\r\n<\/pre>\n
21. getUnfocusedMonthDateColor():<\/strong><\/span> This method is used to get the color for the dates of an unfocused month. This method returns int type value. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we get the applied color for the dates of an unfocused month.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nint unfocusedMonthDateColor=simpleCalendarView.getUnfocusedMonthDateColor(); \/\/ get the color for the dates of an unfocused month\r\n<\/pre>\n
22. setFocusedMonthDateColor(int color):<\/strong><\/span> This method is used to set the color for the dates of an focused month. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we set the yellow color for the dates of an focused month.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nsimpleCalendarView.setFocusedMonthDateColor(Color.YELLOW); \/\/ set yellow color for the dates of focused month\r\n<\/pre>\n
23. getFocusedMonthDateColor():\u00a0<\/strong><\/span>This method is used to get the color for the dates of an focused month. This method returns int type value. This method was deprecated in API level 23 so no longer used by Material style CalendarView.<\/p>\n
Below we get the applied color for the dates of an focused month.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\nint focusedMonthDateColor=simpleCalendarView.getFocusedMonthDateColor(); \/\/ get the color for the dates of focused month\r\n<\/pre>\n
24. setOnDateChangeListener(OnDateChangeListenerlistener):<\/strong><\/span> This method is used to set the listener to be notified upon selected date change.<\/p>\n
Below we show how to use setOnDateChangeListener event of CalendarView.<\/p>\n
CalendarView simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\n\/\/ perform setOnDateChangeListener event on CalendarView\r\nsimpleCalendarView.setOnDateChangeListener(new CalendarView.OnDateChangeListener() {\r\n@Override\r\npublic void onSelectedDayChange(CalendarView view, int year, int month, int dayOfMonth) {\r\n\/\/ add code here\r\n}\r\n});\r\n<\/pre>\n
\n
Attributes of CalendarView:<\/strong><\/h4>\n
Now let\u2019s we discuss some common attributes of a CalendarView that helps us to configure it in our layout (xml).<\/p>\n
1. id:<\/strong><\/span> id attribute is used to uniquely identify a CalendarView.<\/p>\n
Below we set the id of the CalendarView that is used to uniquely identify it.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\" \/> <!--\u00a0 id of the CalendarView that is used to uniquely identify it -->\r\n<\/pre>\n
2. firstDayOfWeek:<\/strong><\/span> This attributes is used to set the first day of week according to Calendar. We can also set this programmatically means in java class using setFirstDayOfWeek(int firstDayOfWeek) method<\/p>\n
Below we set the 2 value means Monday as the first day of the week.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:firstDayOfWeek=\"2\" \/>\r\n<!-- set the 2 value means Monday as the first day of the week -->\r\n<\/pre>\n
3. focusedMonthDateColor:<\/strong><\/span> This attribute is used to set the color for the dates of the focused month. We can also set this programmatically means in java class using setFocusedMonthDateColor(int color) method.<\/p>\n
Below we set the yellow color for the dates of an focused month.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:firstDayOfWeek=\"2\"\r\nandroid:focusedMonthDateColor=\"#ff0\" \/>\r\n<!-- set the yellow color for the dates of focused month -->\r\n<\/pre>\n
4. unfocusedMonthDateColor:<\/strong><\/span> This attribute is used to set the color for the dates of the unfocused month. We can also set this programmatically means in java class using setUnfocusedMonthDateColor(int color) method.<\/p>\n
Below we set the Red color for the dates of an focused month.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:firstDayOfWeek=\"2\"\r\nandroid:unfocusedMonthDateColor=\"#f00\" \/>\r\n<!-- set the yellow color for the dates of an unfocused month -->\r\n<\/pre>\n
5. maxDate:<\/strong><\/span> This attribute is used to set the maximal date supported by this CalendarView. This attribute use mm\/dd\/yyyy format.\u00a0We can also set this programmatically means in java class using setMaxDate(long maxDate)<\/p>\n
Below we set the 05\/22\/2017 as maximal date supported by the CalendarView.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:firstDayOfWeek=\"2\"\r\nandroid:maxDate=\"05\/22\/2017\" \/>\r\n<!-- set maximal date supported by this CalendarView -->\r\n<\/pre>\n
6. minDate:<\/strong> <\/span>This attribute is used to set the minimal date supported by this CalendarView. This attribute use mm\/dd\/yyyy format.\u00a0We can also set this programmatically means in java class using setMinDate(long minDate)<\/p>\n
Below we set the 05\/22\/2016 as minimal date supported by the CalendarView.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:firstDayOfWeek=\"2\"\r\nandroid:minDate=\"05\/22\/2016\" \/>\r\n<!-- set minimal date supported by this CalendarView -->\r\n<\/pre>\n
7. selectedDateVerticalBar:<\/strong> <\/span>This attribute is used to set the drawable\/color for the vertical bar shown at the beginning and at the end of the selected date. We can also set this programmatically means in java class using setSelectedDateVerticalBar(int resourceId) or setSelectedDateVerticalBar(Drawable drawable) method.<\/p>\n
Below we set the black color for the vertical bar shown at the beginning and at the end of the selected date.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:firstDayOfWeek=\"2\"\r\nandroid:selectedDateVerticalBar=\"@color\/black\" \/>\r\n<!-- set black color for the vertical bar shown at the beginning and at the end of the selected date -->\r\n<\/pre>\n
8. selectedWeekBackgroundColor:<\/strong><\/span> This attribute is used to set the color in the background of selected week of CalendarView. We can also set this programmatically in java class using setSelectedWeekBackgroundColor(int color) method.<\/p>\n
Below we set the red color in the background of selected week of CalendarView.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:firstDayOfWeek=\"2\"\r\nandroid:selectedWeekBackgroundColor=\"#f00\" \/>\r\n<!-- set red in the background of selected week of CalendarView -->\r\n<\/pre>\n
9. showWeekNumber:<\/strong> <\/span>This attribute is used to show or hide the week number of CalendarView. In this method we set Boolean type value means true or false. We can also set this programmatically means in java class using setShowWeekNumber(boolean showWeekNumber) method.<\/p>\n
Below we set the false value for hiding the week numbers of CalendarView.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:firstDayOfWeek=\"2\"\r\nandroid:showWeekNumber=\"false\" \/>\r\n<!-- set the false value for hiding the week numbers of CalendarView. -->\r\n<\/pre>\n
10. weekNumberColor:<\/strong> <\/span>This attribute is used to set the color for the week numbers.<\/p>\n
Below we set the red color of week numbers. We can also set this programmatically means in java class using setWeekNumberColor(int color) method.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:firstDayOfWeek=\"2\"\r\nandroid:weekNumberColor=\"#f00\" \/>\r\n<!-- set red color for the week numbers of CalendarView. -->\r\n<\/pre>\n
11. weekSeparatorLineColor:<\/strong> <\/span>This attribute is used to set the color for the week separator line. We can also set this programmatically means in java class using setWeekSeparatorLineColor(int color) method.<\/p>\n
Below we set the green color for the week separator line.<\/p>\n
<CalendarView\r\nandroid:id=\"@+id\/simpleCalendarView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:firstDayOfWeek=\"2\"\r\nandroid:weekSeparatorLineColor=\"#0f0\" \/>\r\n<!-- set green color for the week seperator line -->\r\n<\/pre>\n
\n
Calendar View Example In Android Studio:<\/strong><\/h4>\n
Below is the example of CalendarView in which we display a CalendarView for a minimal and maximal supported date. In this we set 01\/01\/2016 minimal and 01\/01\/2018 as maximal date for this calendarView. We set focused and unfocused month date color and also used some other functions and attribute for more customization of CalendarView. Finally we perform setOnDateChangeListener event to be notified upon selected date change. Whenever a user tap\/click on any date the selected date will be displayed by using a Toast.<\/p>\n
Below you can download the Android Studio project code, see final output and step by step explanation:<\/p>\n
Download Code<\/a> ? <\/a><\/p>\n
\"Calendar<\/p>\n
Step 1:\u00a0<\/strong><\/span>Create a new project and name it CalendarViewExample<\/p>\n
Step 2:\u00a0<\/strong><\/span>Open res -> layout ->activity_main.xml (or) main.xml and add following code:<\/p>\n
<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\".MainActivity\">\r\n\r\n    <!-- CalendarView with monday as first day and minmal and maximal day -->\r\n    <CalendarView\r\n        android:id=\"@+id\/simpleCalendarView\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"fill_parent\"\r\n        android:firstDayOfWeek=\"2\"\r\n        android:maxDate=\"01\/01\/2018\"\r\n        android:minDate=\"01\/01\/2016\" \/>\r\n\r\n\r\n<\/RelativeLayout><\/pre>\n
Step 3:<\/strong><\/span>\u00a0Open\u00a0 \u00a0src -> package -> MainActivity.java<\/p>\n
In this step we open\u00a0MainActivity\u00a0and\u00a0add the code to initiate the Calendar View. In this we set selected week background color and week separator line color and finally perform setOnDateChangeListener event to be notified upon selected date change. Whenever a user tap\/click on any date the selected date will be displayed by using a Toast.<\/p>\n
package example.abhiandroid.calenderviewexample;\r\n\r\nimport android.graphics.Color;\r\nimport android.graphics.drawable.Drawable;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.widget.CalendarView;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    CalendarView simpleCalendarView;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); \/\/ get the reference of CalendarView\r\n        simpleCalendarView.setFocusedMonthDateColor(Color.RED); \/\/ set the red color for the dates of  focused month\r\n        simpleCalendarView.setUnfocusedMonthDateColor(Color.BLUE); \/\/ set the yellow color for the dates of an unfocused month\r\n        simpleCalendarView.setSelectedWeekBackgroundColor(Color.RED); \/\/ red color for the selected week's background\r\n        simpleCalendarView.setWeekSeparatorLineColor(Color.GREEN); \/\/ green color for the week separator line\r\n        \/\/ perform setOnDateChangeListener event on CalendarView\r\n        simpleCalendarView.setOnDateChangeListener(new CalendarView.OnDateChangeListener() {\r\n            @Override\r\n            public void onSelectedDayChange(CalendarView view, int year, int month, int dayOfMonth) {\r\n                \/\/ display the selected date by using a toast\r\n                Toast.makeText(getApplicationContext(), dayOfMonth + \"\/\" + month + \"\/\" + year, Toast.LENGTH_LONG).show();\r\n            }\r\n        });\r\n    }\r\n\r\n\r\n}<\/pre>\n
Output:<\/strong><\/p>\n
Now run the app and you will see Calendar open. Now click on any date and it will displayed on the screen as Toast. Also try scrolling up and down to see the maximum and minimum date set for Calendar.<\/p>\n","protected":false},"excerpt":{"rendered":"
In Android, Calendar View widget was added in API level 11(Android version 3.0) which means this view is only\u00a0supported in the device that are\u00a0running on\u00a0Android 3.0 and higher\u00a0version. It is used for displaying and selecting dates. The supported range of dates of this calendar is configurable. User can select a date by taping\/clicking on it … Continue reading Calendar View Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1922","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"Calendar View Tutorial With Example In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Calendar View tutorial explaining its methods and attributes with example in Android Studio. In Android, Calendar View widget was added in API level 11(Android version 3.0).\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/calendarview\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=1922"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1922\/revisions"}],"predecessor-version":[{"id":2778,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1922\/revisions\/2778"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=1922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}