Issue 284: className & CSS not changing event colour
Status:  Done
Owner: ----
Closed:  Feb 2010
Reported by sto...@gmail.com, Jan 12, 2010
I followed the instructions for using className and CSS to change an event's 
colour but it doesn't work for me.

In my Python code that generates the Json response:

d["className"] = ("calendar-entry-%s" % entry.content_type.name)

For example the class name is calendar-entry-ticket.

My CSS:

.calendar-entry-ticket,
.fc-agenda .calendar-entry-ticket .fc-event-time,
.calendar-entry-ticket a {
        background-color: green; /* background color */
        border-color: green;     /* border color (often same as background-color) */
        color: yellow;           /* text color */
}

But the event's colour is still blue.

If I inspect the DIV I see:

class="fc-event fc-event-hori fc-corner-left calendar-entry-ticket"

Am I doing something silly here? Thanks
Jan 13, 2010
#1 atw...@gmail.com
I'm having the same issue with the month view, however only in IE and Chrome. It 
works in Firefox.  I added 

.newEvent,
.fc-agenda .newEvent .fc-event-time,
.newEvent a {
     background-color: black;
     border-color: black;
     color: red;
     }

to the Global Event Styles of fullcalendar.css

And this code to add an event when a day is clicked:

dayClick:   function(dayDate, allday, jsEvent, view){
	$('#calendar').fullCalendar('renderEvent',{title: 'new event', start: 
dayDate, className: 'newEvent' }, true);
}

Chrome and IE show the default styled events, but Firefox will show the newEvent 
styled event.

Any help appreciated.
Andy
Jan 13, 2010
#2 sto...@gmail.com
I should point out that I added the CSS to my own CSS file - I didn't modify fullcalendar.css. 
Am I supposed to modify fullcalendar.css or can I add it to my own file?

Thanks
Jan 13, 2010
#3 atw...@gmail.com
Just to follow up on myself, to get it working in both Firefox and IE you can do this 
to your CSS
.newEvent,
.fc-agenda .newEvent .fc-event-time,
.fc .newEvent a {
     background-color: black;
     border-color: black;
     color: red;
     }

(added a .fc before the .newEvent)

Still not working in Chrome though. :-(
Jan 13, 2010
#4 atw...@gmail.com

>>Am I supposed to modify fullcalendar.css or can I add it to my own file?

I honestly don't know.  I have had some success adding it to my fullcalendar.css havent 
tried adding it to my own.
Jan 13, 2010
#5 sto...@gmail.com
Oops

Try:

.fc. newEvent,
.fc-agenda .newEvent .fc-event-time,
.fc .newEvent a {
     background-color: black;
     border-color: black;
     color: red;
     }
Jan 13, 2010
#6 atw...@gmail.com
That one broke it in firefox, but still works in IE, still no dice in Chrome :-D
Jan 13, 2010
#7 sto...@gmail.com
That's funny - it works for me in Firefox 3.015 and Chromium, both on Linux. And also on 
Firefox 3.5, IE8 and Chrome on WinXP.
Jan 19, 2010
Project Member #8 adamrs...@gmail.com
hi all, try use the css described at
http://arshaw.com/fullcalendar/docs/event_rendering/Colors/ but make sure it is
defined *after* fullcalendar.css. so either in a separate stylesheet who's <link> tag
comes after fullcalendar.css's link tag, or in a <style> tag that comes after
fullcalendar.css's link tag.

that should eliminate the need for adding ".fc" before it.

please let me know if this is the problem
Feb 5, 2010
#9 emadam...@gmail.com
U have tried your last suggestion. I can't seem to change the colours at all. No matter what I do I get the blue 
boxes for the events. Do you have any examples with different colours. By the way this is a fantastic script.
Feb 6, 2010
Project Member #10 adamrs...@gmail.com
it would probably just be easiest if you posted your html/css files in a zip file
Feb 15, 2010
#11 teddyy...@gmail.com
hi emadamin3,

I've attached an example of changing colors via className attribute as Adam described
in comment 8. Does it work for you?
colorChange.zip
40.1 KB   Download
Feb 26, 2010
Project Member #12 adamrs...@gmail.com
thanks for the help teddyyueh,
that example works for me in ff, chrome, ie.
hope this works for you emadamin3
closing this issue
Status: Done
Nov 7, 2011
#13 zielin...@gmail.com
I think this issue is reoccuring in 1.5.2

I've downloaded colorChange.zip from above and replaced the js/css with the new files from 1.5.2. After this update the colors on the demo are ignored.
Aug 16, 2012
#15 danielbc...@gmail.com
Index: src/main/resources/META-INF/resources/primefaces/schedule/schedule.css
===================================================================
--- src/main/resources/META-INF/resources/primefaces/schedule/schedule.css	
I'm working on fixing a bug in the Primefaces schedule (implementing Full Calendar) and noticed this bug is back. Looking at the rendered HTML the style-tag is applied as such -> 
<div class="fc-event fc-event-skin .... #{customClass}">
  <div class="fc-event-skin ..."> time/content </div>
</div>

Because the color/border are specified in the "fc-event-skin" this causes a custom style to be ignored. Rendering basically causes this style to be applied twice, thus overriding your custom styles.

SVN Patch (possible variations)(revision 7995)
+++ src/main/resources/META-INF/resources/primefaces/schedule/schedule.css	(working copy)
@@ -263,6 +263,7 @@
 	border-width: 0;
 	font-size: .85em;
 	cursor: default;
+	background-color: #36c;
 	}
 	
 a.fc-event,
@@ -280,7 +281,6 @@
 	
 .fc-event-skin {
 	border-color: #36c;     /* default BORDER color */
-	background-color: #36c; /* default BACKGROUND color */
 	color: #fff;            /* default TEXT color */
 	}
 	
Basically I moved the background out of the skin which allows most styles to override.