| Issue 284: | className & CSS not changing event colour | |
| 5 people starred this issue and may be notified of changes. | Back to list |
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
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
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
>>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
Oops
Try:
.fc. newEvent,
.fc-agenda .newEvent .fc-event-time,
.fc .newEvent a {
background-color: black;
border-color: black;
color: red;
}
Jan 13, 2010
That one broke it in firefox, but still works in IE, still no dice in Chrome :-D
Jan 13, 2010
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
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
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
it would probably just be easiest if you posted your html/css files in a zip file
Feb 15, 2010
hi emadamin3, I've attached an example of changing colors via className attribute as Adam described in comment 8. Does it work for you?
Feb 26, 2010
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
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
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.
|
|
| ► Sign in to add a comment |
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