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
;;
Remember to include styles in your build-step from src/styles/event-calendar.styl
In browser
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]
;
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;
Template functions
Supply your own template functions to for custom markup
;
i18n
English and Swedish are available of the bat for months and days of the week.
Add your own like this:
;
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
- bump version
- build to dist
- publish to npmjs
- deploy dist to gh-pages branch
- 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