jQuery CLNDR：在日期块中添加 div答案

【问题标题】：jQuery CLNDR: add div within date blockjQuery CLNDR：在日期块中添加 div
【发布时间】：2013-11-19 16:43:29
【问题描述】：

我目前正在使用 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>

【问题讨论】：

标签： javascript jquery html css calendar

【解决方案1】：

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

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

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

但我不知道插件。可能是您缺少的更多功能，然后您可能想要对所有 $(".event") 进行循环。匹配日期（您从 id 获得的日期）并检查您的数组是否需要放置在该 div 中。

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

【讨论】：

感谢您的建议！是的，该插件只有大约一个月的历史，因此它的文档/演示有限。理想情况下，由于网站将进行内容管理，因此我需要一个解决方案，该解决方案可以获取数组中的每个事件并将 div 添加到相关的日期块中，而不是我必须手动执行...如果可能的话

【解决方案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;
}

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

【讨论】：