event-calendar

Simple calendar for listing events Demo: http://hontas.github.io/event-calendar

Install

npm install --save event-calendar
# or
bower install --save evt-calendar

Use

ES6 module

import eventCalender from 'event-calender';
eventCalender({ selector: '.js-calender' });

Remember to include styles in your build-step from src/styles/event-calendar.styl

In browser

<link href="bower_components/event-calendar/dist/event-calendar.css" rel="stylesheet">
<script src="bower_components/event-calendar/dist/event-calendar.min.js"></script>
<script>
  eventCalender({ selector: '.js-calender' });
</script>

Options

• selector {String} DOM selector for container element - required
• state {Object}
  • events {Array} Array of event items
  • currentTime {Date | timestamp | datestring } Start date - defaults to Date.now()
• i18n {Object} Object containing dictionaries - see below
• locale {String} What locale to use, defaults to 'en'
• tdTemplate {Function(day, events)} Should return html string
  • day {Object} [dayOfMonth, timestamp, isOtherMonth]
  • events {Array | Undefined} [...eventItems]
• eventTemplate {function(event)} Should return html string
  • event {eventItem} [name, date, link]

evtCalendar({
  selector: '.js-evt-cal',
  state: {
    events: [{ name: 'test', date: Date.now() }],
    currentTime: Date.now()
  },
  i18n: {}, // see example below
  locale: 'sv',
  tdTemplate: function({ day, events }) { return ""; },
  eventTemplate: function(event) { return event.name; }
})
  .on('did-render', function() {})
  .on('will-change-state', function(newState) {});

Calendar Events interface

var events = [
  {
    name: {String}, // required
    date: {Date | timestamp | Datestring}, // required
    link: {String}
  }
];

API

• render
• setState (Object) [currentTime and/or events]
• on (event, callback) - subscribe to event
• off (event, callback) - unsubscribe to event
• month (optional value) - get / set month (non-zero-based)
• destroy - removes itself from DOM

static

• version (String) - current version

Events

• initialized
• will-render
• did-render
• will-change-state {Object: newState}
• did-change-month {Number: month number}

cal.on('will-change-state', function(newState) {
    //do something
});

Template functions

Supply your own template functions to for custom markup

calendar({
  tdTmpl(day, events) {
    return `<td>${day.dayOfMonth}</td>`;
  }
});

i18n

English and Swedish are available of the bat for months and days of the week.
Add your own like this:

eventCalendar({
    i18n: {
        no: {
            months: ['januar', 'ferbruar', ...],
            weekdays: ['mornda', 'tirsda', ...],
            startOfWeek: 0, // 0 = sunday, 1 = monday
            twelveHourFormat: true // optional
        }
    },
    locale: 'no'
});

That will add 'no' translations to the i18n dictionary and locale: 'no' will set the locale.

You may also use the method setLocale('no') to change locale whenever you wish. This will cause a re-render.

Deploy

Run npm run major to publish new major version
Run npm run minor to publish new minor version
Run npm run patch to publish new version patch

These tasks will

1. bump version
2. build to dist
3. publish to npmjs
4. deploy dist to gh-pages branch
5. push new git-tags

ToDo

• create react component
• create jquery plugin

Change log

0.8.1

• render previous and next month name

0.7.0

• expose method destroy, to remove itself from the DOM
• expose method month, to get and set normalized month (non-zero-based)
• added integration tests

0.6.5

• 12 hour time format support

0.6.4

• Responsive layout

0.6.1

• removed moment.js dependancy

0.4.5

• Events without link
• improved documentation
• Pluggable template functions (tdTemplate & eventTemplate)
• gh-pages demo