Mutliple dots for multiple events on the same day

[sundeepk]

Mutliple dots for multiple events on the same day

[SundeepK]

I think I've done with most of the implementation, I think I'll be releasing a beta for this today. If your interested, you can test things out.

[XxGoliathusxX]

@SundeepK What is the difference between a CalendarDayEvent and a normal Event?
Can you explain how to add events to a specific day?

[simoneluconi]

To change the color see: THIS

For solve the problem i think that it's better that you post the all code.

I think that @SundeepK should do a wiki where he explain how works this library. It isn't easy to read all the code of the app to understand correcly how it works.

[SundeepK]

There seems to be some more interest on this issue. I will start thinking on how I can do this. Shouldn't been too difficult :).

[SundeepK]

I think I'll add the ability to add multiple days, where you can configure the color for the event and pass in an optional extra Object type. This will be a breaking change for the api (probably rename the event class name), but will probably be nessiary for it to work. Something like this:

CalendarEvent(int color, long timeInMillis, Object data) looks like from Goolge calendars, they draw a plus sign when there are 3 or more events. I'll probably do the same, however, if the screen size is large enough to show more. Then we can draw more indicators till there is no more room.

[SundeepK]

I've added some basic code to draw multiple events, you should be able to set the colour for each event as well.

[simoneluconi]

Il would be great if the app in the future could recognise automatically the event for the same days.

[SundeepK]

Hi @simoneluconi, would you be able to give a little more info on what you mean by automatically recognise events?

[simoneluconi]

I mean that if i add some events, and some of this are of the same days, the app automatically add more dots. It isn't clear if the app already work in this way or some others.

[SundeepK]

Added beta:

dependencies {
    compile 'com.github.sundeepk:compact-calendar-view:1.8.4-beta-multiple-event-support'
}

Note the api has change to allow for this, and it should be more clear when updating events.

            List<Event> events = new ArrayList<>();
            events.add(new Event(Color.BLUE, System.currentTimeMillis()));
            compactCalendarView.addEvent(new CalendarDayEvent(System.currentTimeMillis(), events), false);

If you want to update event:

        CalendarDayEvent calendarDayEvent = underTest.getCalendarDayEvent(new Date());
        Event updateItem = new Event(Color.GREEN, System.currentTimeMillis());
        calendarDayEvents.getEvents().add(updateItem);
        // now you have 2 choices
        compactCalendarView.invalidate();
       // or to replace the calendar event
         compactCalendarView.addEvent(calendarDayEvent);

Unfortuanlity, it's not immutable to keep memory foot print low. But also you can add some optional data along with the event.

[simoneluconi]

Can you give more information? when compactCalendarView.addEvent(new CalendarDayEvent(System.currentTimeMillis(), events), false); should be called? and what System.currentTimeMillis() should represent? the list "events" should be cleared when i add some event for the day? i can't get it to work

[SundeepK]

I've released a beta, but it's not yet published on maven. It usally doesn't take very long, but If you check maven repo, its not there so you cant use it. However, you can clone the repo and try looking at the sample. Unfortuanlty, I check right now, but it mayhave not been released correctly - will check later today.

[simoneluconi]

i added the new version (compact-calendar-view:1.8.4-beta-multiple-event-support) in the dependencies on android studio, and it compile it correcly, but simply, i don't understand how it work. I have the list with the events of the day, i call compactCalendarView.addEvent(new CalendarDayEvent(c2.getTimeInMillis(), events), false); but it only draw a random red dot in the day. This is the code:

In the 19 of september i have only an event, it goes on events.add(new Event(Color.YELLOW, c2.getTimeInMillis())); because it don't respect the condition of the if statment, but in the calendar i have a red dot. In the 24 of septermber i have multiple event, i only have one dot.

if i remove the "events.clear()" this appen

I don't understand

[SundeepK]

Ok lets take a step back :)

CalendarDayEvent takes a list of events for a particualr day. I want to think of a better a name, but will do that later.

Each CalendarDayEvent represents a list of events for a particular day so it requires it's own list. You cannot share this list with other days because it is specific to that day.

Each day requires a new CalendarDayEvent which you are doing, but you are also sharing the event list assuming the library will make a copy of the initail list, it does not.

Each time you create a new CalendarDayEvent, make sure you create a new event list as well. Then query the calendar for the event to update or remove from it.

when you call events.clear() you are removing all the events, but you also shared the reference to this same list to all the CalendarDayEvent objects and so removed all the event as well, it's just how references work in java.

Have a look at the MainActivity.java example to see how event adding works.

[simoneluconi]

Thanks! Sorry but i'm a bit new in java and i didn't know the reference thing.

Now i have solved the problem! Another question, there is some way to change the "plus" color?

[SundeepK]

Not currently, but I can add that feature in. Also I noticed the day indicator overlaps the event indicator. I will try fixing that as well. I shifted some values around for this beta and didnt check all the cases.

Thanks for trying it out and giving some feedback.

[simoneluconi]

you're welcome ;)

[SundeepK]

I've added the functionality so that you can change the color on the plus. The property is confiurable in the xml for example:

 app:compactCalendarMultiEventIndicatorColor="#fff"

Have a look, I also tried to make the drawing of the indicator circle at little more consistent. Have a look, its the same version. However, just refresh gradle dependencies. It may also take a few hours for the changes to be available from.

[simoneluconi]

Can you change the version name please? In android studio i can't refresh gradle dependencies. Just got A LOT of error! When i try to solve one, i get a new one! it's an infinite loop.

I think it's a bug, i've serched online but anyone of the solution that i've found worked. It's says

To run dex in process, the Gradle daemon needs a larger heap.
It currently has approximately 247 MB.
For faster builds, increase the maximum heap size for the Gradle daemon to more than 6144 MB.

6144mb? madness!

[SundeepK]

ok I've released another version. I though replacing would just at like a snapshot and just replace what was already there. I've added -1 to the end of it.

dependencies {
    compile 'com.github.sundeepk:1.8.4-beta-multiple-event-support-1'
}

Also try restarting android studios or you machine as well.

[simoneluconi]

Thanks! But the correct dependencies is:

dependencies {
    compile 'com.github.sundeepk:compact-calendar-view:1.8.4-beta-multiple-event-support-1'
}

Works perfectly ;)

[SundeepK]

cool, But it seems the indicator for the day is very big compared to phones I have tried. Which is samsung galaxy s3 and nexus 6 plus. They looked ok to me. What phone are you using? Or emulator? It will cause it to overlap the other indicators which looks odd.

[simoneluconi]

My phone is a Xiaomi Mi3, but i have the dpi changed to 440dpi and i have reduced the size of the characters. But this is how it looks like in the nexus 5 emulator all stock, it's pretty much the same :/

[SundeepK]

Ah ok that looks ok, does it overlap indicators that are below or above it? I will do some testing with the emulator you mentioned. Thanks!

[simoneluconi]

Yes it operlap the indicators

[simoneluconi]

Another question. I need to update some events for the day. You say that it is CalendarDayEvent calendarDayEvent = underTest.getCalendarDayEvent(new Date());...but, what is "underTest"?

[SundeepK]

Ah, I forgot to expose that method in the calendar so that you can get events :( unfortunately, I can do this tomorrow
What you are looking at is the unit tests :).

The calendar is split into two components. The main calendar view and a controller class which does the actual processing. I added a methods to the controller class but didn't expose it via the main calendar view.

[simoneluconi]

Ook, i will wait for tomorrrow ;)

[XxGoliathusxX]

@SundeepK
Please note that it does not make sense if the current or selected day indicator (the big ones) overlap the row of the event-indicators! The current and selected indicator has to stay behind the event-indicators.

[SundeepK]

@simoneluconi I've uploaded the screenshot below of nexus 5 emulator, the big indicator doesn't overlap small event indicators above or below them. However, If you select a day with events, it will disappear and overlap the small indicators, this is expected behaviour for now.

Is it because you are embedding the calendar within a card layout of some sort? Because I am running the sample app from the project and it looks ok.

@XxGoliathusxX At some point I will look at that issue. Probably after this issue has been fixed, maybe make it configurable so that people can decide if they want it to draw over small indicators or not.

[simoneluconi]

Maybe it's because I have set the height of the calendar to a low value because it occupy a large portion of the screen. But it's OK. The only problem is that I need to update the event hahah

[SundeepK]

Exposed the get/remove methods via the main Calendar view, have a go.

dependencies {
    compile 'com.github.sundeepk:compact-calendar-view:1.8.4-beta-multiple-event-support-2'
}

[simoneluconi]

I can't see the method getCalendarDayEvent()

[SundeepK]

It has a simpler name: getEvent(date)
https://github.com/SundeepK/CompactCalendarView/blob/%40enhancement/%2352_add_multiple_event_indicators/library/src/main/java/com/github/sundeepk/compactcalendarview/CompactCalendarView.java#L193

[XxGoliathusxX]

Ok I think I got it even if I am a bit confused.
I got one problem:
When I open the CalendarActivity I load the events like this:

List<Event> le = new ArrayList<>();
                    for(int i = 0; i < amount; i++) le.add(new Event(Color.BLUE, d.getTime()));
                    compactCalendarView.addEvent(new CalendarDayEvent(d.getTime(), le), false);

The amount of dots per day is correct. But when I select a day that has events and then select another one, it adds one more dot.
Example:
Ive got one event on 03.05.2016 placed.
I start the activity, and exactly one indicator is drawn on that day.
Then I select the day(03.05.2016) and then I select another one afterwards. Then there are two indicators drawn. But I didnt do anything!

[simoneluconi]

Maybe the loop of events adding is repeting every time you click on another day?

[XxGoliathusxX]

@simoneluconi It only happens once! When I select and deselect it again it doesnt change(its still the correct amount + 1).

[XxGoliathusxX]

Between: How do I change the color of the "+"?

[XxGoliathusxX]

I already finished my project. I just want to update the calendar from the one-event indicator to the multiple indicator version.

[simoneluconi]

It's a bit confused (maybe), but i solve the problem like that:

If calendarDayEvent != null there are already some events for the day, so update the events. If not there is no event, so add a new one.

[XxGoliathusxX]

When do you use this? If you load your events or if you add a new event?

[simoneluconi]

Then I load the event and when I add a new event, but when I add a new event it don't create the dot. I don't know how to solve that yet. :/

[XxGoliathusxX]

Here is my code:
Initialisation:

for(Date d : dates){ //Every date that has events to load
                int amount = getEvents(d).size();
                if(!(d.before(firstDayOfMonth)) && !(d.after(lastDayOfMonth)) && amount > 0){
                    //Date is inside the current shown month

                    List<Event> le = new ArrayList<>();
                    for(int i = 0; i < anzahl; i++) le.add(new Event(ContextCompat.getColor(this, R.color.accent), d.getTime()));
                    compactCalendarView.addEvent(new CalendarDayEvent(d.getTime(), le), false);
                }
            }

Adding:

public void addEventToDate(Date date){
Event event = new Event(ContextCompat.getColor(this, R.color.accent), date.getTime());
        eventDots.add(event);
        CalendarDayEvent calendarDayEvent = compactCalendarView.getEvent(date.getTime());
        if(calendarDayEvent != null){
            calendarDayEvent.getEvents().add(event);
        }else{
            List<Event> le = new ArrayList<>();
            le.add(event);
            calendarDayEvent = new CalendarDayEvent(date.getTime(), le);
            compactCalendarView.addEvent(calendarDayEvent, false);
        }
        compactCalendarView.invalidate();
}

[SundeepK]

@simoneluconi and @XxGoliathusxX I think adding CalendarDayEvent object was a bad choice here because it seems to cause confusion. The idea was that you can logically groups events per a day. So you have one object containing all the actual events for a specific day and you use this object to update and delete events from its list.

There are a few choices to improve the api I think.

1. Have only one event class which represents an event occurring in time. For example, you can have an event at at 2pm and 4pm in the same day. You add these to the calendar and the it will automatically detect it is for the same or different day and apply those changes automatically. It will look something like this:

//Thu, 05 May 2016 14:00:00 GMT
Event event1 = new Event(Color.BLUE, 1462456800000L, null);

//Thu, 05 May 2016 16:00:00 GMT
Event event2 = new Event(Color.RED, 1462464000000L, null);

calendar.addEvent(event1, false);
calendar.addEvent(event2, false);

// use Thu, 05 May 2016 14:00:00 GMT as the date, it will get both events
List<Event> events = calendar.getEvents(new Date(1462456800000L));
// remove first event will automatically remove from calendar
events.remove(0);

//remove all events for a single day
calendar.removeEvents(new Date(1462456800000L));
calendar.invalidate();

2.We could just have a single event class which takes an int number of events for the day:

//Thu, 05 May 2016 14:00:00 GMT, where 3 is the number if events for the day
DayEvents event1 = new DayEvents(Color.BLUE, 1462456800000L, 3, null);

//Thu, 05 May 2016 16:00:00 GMT, where 4 is the number if events for the day
DayEvents event2 = new DayEvents(Color.RED, 1462464000000L, 4, null);

calendar.addEvent(event1, false);

// below will replace the above event because it's for the same day
calendar.addEvent(event2, false);

// use Thu, 05 May 2016 14:00:00 GMT as the date
DayEvents events = calendar.getEvent(new Date(1462456800000L));

//return 4
events.getEventCount();

// remove event for the day
calendar.removeEvent(new Date(1462456800000L));
calendar.invalidate();

The second approach will probably be the simplest because you just set the number of dots you want to show below a day. But the first allows you to use the calendar as a way of storing actual events. What do you guys think? I think a wiki will be a good idea once I finish this issue.

Also note second approach will be most efficient as well, because checking dates and doing conversion using java Calendar is expensive operation. Last time I profiled the code, it was where alot of the cpu time was spent. I think approach 2 looks good to me.

Thanks for the input, I'm sure other will appreciate it as well 😄

[XxGoliathusxX]

@SundeepK The second one is the better one in my opinion too. For me, the data behind a event I handle myself. I just want the calendar to notice: "Hey I got two events here. Mark them for me!".
Not more not less.

Concerning "Wiki": I think a small Youtube-Tutorial that shows the basic implementation would be enough. I had only a small amount of problems with this library. Everything I did not know, I found answers here very fast.

[SundeepK]

There is the problem that people can't have different colours for each event with the second approach. And using a map to store the color inside the even object is going to increase memory alot.

[simoneluconi]

But I really need the color for each event :/ this library in my project works as a school calendar, so red dots for class test and yellow for others events.

[SundeepK]

Yeah, I think the first option is the best then. It will be closest to Google calendar aswell and it's flexible so you can have specific color.

I'll refactoring the code sometime today then since it won't take too long.

[SundeepK]

Hi, I've made some changed to make the api a little simpler now. Now you only create Event and add them to the calendar. There have been some method renaming, but nothing drastic. Quick example usage:

        Event updateItem = new Event(Color.GREEN, 1433712261000L);
        calendar.addEvent(updateItem);

        // get all events for date can use epochMillis as well
        List<Event> calendarDayEvents = calendar.getEvents(new Date(1433701251000L));
        //calendarDayEvents.size() will be one
        //you can directly make changes to the list and it will be reflected in the calendar on next draw 

        //below will remove all events by day or epoch millis
        //remove events by millis
        calendar.removeEvents(1433712261000L));
        //or remove by date 
        calendar.removeEvents(new Date(1433712261000L));

Hopefully it will be simpler to understand now :). Try cloning the repo and switch to branch @enhancement/#52_add_multiple_event_indicators to test it out and import it as a local gradle dependency. I can release another testing version sometime soon but testing the branch directly will help me since I dont have to relase a new version incase there are more things to improve.

[XxGoliathusxX]

I do I remove a single dot?

[XxGoliathusxX]

How*

[SundeepK]

You can do to remove the first indicator for example:

        List<Event> calendarDayEvents = calendar.getEvents(new Date(1433701251000L));
        calendarDayEvents.remove(0); 
        calendar.invalidate();

Just iterate the list using an iterator and remove the element just like any java list object. The list return is the same that is used by the calendar so any changes made will reflect in the calender. Same goes if you add extra events directly to that list.

[XxGoliathusxX]

Ill check that on sunday

[XxGoliathusxX]

@SundeepK Which is the new compile version???

[SundeepK]

@XxGoliathusxX I didn't have a chance to release a new version. You can checkout the branch I mentioned earlier and reference it as a local project. Otherwise I'll try getting another testing release out sometime today.

[XxGoliathusxX]

Ok I will wait for that!

[SundeepK]

Have a look at:

dependencies {
    compile 'com.github.sundeepk:compact-calendar-view:1.8.4-beta-multiple-event-support-3'
}

[simoneluconi]

Perfect! Now its all more easy! :D But if you want to do some modification to some events of the day you have to do:
List<Event> events = compactCalendarView.getEvents(c2.getTime()); events.add(new Event(Color.RED, c2.getTimeInMillis())); compactCalendarView.removeEvents(c2.getTime()); compactCalendarView.addEvents(events); compactCalendarView.invalidate();

otherwise it adds back the same events.

[SundeepK]

@simoneluconi You should be able to call addEvent. It will keep updating the same list for you just as long as the date is the same for the other events. For example, if you call:

        // Add event on Sun, 07 Jun 2015 18:20:51 GMT
        Event ev1 new Event(Color.GREEN, 1433701251000L);
        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);

        // Events is now a list of 2 events
        List<Event> events = compactCalendar.getEvents(1433701251000L);

So you don't need to remove events if you want to in order to add more for the same day.

[simoneluconi]

i have a list with all the events downloaded from the internet, so i don't know how much events there are for the same day, so i had to do that in that way.

[XxGoliathusxX]

@SundeepK Works as expected. Great Job!

[SundeepK]

Thanks for the testing help. Will do some testing on different devices and release soon.

[csbenz]

@SundeepK Thanks for your hard work, I'll test the new version :)

[SundeepK]

Thanks. I have tested it on 2 different devices and it seems to work ok. I will do some final testing on some emulators as well to see if I can find any inconsistencies.

Note however, I've made a few small bug fixes since that release. But nothing which changes functionaltiy. Mostly keeping things consistent between phone screens.

[csbenz]

Great :) Any idea when it will go up on Maven?

[SundeepK]

Hopefully in the next few days, I just want to make sure its consistent between different phones, which means manual testing with a few differen emulators.

[SundeepK]

Released under:

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

Closing this issue as a result.

[gurpreetsingh2591]

Hello Sandeep,

i am using your calender event library.. i change all those things .. which i want but i cant find a solution to change color of those dates who's have events.... it's possible to change color of that particular dates.

please help me.. and response me ..
Thanks

[NamrataDwivedi]

Hi,

Can we select multiple dates in this library?

Thanks

[vishu5367]

Hi Sandeep,
I am Using your calender library ,It is very useful to me.
I have to show different events on one date with three different dots and different colors.
I dont find any solution. So will you please help
I am sending you the type of response i have to set on my calender

"appionments": [
{
"requestId": 13,
"subject": "try",
"description": "Huh",
"approved": false,
"deleted": false,
"appionmentType": 2,
"requestTime": "2017-12-26T00:00:00",
"createdOn": "2017-12-08T10:37:21.043"
},
{
"requestId": 12,
"subject": "gshsh",
"description": "Hdhshs",
"approved": false,
"deleted": false,
"appionmentType": 2,
"requestTime": "2017-12-25T00:00:00",
"createdOn": "2017-12-08T10:34:23.123"
},
{
"requestId": 10,
"subject": "new",
"description": "12/14/2017",
"approved": false,
"deleted": false,
"appionmentType": 2,
"requestTime": "2017-12-14T00:00:00",
"createdOn": "2017-12-07T11:27:24.78"
},
{
"requestId": 8,
"subject": "test",
"description": "Hdhd",
"approved": false,
"deleted": false,
"appionmentType": 2,
"requestTime": "2017-12-11T00:00:00",
"createdOn": "2017-12-07T10:23:15.263"
},
{
"requestId": 7,
"subject": "test",
"description": "Hdhd",
"approved": false,
"deleted": false,
"appionmentType": 2,
"requestTime": "2017-12-07T00:00:00",
"createdOn": "2017-12-07T10:23:05.173"
},
{
"requestId": 6,
"subject": "hzhbs",
"description": "12/15/2017",
"approved": false,
"deleted": false,
"appionmentType": 2,
"requestTime": "2017-12-15T00:00:00",
"createdOn": "2017-12-01T11:26:58.117"
}
],
"tasks": [
{
"taskId": 13,
"title": "nnfn",
"description": "fnfgngngfn",
"status": 1,
"startDate": "2017-12-14T00:00:00",
"endDate": "2017-12-30T00:00:00"
},
{
"taskId": 14,
"title": "nnfn",
"description": "fnfgngngfn",
"status": 1,
"startDate": "2017-12-14T00:00:00",
"endDate": "2017-12-30T00:00:00"
}
],
"events": [
{
"eventId": 1,
"title": "Event1",
"description": "Description1",
"startDate": "2017-12-20T05:41:59.43",
"endDate": "2017-12-22T05:41:59.43",
"startTime": "9:30 AM",
"endTime": "5:30 PM"
},
{
"eventId": 2,
"title": "Event2",
"description": "Description2",
"startDate": "2017-12-26T05:41:59.63",
"endDate": "2017-12-29T05:41:59.33",
"startTime": "9:30 AM",
"endTime": "3:30 PM"
}
]

i have to set these dates on my calender with different dots and colors.

[ABr751]

hey can you just add number instead of dots in place of event indicator....Help needed

[rathoddeep]

@SundeepK I want to show only one dot when multiple events are there in same date. i have tried but no results are found please help me for the same.

Thank you.!