具有不同CSS的事件项目

问题描述：

我有以下CSS将整个事件显示为“已完成”。具有不同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）或时间。

这里有什么帮助吗？ Günter

你还没有一个fc事件标题。然而，只需将它放在css的底部：'.fc-event-title {background-color：red; }'或类似的，它应该工作。 – 2010-09-19 10:44:23

答

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

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

答

@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不喜欢的工作！还有另一种可能吗？

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

感谢您的帮助。冈特

答

OK，这里是一个可行的解决方案，以解决 “重要” 和 “完成” 事件的属性：

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的事件项目

相关推荐