Annual view and past events

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

Hi Ian,

thank you very much for your response. The necessary in a year view is because we have only 7 events in the year, and some of the month dont have any events, so I wanted to show a year view, where the customer can immediately view all events of the year in a calender.

I try your code.

Thank you,
Nadja