Styling ersten und letzten Tagen von CLNDR.js Kalender mehrtägige Veranstaltungen

Question

Ich benutze clnrdr.js (http://kylestetz.github.io/CLNDR/), um Daten anzuzeigen, für die ein Ferienhaus gebucht ist. Diese werden immer mit dem mehrtägigen Ereignissystem angezeigt, da die Mindestbuchung 3 Tage beträgt. Ich muss jetzt die ersten und letzten Tage der Veranstaltung anders gestalten, um zu zeigen, dass es Umstellungstage sind. Idealerweise würde ich dies tun, indem ich eine Klasse zum td hinzufüge. Das ist, was ich habe, so weit:

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

Beispiel 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/Unders

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

Ich kämpfe darum, herauszufinden, wie man diese ersten und letzten Tage anwendet, um ein anderes Styling anzuwenden. Ich benutze moment.js auch, wenn das verwendet werden kann. Hilfe sehr geschätzt!

Answer 1

Also verbrachte ich einige Zeit damit, Underscore und Moment zu verwenden, um zu erreichen, wonach ich suchte. Unten ist mein aktualisierter Code, der eine Bedingung in Underscore verwendet, um das Datum mit Moment zu überprüfen, und eine Klasse zu <td> falls erforderlich hinzuzufügen. Dies wurde mit einer Anpassung kombiniert, wie meine Ereignisse im JSON-Array vertreten waren:

HTML/Unders

<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, ich hoffe, dass Sie einige davon nützlich finden können, da es eine lange Zeit gedauert hat, bis dies funktioniert. Sie werden wahrscheinlich einige Bits für Ihre Vorlage usw. ändern müssen, aber sollten Sie eine gute Idee geben. Achten Sie auf die <% _.each Teil wie das ist, was die Klasse Arbeit aus dem Multi-Event-JSON

Code Hier ist meine CLNDR Vorlage macht:

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

Hier ist mein CLNDR.js Code:

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

Dann Mein CSS-Code:

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

Und dann endlich, einige jQuery, um diese zu machen Klassen arbeiten. Sie finden auch eine .date Klasse zu jedem Datum im Kalender hinzufügen müssen:

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

Obwohl diese jsFiddle nicht CLNDR.js verwenden, können Sie das Styling Arbeits sehen :)

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