i4nd90

Hi Nadja

I’m not quite sure what you mean when you say the year calendar on the left. Anyway, using the configuration options it is possible to show all events from one year in a list, the basic premise of which is below:

HTML template:

<div class="clndr-controls">
  <div class="current-month">
    <%= intervalStart.format("YYYY") %>
  </div>
  <div class="clndr-nav clndr-clearfix">
    <div class="clndr-previous-button">‹</div>
    <div class="clndr-next-button">›</div>
  </div>
</div>

<div class="event-listing">
  <div class="event-listing-title">Events</div>
  <% _.each(eventsThisInterval, function(interval) { %>
    <% _.each(interval, function(event) { %>
      <div>
        <span class="event-item-date">
          <% if (event.end != event.start) {
            startMY = moment(event.start).format("MM YY");
            endMY = moment(event.end).format("MM YY");
            if (startMY === endMY) { %>
              <%= moment(event.start).format("D") %>–<%= moment(event.end).format("D MMMM") %>
            <% } else { %>
              <%= moment(event.start).format("D MMMM") %> – <%= moment(event.end).format("D MMMM") %>
            <% }
          } else {  %>
            <%= moment(event.start).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>
        <% } %>
      </div>
      <% }); 
    }); %>
</div>

JS Options:

lengthOfTime: {
  months: 12,
  interval: 12,
  startDate: moment().startOf('year')
}

This excludes any kind of calendar grid because I can’t see how it’s necessary in a year view. Anyway, I hope this proof of concepts helps somewhat with what you want to do and you’re able to modify it to suit you. Obviously you’ll need to play around with the CSS to make this look presentable for each instance you’re implementing.

In regards to greying out past events, this would simply be a conditional statement on each event’s date in comparison to today, and for example, adding a class or style to the event information holder div which changes its appearance.

Cheers

Ian

Sorry, no support for recurring events at the moment. Apologies I cannot be of more help! Might try and add event duplication at some point but I won’t be able to do this any time soon I’m afraid.