Novice, Paragon, Master

    event-calendar

    0.8.1 • Public • Published

    event-calendar

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

    Dependency Status Dependency Status Build Status

    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

    Install

    npm i event-calendar

    DownloadsWeekly Downloads

    10

    Version

    0.8.1

    License

    ISC

    Last publish

    Collaborators

    • hontas