javascript - jQuery CLNDR : add div within date block

Question

我目前正在使用 CLNDR 插件:http://kylestetz.github.io/CLNDR/一个很棒的用于制作日历的小 jQuery 插件。理想情况下，我希望将日历用作事件日历，即如果您将事件添加到特定日期，它会将相关信息添加到该日期 block 。
我目前有这个 jsFiddle 演示:http://jsfiddle.net/neal_fletcher/32EEF/
默认情况下，数组中的事件具有不同的背景颜色。理想情况下，我想在包含事件的 .day div 中添加一个 div，其中包含事件标题、信息等。没什么特别的，只是改变背景颜色。这是可能吗？任何建议将不胜感激!
jQuery:

$(document).ready( function() {

  // here's some magic to make sure the dates are happening this month.
  var thisMonth = moment().format('YYYY-MM');

  // Here's our events array. We could grab this via AJAX as well.
  var eventArray = [
    { date: thisMonth + "-24 07:52", title: "This is an event title", url: "http://google.com", time: "7:15PM" },
    { date: thisMonth + "-28", title: "the 28th, Part 1", url: "http://www.google.com" },
    { date: thisMonth + "-28", title: "the 28th, Part 2", arbitraryObject: 42 },
    { date: thisMonth + "-16", title: "Another title", anotherObject: "clndr exposes whatever is in your event object" }
  ];

  var clndr2 = $('.cal2').clndr({
    template: $('#template-calendar').html(),
    events: eventArray,
    startWithMonth: moment().add('month', 0),
    clickEvents: {
      click: function(target) {
        console.log(target);
      }
    }
  });

  // bind both clndrs to the left and right arrow keys
  $(document).keydown( function(e) {
    if(e.keyCode == 37) {
      // left arrow
      clndr1.back();
      clndr2.back();
    }
    if(e.keyCode == 39) {
      // right arrow
      clndr1.forward();
      clndr2.forward();
    }
  });

});

HTML:

  <div class="container">

      <h3></h3>

    <div class="cal2">
      <script type="text/template" id="template-calendar">
        <div class="clndr-controls">
          <div class="clndr-previous-button">&lsaquo;</div>
          <div class="month"><%= month %></div>
          <div class="clndr-next-button">&rsaquo;</div>
        </div>
        <div class="clndr-grid">
          <div class="days-of-the-week">
            <% _.each(daysOfTheWeek, function(day) { %>
              <div class="header-day"><%= day %></div>
            <% }); %>
            <div class="days">
              <% _.each(days, function(day) { %>
                <div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %></div>
              <% }); %>
            </div>
          </div>
        </div>
      </script>

    </div>
  </div>

Answer 1

我不知道 CLNDR，但您可以手动完成。由于日历中的每一天都有一个唯一的 ID，您可以使用它来插入您的事件。喜欢:

$("#calendar-day-2013-11-16").insert($("<div/>").html("Inner event div"));

因此，对于数组中的每个事件，请检查日期并使用 $("calendar-day-")(替换为事件的日期)。

但是我不知道这个插件。可能是您缺少的更多功能，那么您可能想要对所有 $(".event") 进行循环。匹配日期(您从 id 中获取)并检查您的数组以了解您需要在该 div 中放置的内容。

除非 CLNDR 中有一个方法可以处理日历的自定义内容。