Stylizacja pierwszych i ostatnich dni wydarzeń w kalendarzu CLNDR.js wielodniowych

Question

Używam clndr.js (http://kylestetz.github.io/CLNDR/) do wyświetlania dat, dla których dom wakacyjny jest zarezerwowany. Są one zawsze wyświetlane za pomocą wielodniowego systemu imprez, ponieważ minimalna rezerwacja wynosi 3 dni. Teraz muszę inaczej stylizować pierwsze i ostatnie dni wydarzenia, aby pokazać, że są dniami zmiany. Idealnie byłoby zrobić to przez dodanie klasy do td. To, co mam tak daleko:

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); 
       } 
      } 
     }); 

Przykład 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/Podkreślenie

<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> 

Staram się wypracować, jak celować w te pierwsze i ostatnie dni, aby zastosować inną stylizację. Używam też pliku chwili.js, jeśli można go użyć. Pomoc bardzo doceniona!

Answer 1

Więc w końcu spędziłem trochę czasu, patrząc na użycie Podkreślenia i Momentu, aby osiągnąć to, czego szukałem. Poniżej znajduje się mój zaktualizowany kod, używając warunkowego w podkreśleniu, aby sprawdzić datę za pomocą Momentu, i dodaj klasę do <td>, jeśli to konieczne. To łączy się z korektą jak moi wydarzenia były reprezentowane w tablicy JSON:

HTML/Underscore

<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

Okej, więc mam nadzieję, że możesz znaleźć niektóre z tych przydatnych informacji, ponieważ zajęło mi to dużo czasu, aby to zadziałało. Prawdopodobnie będziesz musiał zmodyfikować niektóre bity dla swojego szablonu itp., Ale powinien dać ci dobry pomysł. Należy zwrócić uwagę na <% _.each części jak to czyni pracę klasową z Multi Event JSON

Oto mój kod szablonu 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> 

Oto mój kod 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, 
    }); 
    }); 

Następnie mój kod 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; 
    } 

I w końcu, niektóre jQuery, aby te zajęcia działają. Trzeba także dodać klasę .date aby każdy dzień w kalendarzu:

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

Chociaż jsFiddle nie używa CLNDR.js, można zobaczyć pracę stylizacji :)

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