Event items with different CSS - css

Question

I have the following CSS to show a whole event as "completed".
.afc-completed,
.fc-agenda .afc-completed .fc-event-time,
.afc-completed a {
color: yellow; /* text color */
background-color: #6C3; /* default BACKGROUND color #36c */
text-decoration: line-through;
}
How do I write a CSS for only changing the fc-event-title only?
I saw my class afc-completed is added to the <div> element, but I don't find a solution to just change the title (fc-event-title) or the time.
Any help here?
Günter

Answer 1

#wsanville & #Thomas
I think that's not that simple, sorry.
Just defining what wsanville said will change for all events. The point is to change only for "completed" events.
For that I have
if (newEvent.completed != null) {
newEvent.className = "afc-completed";
}
But that's going to the div and not to title only.
I think I need to add a class directly to/or instead of the '.fc-event-title' for just only those selected/completed events, and only to the title.
Here is a typical div:
<div style="position: absolute; z-index: 8; left: 144px; width: 135px; top: 40px;"
class="fc-event fc-event-hori fc-corner-left fc-corner-right afc-completed ">
<a><span class="fc-event-time">15:15 - 16:15<br></span>
<span class="fc-event-title">Fri Dille</span>
</a>
<div class="ui-resizable-handle ui-resizable-e" unselectable="on"
style="-moz-user-select: none;">
</div>
</div>
But the newEvent.className doesn't work like that!
Is there another possibility?
And I need more modifications to the event presentation, like additional icons or text with italic ... and different combinations of those 'options'.
Thanks for your help.
Günter

Answer 2

OK, here is a working solution to solve for "important" and "completed" attributes of the event:
newEvent.className = ((newEvent.completed != null)? "afc-completed " : "")
+ ((newEvent.priority != null) ? "afc-important " : "");
and
.afc-completed .fc-event-title {
color: yellow;
background-color: #A6B5BC; /* grey */
text-decoration: line-through;
}
.afc-important .fc-event-title {
color: #C00 !important;
font-weight: bold !important;
}
Thanks for helping ;)

Answer 3

If you post some of your markup, I can give a better answer, but in the general case, you will need to add an additional rule to your stylesheet that applies to elements with the fc-event-title class. Something like this:
.fc-event-title
{
color: #ff0000; /* change the color values to something more appropriate */
background-color: #00ff00;
text-decoration: line-through;
}