Question

我目前正在使用CLNDR插件：http://kylestetz.github.io/CLNDR/一个很棒的小jQuery插件，用于生成日历。理想情况下，我希望将日历用作事件日历，即如果您将事件添加到特定日期，它会将相关信息添加到该日期块。
我目前有这个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中有一个处理日历自定义内容的方法。

Answer 2

我仍然会手动添加div，所以我会保留其他答案并创建一个新的。查看插件，您始终可以将div添加到所有日期，然后调整样式以使事件看起来有点不同。

示例：http://jsfiddle.net/32EEF/5/

我所做的是调整模板以添加div（使用自定义类，如容器）：

<% _.each(days, function(day) { %>
    <div class="<%= day.classes %>" id="<%= day.id %>"><div class="container"><%= day.day %></div></div>
<% }); %>

然后为事件添加一些样式：

.day .container {
    width: 100%;
    height: 100%;
}

.day.event .container {
    width: 50%;
    height: 50%;
    margin:25%;
    background-color: pink;
}

这样你就可以在事件中添加元素，让它们看起来与颜色不同。

jQuery CLNDR：在日期块中添加div

2 个答案: