sundeepk/compactcalendarview

An android library which provides a compact calendar view much like the one used in google calenders.

CompactCalendarView

CompactCalendarView is a simple calendar view which provides scrolling between months. It's based on Java's Date and Calendar classes. It provides a simple api to query for dates and listeners for specific events. For example, when the calendar has scrolled to a new month or a day has been selected. Still under active development.

Contributing

Please raise an issue of the requirement so that a discussion can take before any code is written, even if you intend to raise a pull request. Please see setup for testing.

Testing

CompactCalendarView makes use of screenshot-tests-for-android (https://github.com/facebook/screenshot-tests-for-android). This is for UI testing. Since screenshot-tests-for-android takes screenshots, we need a way to ensure images can be reproduced consistently. To do this, a specific emulator is used to run tests. Unfortunately, an older emulator is used for now. New pull requests which change functionality some how should aim to create new screenshot tests or unit tests if possible. To run this locally, run the below commands:

Pre-requisite (Also refer to .travis.yml):

• Python
• Python pillow installed
• Install android-19 (can be done through android sdk manager or command line).

Android 19 emulator is used because it seems to be a fast enough on travis-ci and because x86 emulators are not supported on travis-ci. Newer android version is possible but build times will increase.

Install the abi and accept:

$ $ANDROID_HOME/tools/bin/sdkmanager 'system-images;android-22;default;armeabi-v7a'

Create the emulator:

$ echo no | $ANDROID_HOME/tools/bin/avdmanager create avd --force -n testCompactCalendarEmulator -k "system-images;android-22;default;armeabi-v7a"

Create sd card (creating in current dir): Any problems with sdcard are best solved by deleting and trying again

$ mksdcard -l sdcard 100M sdcard

Run emulator (with out audio and window):

$ $ANDROID_HOME/emulator/emulator -avd testCompactCalendarEmulator -no-audio -no-window -sdcard sdcard &

Run emulator and watch(with audio and window):

$ $ANDROID_HOME/emulator/emulator -avd testCompactCalendarEmulator -sdcard sdcard 

Running the tests to verify that the current tests pass and to check which tests are not producing the same screenshot:

$ ./gradlew verifyMode screenshotTests 

To generate new screenshots if new tests have been added:

$ ./gradlew recordMode screenshotTests 

Run the unit tests like below:

$ ./gradlew test

Android studio emulator

It's possible to test using android studio emulator. However, it must be android 19 and and 480x800 screen resolution. One example is the Nexus S emulator. Just start the emulator and execute the gradle commands to run the tests. Emulator should be found automatically.

Open/Close animations

The library supports opening/closing with or without animations.

Example usage

It is possible to change the appearance of the view via a few properties. This includes the background color, text color, textsize color of the current day and the color of the first day of the month.

    <com.github.sundeepk.compactcalendarview.CompactCalendarView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/compactcalendar_view"
        android:layout_width="fill_parent"
        android:paddingRight="10dp"
        android:paddingLeft="10dp"
        android:layout_height="250dp"
        app:compactCalendarTargetHeight="250dp"
        app:compactCalendarTextSize="12sp"
        app:compactCalendarBackgroundColor="#ffe95451"
        app:compactCalendarTextColor="#fff"
        app:compactCalendarCurrentSelectedDayBackgroundColor="#E57373"
        app:compactCalendarCurrentDayBackgroundColor="#B71C1C"
        app:compactCalendarMultiEventIndicatorColor="#fff"
        />

Please see Sample app for full example.

    // ... code omitted for brevity         
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final CompactCalendarView compactCalendarView = (CompactCalendarView) findViewById(R.id.compactcalendar_view);
        // Set first day of week to Monday, defaults to Monday so calling setFirstDayOfWeek is not necessary
        // Use constants provided by Java Calendar class
        compactCalendarView.setFirstDayOfWeek(Calendar.MONDAY);
       
        // Add event 1 on Sun, 07 Jun 2015 18:20:51 GMT
        Event ev1 = new Event(Color.GREEN, 1433701251000L, "Some extra data that I want to store.");
        compactCalendar.addEvent(ev1);

        // Added event 2 GMT: Sun, 07 Jun 2015 19:10:51 GMT
        Event ev2 = new Event(Color.GREEN, 1433704251000L);
        compactCalendar.addEvent(ev2);

        // Query for events on Sun, 07 Jun 2015 GMT. 
        // Time is not relevant when querying for events, since events are returned by day. 
        // So you can pass in any arbitary DateTime and you will receive all events for that day.
        List<Event> events = compactCalendar.getEvents(1433701251000L); // can also take a Date object
        
        // events has size 2 with the 2 events inserted previously
        Log.d(TAG, "Events: " + events);

        // define a listener to receive callbacks when certain events happen.
        compactCalendarView.setListener(new CompactCalendarView.CompactCalendarViewListener() {
            @Override
            public void onDayClick(Date dateClicked) {
                List<Event> events = compactCalendarView.getEvents(dateClicked);
                Log.d(TAG, "Day was clicked: " + dateClicked + " with events " + events);
            }

            @Override
            public void onMonthScroll(Date firstDayOfNewMonth) {
                Log.d(TAG, "Month was scrolled to: " + firstDayOfNewMonth);
            }
        });
    }

You can modify indicators using a preset of styles, below is an example, but few other combinations are also possible:

Note that the calendar makes no attempt to de-duplicate events for the same exact DateTime. This is something that you must handle your self if it is important to your use case.

Locale specific settings

It's possible to set the locale so that weekday column names are automatically set by the calendar.

        CompactCalendarView compactCalendarView = (CompactCalendarView) findViewById(R.id.compactcalendar_view);
        compactCalendarView.setLocale(Locale.CHINESE);
        compactCalendarView.setUseThreeLetterAbbreviation(true);

dependencies {
    compile 'com.github.sundeepk:compact-calendar-view:3.0.0'
}

The MIT License (MIT)

Copyright (c) [2018] [Sundeepk]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

compactcalendarview's Issues

i want previous and next month date showing in current month

How do i show previous and next month date also in current month...when i click on dissable month date is showing in toast bt it is not visible in your code....how do i visible those previous and next month date...please reply me...

onMonthScroll scrolling fast damages the year of the parameter firstDayOfMonth

Hi. I just realized that when you scroll kind of fast between months till another and another year, the date given in the onMonthScroll argument starts to give the wrong year. I scrolled till December 2018 and then went back to December of the last year (2017) and it shows 2020 or any other year not even close.

If I keep scrolling between months, the year of the Date gets even more wrong.

I tried my best to explain this and I know its not very common to scroll like that but it is still an issue. Hope you can solve it soon.

Scrolling between month should keep current day highlighted

scrolling in between month, whether its manual or via ontouch. The current highlighted day should remain highlighted when scrolling.

Method to change dayColumnNames

You should implement a method to change dayColumnNames from CompactCalendarController. This way you can let people set day names from their language.

1.7.6 Update Feedback

First day of month works but now the currentday gives no feedback if its selected (Doesnt change color) and doesnt show a eventindicator cycle

indicator issue

if i click on date with event and then click other date, the indicator is not re-apperaing.

Error connecting

When connecting this error:
Error:Execution failed for task ':app:processDebugResources'.

com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/home/sanyok/IDE/android-sdk-linux/build-tools/22.0.0/aapt'' finished with non-zero exit value 1

I would be very grateful if you say that is not so

Events on day 1 of the month doesn't appear

Hi,
i've imported your beautiful calendar in my project. I need to show events on it and the official one from Google doesn't have this feature,
It works well but i want to signal you some issue i found :

1. On day 1 the small indicator is not shown. why?:
   if(!isSameDayAsCurrentDay && dayOfMonth != 1){

2. I'm getting the events from my server via Volley. So when i receive a respose ( async process ) i add event with this line of code ( calendar is already created in the activity ).
   context.compactCalendarView.addEvent(new CalendarDayEvent(nb.getDate().getTime(), Color.argb(255, 0, 0, 0)));

I do this on every month change event!

But at first render the small indicators are not present. Only if i touch the calendar or try to slide it they appears!
To avoid it i've added this line of code after all "addEvent" :
context.compactCalendarView.setCurrentDate(new Date());
This is for me a way to "refresh" the calendar.

This works only for the first time ... on subsequently month change it creates some problems to the visualization of the days in the calendar ( ex: i'm in July but i see day and events of another month )

I think that the problem is due to the fact that i get data in a second moment an not in the activity when the calendar is created.

Do you have any suggestions?

Thanks!

Add method to add a list of events and invalidate view when single event is added

Expose a method to add a list of events. This should make the api easier to use and will also invalidate.

Quick way to go to the current date/month after Swiping Left and Right

I swipe Right for 5 times now i am on April 2016. I want to go to my current date on button click event.

horizontal scroll problems in collapsing toolbar

I have the calendar view in a collapsing toolbar. The problema I have, is that horizontal scrolling (to change between months) is not smooth, meaning that it gets interrupted by the vertical scroll of the RecyclerView/CollapsingToolbar.
I am not sure where the problema comes from, but probably from this library, because I did not observe this with other calendar views.
(If somebody knows how to fix this but has no time, I probably can try to do it. I just do not know where to start.)

Displaying month and year

The calendar was awesome. but sorry for raising the issue. How do I get to display the month and year?

Indicator too small on high resolution device

indicator is very small on high resolution devices. can we something about this?

Investigate merging drawing events with calendar drawing code to improve performance and memory footprint

Currently, there is a separate method to draw events for a month. Investigate merging that in same method. My only concern is if using HashMap<Long, CalendarDayEvent> to store event, then there will be alot of overhead in getting a Calendar events because of auto boxing.

Another approach is to use LongSparseArray, but it might be slower. Should also expose a method to allow clients to set a custom map type if LongSparseArray does not meet their needs.

Make CompactCalendarView work in landscape mode

When the calendar is shifted to landscape mode, then the background colors for highlighted/current day are bigger than necessary and overlap at times. This makes things look odd.

[BUG] Event indicators displayed in the wrong rows

For some reason the indicator (dots) for every event is displayed one week earlier.
Look at this image

I embedd the calendar like this:

<?xml version="1.0" encoding="utf-8"?>
 <android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_behavior="app.fanfarenzug_strausberg.net.fanfarenzugstrausberg.user_interface.main.list.ScrollingCalendarBehavior">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
        app:statusBarScrim="?attr/colorPrimaryDark"
        app:titleEnabled="false">

        <com.github.sundeepk.compactcalendarview.CompactCalendarView xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/compactcalendar_view"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_marginTop="?attr/actionBarSize"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            app:compactCalendarBackgroundColor="@color/colorPrimary"
            app:compactCalendarCurrentDayBackgroundColor="@color/colorPrimaryDark"
            app:compactCalendarCurrentSelectedDayBackgroundColor="@android:color/transparent"
            app:compactCalendarTextColor="#fff"
            app:compactCalendarTextSize="12sp"
            app:layout_collapseMode="parallax" />

        <!--style="@style/ToolbarStyle"-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/toolbar_indicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Strangely it worked the first time I've implemented it.
Strange enough this does not happen on every month displayed.

Clicking on some blank space on the calendar should not remove current day.

While investigating another issue, I found that while clicking on some blank space in the calendar. E.g. any place where there is no day, the calendar will try to draw that highlighted day. This should not happen.

CompactCalendarView.CompactCalendarViewListener is required?

On sample, the listener is informed, but on documentation isn't informed to be required.

If not informed, occur an NPE on month events:

public void showNextMonth() {
    this.compactCalendarController.showNextMonth();
    this.invalidate();
    this.listener.onMonthScroll(this.compactCalendarController.getFirstDayOfCurrentMonth());
}

I suggest a null test for this.listener

Deactivate month scroll

hi again Sundeepk

My app is almost done, but i am having some troubles again with my pager and the calendar,
is there a way to deactivate the month scroll so it doesn't interfiere with the tab pager?

FirstDayOfMonth not selectable

Hey,
your calendar works fine but i cant select/click on the first day of month.
Here is an excerpt:

compactCalendarView.setListener(new CompactCalendarView.CompactCalendarViewListener() {
@OverRide
public void onDayClick(Date dateClicked) {
System.out.println(dateClicked.toString());
}
}

All the other days are selectable!
Output example: "System out: Wed Sep 02 00:00:00 MESZ 2015"

Change background of date field on click

When clicking on a day it should have a different background to see the selected day.

Make small indicator size configurable as well as current day/selected day

Make it configurable via a setter.

Swipe not smooth to move next and previous month

When i swipe to go next month or previous month. I need drag to the end .

Wrap height of the calendar according to the number of days visisble

I've integrated your wonderfull calendar widget today and it works like a charm.
Thanks for that, can I donate some euros to you via PayPal or such?

I embedded the Calendar in CollapsingToolbarLayout. In addition to the already issued scrolling problems from time to time I noticed that setting the height to wrap_content doesn't act as I expected as it fills the entire Toolbar. Is this the expected behaviour?

Bring CompactCalendarView in-line with Google calendars

There is some subtle differences with Google calendars. Mainly, when a new month is scrolled. It defaults to highlighting the first day of the month and then when selecting a month. This indicator is moved. This isn't quite the same here. Rather the 1st day of the month is always highlighted, and isn;t moved when someone selects a day.

Multiple events per day?

Say my database has 4 items for a particular date,

I'll addEvent() for the date, then what happens when the item is clicked? Nothing? I presume it will just add the indicator and displaying the items is up to me? If so, how do you recommend doing this? Storing and searching by date and displaying them once tapped?

remove all events at once in calendar with no events

is there any way to remove events (dots under date ) all at once rather than using
below removeEvent method

compactCalendarView.removeEvent(new CalendarDayEvent(dateClicked.getTime(), Color.argb(255, 169, 68, 65)), true);
adapter.notifyDataSetChanged();

Mutliple dots for multiple events on the same day

Love this library ! Currently using it in my app :)

Would be great to add the capability of having multiple dots when there's multiple events for a day. See image example image below.

Thank you !

Attribute textSize has already been defined

When importing your library, the textSize attribute is conflicting with an attribute from another library because they have the same name.

This is a known Android issue (namespaces aren't taken in consideration).

Can you please fix it, putting a prefix before your attributes from attrs.xml (for example transform in or something else) ?

FirstDayOfMonth doesnt show event-feedback-circle

Is it possible to make the look of the first day of month like a normal day? Because #1 usability is restricted. it doesnt show a circle below the "1". This feedback is very important for my app. Every day that has at least one event in it, has to show it!

Start week with Sunday

Is it possible to start the week with Sunday instead of Monday?

Using buttons instead of horizontal scrolling

Hi SundeepK

I am using the widget in a layout with tabs and the viewpager and of course the horizontal scrolling gesture is already in use by the viewpager so i want to put a pair of buttons next month and previous month.

I've been reading the source but i'll really appreciate if you could point me in the right direction to achieve this.

Thanks for the calendar.

Remove the need for Enums

Enums have an unnecessary memory overhead in Android. It's probably best to remove them from the library and replace with ints.

CompactCalendarView in Fragment

Hi SundeepK,

I'm trying to use your lib to show a calendar. Everything works on Activity, but i've got a problem on Navigation Drawer Activity.

I must clic on "Previous", "Next" button or somewhere on calendar to show it. On the fist time, only buttons are visibles (see below):

you can download my source code here:
http://hebergement.u-psud.fr/mobile/android/

i must use a navigation drawer because your calendar is a new feature of existing app. in fact, i must use "android.app.Fragment", not the "support fragment". Our app is only available for API 16+

a last thing, in the menu, if i put "calendar fragment" on first fragment (the first showed) it works...

i think it must be a stupid mistake but i can't find it :(
thanks a lot for your help

hbomb

Lag tapping on days?

Is this intentional? Tapping on a day has a short delay before actually changing day

Use daynames from Calendar object rather than hard coded Strings.

Use the day names provided by the Calendar object in java. This should remove the need to have hard coded strings for day names. Also add the possibility to change the local via a setter and construct new Calendar objects with this.

Limit displayed months

I would like to show only current and previous month in calendar. It would be nice to have something like for DatePicker.setMinDate() and DatePicker.setMaxDate() to define limit. Is it possible with current implementation?

Min SDK 12

15 is sadly far too high :'

Removing event-indicator-cycles

Hey,
I have been working for a while now with your calendar. Everything works great, except that the first day of month is restricted with the feedback. But you already answered on my last issue that you will fix that.

However i expanded my eventlist below the calendar to a recyclerlistview with drag and swipe mechanism.
Works fine too.
But how can i remove the small indicator cycle from a day when the day has no events anymore?

//Excerpt how i add it
compactCalendarView.addEvent(new CalendarDayEvent(date.getTime(), getResources().getColor(R.color.accent)), false);

disable every month 1 st selected on Scroll Left and Right .

How can i disable every month 1 st selected on Scroll Left and Right .

button and scroll conflict

if im on Jan 2015 and i scroll (not button press) to Apr 2015, then i press previous button it takes me to Feb 2015. why is this happening?

Make drawing currentday/selected day and event circle more consistent across screen sizes

Currently, this is not the case and needs to be addressed.

X-Scale Problem

I have written my request here to add some screenshots:
http://stackoverflow.com/questions/35797229/android-mpandroidchart-scale-x-axis

Display Events

I see you have added 6 events in your calendar, Is it possible to display those events on the below fragment when the day is selected?

SetCurrentSelectedDayBackgroundColor AND Bugs

If the user clicks on a day i use compactCalendarView.setCurrentSelectedDayBackgroundColor(R.color.accent);
Thats a light orange.
But after that the color turns to black.

Moreover I found a bug: If you scroll on month just a little bit so that the month falls back the first day is loading but the currentselectedday-cycle is still on the old position and not on the first.

And something I really dont like: If you placed an event on the current day, there is no little cycle shown because its hidden by the bigger currentday-cycle.

And: The currentday-cycle repeats on every year. For example today is 1st dec. 2015. Than every 1st dec. is marked with a big currentday-cycle.

Only display 2 weeks of a Month

Hi SundeepK,

Your CompactCalendarView is awesome and verymuch useful. But I have a specific need to display only two weeks of a month (current one and the previous one). Is it possible?
If so, how can I do this?

Thanks a lot!

Show event on first day of month

Currently there is a check to not draw events on the first day of month. Might need to remove this check.

Possibility to change colors for individual days

For example, if we want to highlight all the days that have an event, we need to change the background color for individual days.

Use only Day view

Hi SundeepK,

Your CompactCalendarView seems amazing widget to me! But I have a specific need to display it only into Day view. Is it possible?
If so, how can I do this?

Thanks a lot!

Adding events and setting current date causes inconsistency when drawing events.

See issue #12. Need to investigate this issue and implement a fix.