Past Events

Undeniably, the method is a bit hacky and is 3 step process to get your exact desired features. But it works!

1) Prevent the calendar from going before todays date by adding a startDate constraint to the JS object:

constraints: {
  startDate: moment().format("YYYY-MM-DD")
}

2) In your CSS stylesheet, at the bottom of the code tell your calendar not to highlight events in the past:

.clndr-holder .clndr-grid .days .day.past.event .day-number {
  background:inherit; 
  color:inherit; 
}

3) In your template, add some conditional statements. First we’ll prevent a multiday event that’s ongoing but started in the past from unhighlighting (by removing the *past* selector used above), then we’ll hide the event listing if that ended in the past too

<div class="clndr-controls">
  <div class="current-month"><%= month %> <%= year %></div>
  <div class="clndr-nav clndr-clearfix">
    <div class="clndr-previous-button">‹</div>
    <div class="clndr-next-button">›</div>
  </div>
</div>
<div class="clndr-grid">
  <div class="days-of-the-week clndr-clearfix">
    <% _.each(daysOfTheWeek, function(day) { %>
    <div class="header-day"><%= day %></div>
    <% }); %>
  </div>
  <div class="days clndr-clearfix">
    <% _.each(days, function(day) { %>
    <!-- Start of event check -->
    <% 
      var multiDayEventToday = false;
      _.each(day.events, function(event) {
        if (event.start != event.end && event.end >= moment().format("YYYY-MM-DD")) { multiDayEventToday = true; } 
      });
      if ( multiDayEventToday ) {
        day.classes = day.classes.replace(/\bpast/,"")
      }
      %>
      <!-- End of event check -->
      <div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div>
    <% }); %>
  </div>
</div>
<div class="event-listing">
  <div class="event-listing-title">Events</div>
  <% _.each(eventsThisMonth, function(event) { %>
    <!-- Start of conditional statement -->
    <% if (event.end >= moment().format("YYYY-MM-DD")) { %>
      <% if (event.url) {  %><a target="_blank" href="<%= event.url %>" <% } else {  %><div <% }  %> class="event-item clndr-clearfix">
        <span class="event-item-date">
          <%= moment(event.start).format("D MMMM") %>
          <% if (event.end != event.start) {  %>
            – <%= moment(event.end).format("D MMMM") %>
          <% } %>
        </span>
        <span class="event-item-name"><%= event.title %></span>
        <% if (event.time) {  %>
          <span class="event-item-time"><%= event.time %></span>
        <% } %>
        <% if (event.desc) {  %>
          <span class="event-item-desc"><%= event.desc %></span>
        <% } %>
      <% if (event.url) {  %></a><% } else {  %></div><% }  %>
    <!-- End of conditional statement -->
    <% }  %>
  <% }); %>
</div>

Ian

• This reply was modified 9 years, 7 months ago by i4nd90.
• This reply was modified 9 years, 7 months ago by i4nd90.

There were some more instance options added in version 1.0.2 which means you no longer need to do this manually. You can just check the boxes to show your choice or past/present/future events.