Webpop Calendar Extension

README.md

Calendar Extension

This is a simple calendar extension using Webpop's search API to list events.

To use the extension create a Section with entries enabled and configure the entries to have a "date" field.

Add calendar.js to your extensions folder and set the calendar section to use this extension.

In the template used to display the calendar section, you can list all future events like this:

<pop:content>
  <pop:events wrap="div" class="events">
    <h2><pop:title/></h2>
    <p><pop:date format="dd-mm-yyyy"/></p>
  </pop:events>
</pop:content>

You can get a list of weeks with the number of events for each week like this:

<pop:content>
  <pop:weeks wrap="ul" break="li" class="weeks">        
    <a href="<pop:week_link start='<pop:start/>'/>"><strong><pop:start format="ddd dd-mm-yyyy"/> - <pop:end format="ddd dd-mm-yyyy"/></strong>: <pop:count/></a>
  </pop:weeks>
</pop:content>

When displaying a week the extension will look for a template called "events.tpl". From within that template you can use the same snippets as above to access the events from that week or to access the list of weeks.

calendar.js

var file = require("file");

exports.events = function() {
  if (!section) return null;
  
  return site.search({
    all: true,
    filters: {section: section, date: "future"},
    order: "date ASC"
  }).results;
};

exports.weeks = function() {
  if (!section) return null;
  
  return site.search({
    all: true,
    filters: {section: section, date: "future"},
    timeline: {date: "week"},
  }).timeline;
};

exports.week_link = function(options) {
  log(options.start);
  var t     = new Date(options.start),
      year  = t.getFullYear().toString(),
      month = t.getMonth().toString(),
      day   = t.getDate().toString();
  
  return file.join(section.permalink, "week", year, month, day);
};

exports.get = {
  "week/:year/:month/:day": function(params) {
    if (!section) return null;
    
    var year  = parseInt(params.year, 10),
        month = parseInt(params.month, 10),
        day   = parseInt(params.day, 10),
        start = new Date(year, month, day),
        end   = new Date(start.getTime() + (1000 * 60 * 60 * 24 * 7));
    
    var results = site.search({
      all: true,               
      filters: {section: section, date: {from: start, to: end}},
      order: "date ASC"
    }).results;
    
    response.render("events.tpl", {
      start: start,
      end: end,
      events: results,
      weeks: exports.weeks,
      week_link: exports.week_link
    });
  }
};