Элементы событий с разными CSS

Question

У меня есть следующий CSS, чтобы показать все событие как «выполненное».

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

Как написать CSS только для изменения только fc-event-title?Я видел, что мой класс afc-complete добавлен в элемент <div>, но я не могу найти решение, чтобы просто изменить заголовок (fc-event-title) или время.Гюнтер

Answer 1

@ wsanville & @ Thomas

Я думаю, что это не так просто, извините. Простое определение того, что сказал wsanville, изменится для всех событий. Дело в том, чтобы изменить только для "завершенных" событий. Для этого у меня есть

if (newEvent.completed != null) {
  newEvent.className = "afc-completed";
}

Но это касается div, а не только title. Я думаю, что мне нужно добавить класс непосредственно к / или вместо '.fc-event-title' только для тех выбранных / завершенных событий и только к заголовку. Вот типичный 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>

Но newEvent.className не работает так! Есть ли другая возможность?

И мне нужно больше модификаций для представления событий, таких как дополнительные значки или текст с курсивом ... и различные комбинации этих «опций».

Спасибо за вашу помощь. Гюнтер

Answer 2

ОК, вот рабочее решение для определения "важных" и "завершенных" атрибутов события:

newEvent.className = ((newEvent.completed != null)? "afc-completed " : "") 
  + ((newEvent.priority != null) ? "afc-important " : "");

и

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

Спасибо за помощь;)

Answer 3

Если вы разместите часть разметки, я могу дать лучший ответ, но в общем случае вам потребуется добавить в таблицу стилей дополнительное правило, которое применяется к элементам класса fc-event-title. Как то так:

.fc-event-title
{
    color: #ff0000; /* change the color values to something more appropriate */
    background-color: #00ff00;
    text-decoration: line-through;
}