Custom calendar polymer component with support for events display. Supports monthly, weekly, daily, and list views.

Check it live!

Install the component using Bower:

$ bower install event-calendar --save

Or download as ZIP.

1. Import Web Components' polyfill:

   <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

2. Import the event-calendar component:

   <link rel="import" href="bower_components/event-calendar/dist/event-calendar.html">

3. Start using it!

   <calendar-month curDate="2015-2-10" header view="month"></calendar-month>

This component uses the Moment library to handle dates and times. Therefore, the curDate attribute and the dates and times associated with events are represented as Moment objects. When passing date and time values in, one should construct a moment instance to do so. E.g., if one has a string date, pass moment(datestring).

To display events, set the events attribute to an array of objects, each of which has the following form:

{
    start: [Moment],
    end:   [Moment],
    title: [string],
    venue: [string]
}

As with curDate, the start and end members must be Moment objects or compatible .

The calendar may be styled using the usual Polymer CSS helpers like /deep/. For instance, you can format the header as follows:

event-calendar /deep/ .header {
	background-color: #330033;
	color: #ffffcc;
}

and change the color of the current day in the month view like so:

event-calendar /deep/ .dayBoxToday {
	background-color: #ffffcc;
}

The currently supported style classes are:

If you want more fine-grained control over style, you can reference classes and elements within specific calendar views, e.g. calendar-month /deep/ event.

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

• Install Bower & Grunt:

  $ [sudo] npm install -g bower grunt-cli

• Install local dependencies:

  $ bower install && npm install

• To test your project, start the development server.

  $ grunt server

This should open a browser displaying the demo page at address http://localhost:8000. To run the unit tests, open http://localhost:8000/test/index.html.

• To build the distribution files before releasing a new version.

  $ grunt build

• To provide a live demo, send everything to gh-pages branch.

  $ grunt deploy

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

For detailed changelog, check Releases.

MIT License