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
86 comments
  1. ArrayList error occured “Diamond types are not supported at this language level” and ColorDecorator() class can not resolved.

          1. 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();

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

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

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

  5. 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;
    }

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

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

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

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

  10. 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);
    }
    }

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

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

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

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

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

  14. #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

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

      1. 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 😀

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

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

  16. 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();
    }

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

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

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

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

Leave a Reply

Your email address will not be published.

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