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

如果您发布了一些标记，我可以给出更好的答案，但在一般情况下，您需要在样式表中添加一个适用于fc-event-title类元素的附加规则。像这样：

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

Answer 2

@wsanville＆amp; @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 不能那样工作！还有其他可能性吗？

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

感谢您的帮助。君特

Answer 3

好的，这是解决事件“重要”和“已完成”属性的有效解决方案：

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

感谢您的帮助;）

具有不同CSS的事件项

3 个答案: