Events with different colors, please add this simple fucntionality

[slishnevsky]

Hi I really like your calendar component, it is simple and compact, very good for dashboards.
Could you please add this simple feature as event color property to you event class?
I grab events from Google Calendar, where I have holidays in green, my events in red, birthdays in blue etc... Google api passes these colors (backgroundColor and foregroundColor) along as part of even object.

If you had backgroundColor and foregroundColor properties in your event object, it would be great and will help to display events in different colors on the calendar, no need to define any css, simply apply style="background-color: {event.backgroundColor}; color: event.foregroundColor". Could you please add this simple functionality? I can make this change locally, but I want to keep up with the latest version from your bower repository. Also it makes sense to move away from bower to npm IMHO, the vast majority of components and frameworks are in NPM these days. Thanks s bunch. Cheers :)

[twinssbc]

@slishnevsky Sure, I can add it. This calendar is based on Angular 1, that's why I tend to keep it into maintenance mode. Do you still plan to use it since Angular 6 is also there?

[gine]

yes i will use it :(

the better idea to implement this feature is to permit to set class in an event parameters then use this class to style the event.

[slishnevsky]

@twinssbc
Hi, I like you calendar a lot for simplicity. I have switched from AngularJS to Angular (v6 v7) do you by any chance have this calendar available for Angular? Thanks !!

[twinssbc]

@slishnevsky Sorry, I didn't write an Angular version.

[bricecarbou]

Hello,

The idea of color is very interesting. We use this calendar in an internal project since few yea and we have no request to change currently.

If you can add (easily) selected color for event type, it will be very nice :)

[SelimAtasever]

i ll leave what i did here, maybe it can help someone. In my controller i added eventsource a condition whether it should be green or red:
color: (calendar_time['free_quota'] < 1 ? 'red' : 'green' ),

---

and in calendar.css file, i added two class below calender-event-inner as:

.calendar-event-inner.green {
background-color: #26c281;
color : white;
font-weight:bold;
}
.calendar-event-inner.red {
background-color: #e6291b;
color : white;
font-weight:bold;
}

---

and in the calendar.tpls.js file, gotta add ng-class next to calendar-event-inner div like:

ng-class="displayEvent.event.color. (both line 1248 and 1270)

this works fine, cheers.