樣式化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',}
];

Answer 2

好的，所以我希望你能找到一些有用的東西，因為我花了很長時間才能讓它發揮作用。 您可能需要為模板等修改一些位，但應該給您一個好主意。 注意<% _.each部分，因為這使得該類可以從多事件JSON中工作

這是我的CLNDR模板代碼：

<div id="mini-clndr">
  <script id="mini-clndr-template" type="text/template">
    <div class="controls">
      <div class="clndr-previous-button"><img src="/assets/local/img/calendar-left-arrow.png"></div>
      <div class="month">
        <%= month %>
          <%= year %>
      </div>
      <div class="clndr-next-button"><img src="/assets/local/img/calendar-right-arrow.png"></div>
    </div>

    <div class="days-container">
      <div class="days">
        <div class="headers">
          <% _.each(daysOfTheWeek, function(day) { %>
            <div class="day-header">
              <%= day %>
            </div>
            <% }); %>
        </div>
        <% _.each(days, function(day) {
                    var classes = '';
                    if( day.events.length ){
                        for( var i = 0; i < day.events.length; i++ ){
                            classes += ' ' + day.events[i].class;
                        }
                    }
                %>
          <div class="<%= day.classes %><%= classes %>" id="<%= day.id %>">
            <%= day.day %>
          </div>
          <% }); %>
      </div>
      <div class="events">
        <div class="headers">
          <div class="x-button">x</div>
          <div class="event-header">EVENTS</div>
        </div>
        <div class="events-list">
          <% _.each(eventsThisMonth, function(event) { %>
            <div class="event">
              <a target="blank" href="<%= event.url %>">
                <%= moment(event.date).format('MMMM Do') %>:
                  <%= event.title %>
              </a>
            </div>
            <% }); %>
        </div>
      </div>
    </div>
  </script>
</div>

這是我的CLNDR.js代碼：

  var clndr = {};

  $(function() {

    var currentMonth = moment().format('YYYY-MM');
    var nextMonth = moment().add(1, 'month').format('YYYY-MM');

    var events = [
      // Multiday Event Code
      {
        start: '2016-05-17',
        end: '2016-05-19',
        title: 'Monday to Friday Event',
        class: 'long-event'
      },
    ];

    $('#mini-clndr').clndr({
      template: $('#mini-clndr-template').html(),
      weekOffset: 1,
      events: events,
      multiDayEvents: {
        endDate: 'end',
        singleDay: 'date',
        startDate: 'start'
      },
      clickEvents: {
        click: function(target) {
          if (target.events.length) {
            var daysContainer = $('#mini-clndr').find('.days-container');
            daysContainer.toggleClass('show-events', true);
            $('#mini-clndr').find('.x-button').click(function() {
              daysContainer.toggleClass('show-events', false);
            });
          }
        }
      },
      adjacentDaysChangeMonth: true,
      forceSixRows: false,
      showAdjacentMonths: false,
    });
  });

然后是我的CSS代碼：

  .long-event {
    background: orange;
  }

  :not(.long-event) + .long-event, .long-event:first-child {
    background: orange;
    border-radius: 50% 0 0 50%;
  }

  .last {
    border-radius: 0 50% 50% 0;
  }

最后，一些jQuery使這些類工作。 您還需要在日歷上的每個日期添加.date類：

$('.long-event + .date:not(.long-event)').prev().addClass('last');

雖然這個jsFiddle沒有使用CLNDR.js，你可以看到造型工作:)

https://jsfiddle.net/andyjh07/ke0euh5m/