javascript - Jquery Codrops Calendario - 如何设置每个事件的背景颜色

Question

我正在尝试从 Codrops Calendario 自定义此日历上每个事件的背景。 (http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/)

我无法弄清楚jquery.calendario.js如何从文件data.js解析变量。

有人知道怎么做吗？

这是data.js的结构:

var codropsEvents = {
    '05-06-2015' : '<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora perferendis praesentium molestias libero dicta asperiores pariatur dolor in illum, voluptatem eius illo sit odio cumque modi ea ullam commodi, maiores?</span>',
};

Answer 1

我不知道有人在我的仓库或 codrops 上提出问题。但是您可以将 category 键添加到 data.js 中的事件对象或数据来源的任何位置。例如，假设像 Shalaby 有一个 busy 事件，您的事件将是

'05-06-2015' : [{
     content: "Lorem ipsum",
     category: "busy"
}]

注意:添加 content 键是强制性的，并且从 v4 开始也必须将偶数对象放入数组中以保持一致性。此外，您不必再添加 span 标签，因为 calendario 会为您添加它，如果您有 url 键，它会用带有 href 的 anchor 标记包装内容属性指向 url。

因此上述代码渲染的 html 代码将是

 <div class="fc-calendar-event">
     <span class="calendar-busy">Lorem ipsum</span>
     ....
 </div>

该类现在为 calendar-busy，并且默认情况下，如果未提供类别(如 Shalaby 的示例中所示)，则该类为 calendar-default。因此，使用这种方法，列表中的各个事件可以通过 css 具有不同的颜色，但如果您想要像 Shalaby 那样，则很难在 Calendario 中实现它，因为一个日期可以包含具有不同类别的多个事件，但无论哪种方式，您都可以通过使用 :has 或 :not 的 CSS 这些似乎尚未实现，但它们是 future ，因此请寻找解决这些问题的方法。