Styling del primo e ultimo giorno degli eventi di più giorni del calendario CLNDR.js

Question

Sto utilizzando clndr.js (http://kylestetz.github.io/CLNDR/) per visualizzare le date per le quali è prenotato un cottage. Questi vengono sempre visualizzati utilizzando il sistema di eventi di più giorni in quanto la prenotazione minima è di 3 giorni. Ora devo definire in modo diverso il primo e l'ultimo giorno dell'evento, per mostrare che sono giorni di transizione. Idealmente lo farei aggiungendo una classe allo td. Questo è quello che ho finora:

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

Esempio 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/Sottolineatura

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

Sto lottando per capire come indirizzare i primi e gli ultimi giorni ad applicare uno stile diverso. Sto usando moment.js pure se può essere usato. Aiuto molto apprezzato!

Answer 1

Quindi alla fine ho passato un po 'di tempo a considerare Underscore e Moment per ottenere ciò che cercavo. Di seguito è riportato il mio codice aggiornato, utilizzando un condizionale in Underscore per controllare la data utilizzando Moment e aggiungere una classe allo <td> se necessario. Questo è stato combinato con un adeguamento di come i miei eventi sono stati rappresentati nella matrice JSON:

HTML/Sottolineatura

<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

Okay, spero che tu possa trovare qualcosa di utile in quanto mi ci è voluto molto tempo per farlo funzionare. Probabilmente dovrai modificare alcuni bit per il tuo modello, ecc., Ma dovresti darti una buona idea. Prestare attenzione alla parte <% _.each come questo è ciò che rende il lavoro di classe dal multi evento JSON

Ecco il mio codice modello 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> 

Ecco il mio codice 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, 
    }); 
    }); 

Poi il mio codice 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; 
    } 

E infine, alcuni jQuery per rendere quelli le lezioni funzionano Avrete anche bisogno di aggiungere una classe .date per ogni data sul calendario:

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

Anche se questo jsFiddle non utilizza CLNDR.js, è possibile vedere il lavoro styling :)

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