A Polymer Event Calendar

Background

For a new project under development, I began playing with Polymer for programming web user interfaces. Polymer is a framework for building Web Components, a developing standard for the next iteration of HTML. Web Components and their associated technologies promise to fulfill some longstanding desires: they encapsulate HTML templates and JavaScript code together into reusable components, and they provide the ability to import the components into web pages and other components.

Polymer is one take on creating Web Components, and it’s quite interesting. While you can create a component in code using the (still evolving) standards, Polymer brings a strong declarative bias to the process. Not only does the Polymer team want you declare the appearance of your element with custom HTML, but as much of its behavior as possible. For instance, you can bind data with “mustache” decorators (familiar from frameworks like AngularJS and Handlebars) and display template subsections conditionally or iteratively:

<template if="{{condition}}">
  My list:
  <ul>
    <template repeat="{{item in array}}">
      <li>{{item.value}}</li>
    </template>
  </ul>
</template>

The <event-calendar> Component

For this project, I needed a calendar that could display events, dates and times in the usual variety of manners: monthly, weekly, daily and list views. Although there’s an ever-growing list of components out there to use, I didn’t quite find what I wanted. So I wrote my own.

The (open-sourced) code and usage instructions are on github, as is a live demo. It’s still under development, but go ahead and install it with bower, let me know what you think, and fork the code!