javascript - 样式化 CLNDR.js 日历多日事件的第一天和最后一天

Question

我正在使用 clndr.js ( http://kylestetz.github.io/CLNDR/ ) 来显示预订度假屋的日期。这些总是使用多日事件系统显示，因为最少预订是 3 天。我现在需要为事件的第一天和最后一天设置不同的样式，以表明它们是转换日。理想情况下，我会通过向 td 添加一个类来做到这一点。这是我目前所拥有的:

JS

$('#calendar').clndr({
          template: $('#calendar-template').html(),
          weekOffset: 1,
           daysOfTheWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
           targets: {
               nextButton: 'clndr-next',
               previousButton: 'clndr-previous'
           },
           multiDayEvents: {
               startDate: 'start',
               endDate: 'end'
           },
           events: events,
           clickEvents: {
               click: function(target) {
                   //alert(target);
               }
           }
      });

示例 JSON

var events = [
  {start:'2016-05-29T00:00:00+00:00',
  end:'2016-06-01T00:00:00+00:00',
  title:'Mrs A N Human',},
  {start:'2016-08-10T00:00:00+00:00',
  end:'2016-08-17T00:00:00+00:00',
  title:'Mr A Person',}
];

HTML/下划线

 <div id="calendar">
  <script type="text/template" id="calendar-template">
   <table class="table">
    <thead>
     <tr>
      <th class='clndr-previous'>&lt;</th>
      <th colspan="5"><%= month %> <%= year %></th>
      <th class='clndr-next'>&gt;</th>
     </tr>
     <tr>
      <% _.each(daysOfTheWeek, function(day) { %>
      <th class="header-day"><%= day %></th>
      <% }); %>
     </tr>
    </thead>
    <tbody>
      <tr class="days"><% _.each(days, function(day, index) { %>
      <td class="<%= day.classes %>" id="<%= day.id %>">
       <span class="day-number">
       <%= day.day %>
       </span>
     </td>
      <% if ((index + 1) % 7 == 0) { 
           %> </tr><tr> <% 
           } %><% }); %>
     </tr>
    </tbody>
   </table>
  </script>
</div>

我正在努力研究如何针对第一天和最后几天应用一些不同的样式。如果可以使用，我也在使用 moment.js。帮助非常感谢!

Answer 1

所以最终我花了一些时间研究使用 Underscore 和 Moment 来实现我所追求的目标。下面是我更新的代码，在 Underscore 中使用条件来使用 Moment 检查日期，并向 <td> 添加一个类如有必要。这与对我的事件在 JSON 数组中的表示方式的调整相结合:

HTML/下划线

<div id="calendar">
  <script type="text/template" id="calendar-template">
    <table class="table">
      <thead>
        <tr>
          <th class='clndr-previous'>&lt;</th>
          <th colspan="5"><%= month %> <%= year %></th>
          <th class='clndr-next'>&gt;</th>
        </tr>
        <tr>
          <% _.each(daysOfTheWeek, function(day) { %>
          <th class="header-day"><%= day %></th>
          <% }); %>
        </tr>
      </thead>
      <tbody>
        <tr class="days">
          <% _.each(days, function(day, index) { %>
            <td class="<%= day.classes %> <% _.each(day.events, function(event) { %><% if( moment(event.start).isSame( day.date ) ){ %>start<% } %><% }); %> <% _.each(day.events, function(event) { %><% if( moment(event.end).isSame( day.date ) ){ %>end<% } %><% }); %>">
              <span class="day-number"><%= day.day %></span>
            </td>
          <% if ((index + 1) % 7 == 0) { %> </tr><tr>  <% } %>
          <% }); %>
         </tr>
       </tbody>
    </table>
  </script>
</div>

JSON

var events = [
  {start:'2016-05-29',
  end:'2016-06-01',
  title:'Mrs A N Human',},
  {start:'2016-08-10',
  end:'2016-08-17',
  title:'Mr A Person',}
];