Un Calendar

A calendar component for Ember with a speedy month view

Rationale

HTMLBars looks very promising for template performance, but it's not here yet. I wanted a solution to the month view problem that was light-weight, Ember-based, and that didn't have redundant third-party dependencies. Existing implementations either wrap a third-party library or take an idiomatic Ember approach, which will likely be absolutely fine in the HTMLBars future, but right now it's just not quick enough.

Features

• Shows a month with n selected days, n disabled days
• Can also show the previous month and future month
• Lets the user move forward and backwards
• Lets the user go to the current month
• Sends an action when the user clicks a day
• Ability to disable moving past the current month into the future or past
• Ability to disable user-controls in general
• Renders quickly

Using It

A wild calendar demo appears!

You can use the builds provided in the dist directory, if you don't know why there is a dist directory and just want a file to plop into your app you probably want dist/globals/un-calendar.js. There is also a very basic CSS file that you can use as a starting point for styling the calendar and month components located in dist/un-calendar.css.

The un-calendar component wraps everything up into a widget that you can use to display a calendar and allow you users to select one or n dates:

{{un-calendar
  month=momentObject
  selectedDate=momentObject
  selectedDates=arrayOfMomentObjects
  disabledDates=arrayOfMomentObjects
  todayLabel="<span>Today</span>"
  prevLabel="<span>Raw HTML</span>"
  nextLabel="<span>Raw HTML</span>"
  showNextMonth=true|false
  showPrevMonth=true|false
  disableHeader=true|false
  disableControls=true|false
  disablePast=true|false,
  disableFuture=true|false
  disableManipulation=true|false
  maxPastDate=momentObject
  maxFutureDate=momentObject
  select="dateSelected"}}

| Option | Type | Description | |:------------------|:-----------------|:--------------------------------------| | month | moment | The explicit month to render. | | selectedDate | moment | Date to indicate as selected. | | selectedDates | array of moments | Dates to indicate as selected, use this or the above, both won't work. | | disabledDates | array of moments | Dates to indicate as disabled. | | todayLabel | HTML string | A label to use for the Today button | | prevLabel | HTML string | A label to use for the previous month button | | nextLabel | HTML string | A label to use for the next month button | | showNextMonth | boolean | Show or hide the next month button | | showPrevMonth | boolean | Show or hide the previous month button | | disableHeader | boolean | Show or hide the header | | disableControls | boolean | Show or hide the header controls | | disablePast | boolean | Disable moving to past months | | disableFuture | boolean | Disable moving to future months | | disableManipulation | boolean | Disable built-in manipulation of selectedDate / selectedDates select action still sent | | maxPastDate | moment | Maximum past month | | maxFutureDate | moment | Maximum future month | | select | action name | Will fire this event with the selected moment when the user selects a date |

The un-month component is what powers the individual month views, you can use it if you want to build your own calendar functionality:

{{un-month
  month=momentObject
  selectedDates=arrayOfMomentObjects
  disabledDates=arrayOfMomentObjects
  select="dateSelected"}}

ember-cli add-on

To use as an add-on in ember-cli, add it to package.json:

$ npm install --save-dev un-calendar

Then run the generator to add moment.js to your bower.json:

$ ember generate un-calendar

un-calendar provides a module shim for moment.js. This allows you to import it using ES6 syntax instead of relying on the global. For instance, if you were defining a custom transform

// app/transforms/moment.js
import DS from 'ember-data';
import moment from 'moment';

export default DS.Transform.extend({
  serialize: function(deserialized) {
    return deserialized.format('YYYY-MM-DD');
  },

  deserialize: function(serialized) {
    return moment(serialized);
  }
});

// app/models/event.js
import DS from 'ember-data';

export default DS.Model.extend({
  date: DS.attr('model')
});

The default css will be automatically required, you can override the default styles in your own css or set

unCalendar: {
  defaultStyles: false
}

in your Brocfile inside the options passed to new EmberApp.

Development

Install the project dev dependencies.

$ npm install

Then install the Bower dependencies:

$ npm install -g bower # if you don't have Bower installed on your system
$ bower install

After that you can run:

$ npm install -g broccoli-cli # if you don't have Broccoli CLI on your system
$ broccoli serve

Then either play around with one of the examples or fire up the test runner and add some tests:

$ testem # Then follow the instructions

Credits

Many thanks to @ecbypi for doing the bulk of the work that made un-calendar an ember-cli-addon.