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

我不知道在我的回购或问题上有问题。但是，您可以将category键添加到data.js中的事件对象或数据来自的任何位置。例如，假设Shalaby有一个busy事件，你的事件将是

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

注意：必须添加content密钥，并且从v4开始，将even对象放在数组中也是必需的，以保持一致性。此外，您不必再添加span标记，因为calendario会为您添加它，如果您有url键，它将使用href属性指向您的{{1}的锚标记包装内容。 }}

因此，为上述代码呈现的html代码将是

url

该类现在为 <div class="fc-calendar-event"> <span class="calendar-busy">Lorem ipsum</span> .... </div> ，默认情况下，如果未提供类别，则为calendar-busy，如Shalaby的示例所示。因此，通过这种方法，列表中的各个事件可以通过css具有不同的颜色，但如果您想要像Shalaby，则很难在Calendario中实现它，因为日期可以包含具有不同类别的多个事件，但无论哪种方式，您都可以通过使用calendar-default或:has的CSS似乎没有实现，但它们是未来，所以寻找围绕这些的工作是行不通的。

Answer 2

我知道如果为时已晚，我确信可能会有更好的方法，但这就是我做的方式：

假设您使用的是deviprsd21's Calendario repo

中的v4

在此版本中，事件在'html标记日内，例如：

<div class="fc-today fc-future fc-content">
  <span class="fc-date">4</span>
  <span class="fc-weekday">Sun</span>
  <div class="fc-calendar-events">
    <div class="fc-calendar-event">
      <span class="calendar-default">Busy</span>
      <time class="fc-allday" datetime="true"></time>
      <time class="fc-starttime" datetime="2015-10-04T00:00:00.000Z"></time>
      <time class="fc-endtime" datetime="2015-10-04T23:59:00.000Z"></time>   
      <note></note>
    </div>
  </div>
</div>

我的事件是通过json传递的，所以在我的情况下，“Busy”是我事件中唯一的状态值。 所以在以下函数中：

$('#calendar').on('shown.calendar.calendario', function(){

我补充说：

    $('.calendar-default').each(function() {
      if ($(this).html() == "Busy"){
        $(this).closest('.fc-content').addClass("busy");
      } else {
        $(this).closest('.fc-content').addClass("available");
      }
    });

在css中我添加了繁忙的和可用的类，每个类都有不同的颜色，输出​​是：

编辑：如果您找到了更简洁的方法，请告诉我们：）