Change calendar background

[Licensing]

Hi, we recently purchased the Telerik UI's for Android and are thrilled with their out of box functionality. One small concern however is the color of the calendar. The default color is a light grey tone which does not sit well with the look and feel of our app, and I cannot seem to find a way to change it. I've read through the documentation regarding customizing the calendar, and have found ways to style a specific cell, but not the entire calendar. Is this functionality supported/possible? 

[Todor]

Hello Amadeus,

Thank you for your question.

In order to provide this functionality we have exposed a method setAdapter(CalendarAdapter), which allows you to define your own adapter which provides the calendar elements. Of course you don't need to start from scratch, you can simply extend our implementation and set a different background of the desired cells. Here's an example:

class CustomCalendarAdapter extends CalendarAdapter {
    CustomCalendarAdapter(Context context, Calendar calendar, Locale locale) {
        super(context, calendar, locale);
    }

    @Override
    public CalendarCell getDateView(Long date, List<Event> eventList, boolean includeWeekNumber) {
        CalendarCell cell = super.getDateView(date, eventList, includeWeekNumber);
        cell.setBackgroundResource(R.drawable.my_calendar_cell);
        return cell;
    }

    @Override
    public CalendarCell getDayNameView(int index) {
        CalendarCell cell = super.getDayNameView(index);
        cell.setBackgroundColor(Color.GREEN);
        return cell;
    }

    @Override
    public TextView getTitleView(Context context, long date, CalendarDisplayMode displayMode) {
        TextView title = super.getTitleView(context, date, displayMode);
        title.setBackgroundColor(Color.BLUE);
        return title;
    }
}

Additionally, you can also override the methods getWeekNumberView and getCalendarMonthCell, if you need to. As you may guess, with this adapter the calendar will have blue background on its title, green on the names of the days, and for the cells with dates the resource my_calendar_cell will be used. You can define this resource in the resources of your application. Here's our default implementation which you can use as a reference:

<selector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:calendar="http://schemas.android.com/apk/res-auto/com.telerik.widget.calendar"
    android:constantSize="true">
    <item android:drawable="@drawable/calendar_cell_today" calendar:state_calendar_cell_today="true"/>
    <item android:drawable="@drawable/calendar_cell_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/calendar_cell_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/calendar_cell_disabled" android:state_enabled="false"/>
    <item android:drawable="@drawable/calendar_cell_normal"/>
</selector>

Defined this way, the calendar cell uses a different resource in its different states, here's the example for the standard cells (calendar_cell_normal):

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#E5E5E5" />
</shape>

Don't forget to actually set an instance of your adapter to the calendar:

calendarView.setAdapter(new CustomCalendarAdapter(this, Calendar.getInstance(), Locale.getDefault()));

If you need further assistance, don't hesitate to get back to us.

Regards,
Todor
Telerik

 

 

[Licensing]

Thank you for the detailed and informative response Todor, thats exactly what we were looking for!

[Marcel]

Hi,

I'm currently evaluating Telerik_UI_for_Android_2014_3_1204 and the CalendarAdapter API no longer(?) matches what is described in this post. 

For example, method getDateView is no longer part of this class. Has the API been changed in the meantime?

Thanks,
Marcel

[Antony Jekov]

Hello Marcel,

The API for the CalendarAdapter is indeed changed since the last release of the Calendar in December 2014.
The calendar has been optimized to use a single View for displaying its elements and the cells are no longer Views themselves. Therefore the adapter no longer returns a View by using getDateView() but returns a CalendarDayCell by using getDateCell();

If interested you can read some more about the release notes and the changes since the last update in the following blog post: http://blogs.telerik.com/androidteam/posts/14-12-09/improved-android-calendar-and-chart-with-the-q3-2014-service-pack

Regards,
Antony Jekov
Telerik