Event items with different 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

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;
}

Answer 2

@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 3

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 ;)