css - 具有不同 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;
    }

如何编写仅更改 fc-event-title 的 CSS？ 我看到我的类 afc-completed 被添加到 <div>元素，但我找不到仅更改标题 (fc-event-title) 或时间的解决方案。

这里有什么帮助吗？ 君特

Answer 1

@wsanville & @Thomas

抱歉，我认为事情没那么简单。 只是定义 wsanville 所说的内容将改变所有事件。重点是仅针对“已完成”事件进行更改。 为此我有

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

但那只是转到 div 而不是标题。 我想我需要直接向/或代替“.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 不是那样工作的! 还有其他可能吗？

而且我需要对事件演示进行更多修改，例如附加图标或斜体文本......以及这些“选项”的不同组合。

感谢您的帮助。 君特