| Issue 117: | Event coloring through CalEvent properties | |
| 12 people starred this issue and may be notified of changes. | Back to list |
How about adding an optional parameter in the JSON object, for a classname (or hex-color value?) to apply to each event as it's placed on the map? Until then, I realize I can produced that kind effect through event coding.
Oct 8, 2009
#1
DonBe...@gmail.com
Oct 19, 2009
im still thinking about adding new properties to calevent objects (for color), but for now i added some new docs, showing you how to do it through css: http://arshaw.com/fullcalendar/docs/colors-and-theming.php
Oct 31, 2009
still thinking about this one (changed title)
Summary:
Event coloring through CalEvent properties
Jan 20, 2010
i was able to accomplish this through a few tricks with the event object and the
eventAfterRender event.
in my ajax backend script that sends the data I add three parameters to my event object:
color - hex color for the event
fontColor - hex color to use for title and other text
className - a unique classname to reference the specific event - I use 'custom' +=
eventID
then in the eventAfterRender I add some css rules to the event:
eventAfterRender: function(event,element,view){
if(event.className != ''){
var customStyle = {};
if(event.color != ''){
customStyle['background-color'] = event.color;
customStyle['border-color'] = event.color;
}
event.fontColor?customStyle['color'] = event.fontColor:''
$j('.'+event.className +', .fc-agenda .'+event.className +' .fc-event-time,
.'+event.className +' a' ).css(customStyle);
}
}
Jan 20, 2010
forgot to add that I use a function to determine what text color to use based on the hue of the color. it's in php so if you're using a different language you'll have to translate it.
Feb 22, 2010
I tried to implement this, but is not working.
I added the following script in "var viewMethods = { }" in fullcalendar.js (1.4.5
version) in my app and I set the three parameters color, fontColor, fontColor in my
JSon object.
eventAfterRender: function(event,element,view){
if(event.className != ''){
var customStyle = {};
if(event.color != ''){
customStyle['background-color'] = event.color;
customStyle['border-color'] = event.color;
}
event.fontColor?customStyle['color'] = event.fontColor:''
$j('.'+event.className +', .fc-agenda .'+event.className +' .fc-event-time,
.'+event.className +' a' ).css(customStyle);
}
}
But it is not working.
can you please tell me if I need to add anything else to make this work?
Thanks.
Feb 22, 2010
is it just not changing the colors or is it some sort of javascript problem? it would help if you posted a sample of the json you're using for your events.
Feb 22, 2010
Ya, it is not changing colors. actually it is not generating the styles with the
given className.
Here is my JSon array result.
var eventsArray = [ { id : 4, title : 'Vacation', start : '2010-02-16', end :
'2010-02-16', className : 'vacation', color : '#DBFFDD', fontColor :
'#000000' },
{ id : 4, title : 'Vacation', start : '2010-02-16', end :
'2010-02-16', className : 'vacation', color : '#DBFFDD', fontColor :
'#000000' },
{ id : 4, title : 'Vacation', start : '2010-02-19', end :
'2010-02-19', className : 'vacation', color : '#DBFFDD', fontColor :
'#000000' },
{ id : 3, title : 'Time Off', start : '2010-02-17', end :
'2010-02-17', className : 'timeoff', color : '#E5E5E5', fontColor :
'#000000' },
{ id : 2, title : 'Sick Time', start : '2010-02-16', end :
'2010-02-16', className : 'sicktime', color : '#FFE4B5', fontColor :
'#000000' },
{ id : -1, title : 'Employees - Birthday', start :
'2010-02-25', end : '2010-02-25', className : 'birthday', color :
'#FFCCEE', fontColor : '#000000' },
];
Feb 22, 2010
it might be a difference between versions of full calendar since i'm still using 1.4.3. I'll upgrade mine and see if that breaks it.
Feb 23, 2010
Did you get a chance to check it out with the latest version of fullcalendar 1.4.5?
Feb 23, 2010
there's two things that I see that might be causing the issue:
1. you need to change the line that checks if the className is '' to undefined. I
found that problem after I posted it. ie:
old - if(event.className != ''){
new - if(event.className != undefined){
2. you're using the same className for all your events so when you execute the block
that pulls the events you're going to get all of them and it will not give you the
result you want. the ideal thing is to add your id onto your className so it's unique
ie: { id : 4, title : 'Vacation', start : '2010-02-16', end :
'2010-02-16', className : 'vacation4', color : '#DBFFDD', fontColor :
'#000000' }
Feb 24, 2010
i found a bug in how I'm checking whether an event has a custom className. I also
found a bug when dealing with some of the other event handlers and made a change in
how the styles are added to an event. I changed from using the eventAfterRender event
to the eventRender instead. here's my new solution:
eventRender: function(event,element,view){
if(event.className.length > 0){
var customStyle = {};
if(event.color != ''){
customStyle['background-color'] = event.color;
customStyle['border-color'] = event.color;
}
event.fontColor?customStyle['color'] = event.fontColor:''
$j('.fc-event-time, a',element).add(element).css(customStyle);
}
},
Apr 26, 2010
Issue 446 has been merged into this issue.
Jun 16, 2010
i'd like to implement this at some point, providing a way to color individual events, as well as setting the color of a specific event sources
Status:
Accepted
Labels: -Type-Defect -Priority-Medium Type-Enhancement
Jul 28, 2010
Are you not doing this with the Google Calendar class? I haven;t been able to check against a gcal, but it looks like you're applying a class to this feed only.
Nov 23, 2010
There must be some bug with the afterEventRender. When i did create a new event, not all the event uses the callback (tested it in FF with console.log('eventAfterRender').
@Sneed424, thanks mate, your code at comment 15 did the trick for me!
Jan 12, 2011
@jacobvanlingen: Please create a new issue with a detailed description and a working copy of the problem if it's not directly related to this issue here.
Mar 20, 2011
this has been completed in 1.5! (just released) http://arshaw.com/fullcalendar/docs/event_rendering/Colors/ http://arshaw.com/fullcalendar/docs/event_data/Event_Object/#color-options
Status:
Fixed
Aug 13, 2013
(No comment was entered for this change.)
Status:
Implemented
Aug 13, 2013
(No comment was entered for this change.)
Status:
Released
|
|
| ► Sign in to add a comment |