My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 117: Event coloring through CalEvent properties
12 people starred this issue and may be notified of changes. Back to list
Status:  Released
Owner:  ----
Closed:  Aug 2013


Sign in to add a comment
 
Reported by DonBe...@gmail.com, Oct 8, 2009
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
Sorry, I should have marked this 'enhancement'  but I don't see a way to change it.
Oct 19, 2009
Project Member #2 adamrs...@gmail.com
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
Project Member #3 adamrs...@gmail.com
still thinking about this one
(changed title)
Summary: Event coloring through CalEvent properties
Jan 20, 2010
#5 sneed...@gmail.com
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
#6 sneed...@gmail.com
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.
text color function - php.txt
1.8 KB   View   Download
Feb 22, 2010
#7 sowji...@gmail.com
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
#8 sneed...@gmail.com
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
#10 sowji...@gmail.com
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
#11 sneed...@gmail.com
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
#12 sowji...@gmail.com
Did you get a chance to check it out with the latest version of fullcalendar 1.4.5?
Feb 23, 2010
#13 sneed...@gmail.com
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
#15 sneed...@gmail.com
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
Project Member #16 adamrs...@gmail.com
 Issue 446  has been merged into this issue.
Jun 16, 2010
Project Member #17 adamrs...@gmail.com
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
#18 t...@webchanix.com
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
#19 jacobvan...@gmail.com
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
Project Member #21 althaus.it
@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.
Aug 13, 2013
Project Member #23 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Implemented
Aug 13, 2013
Project Member #24 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Released
Sign in to add a comment

Powered by Google Project Hosting