Ember UI 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 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/main.js. There is also an very basic CSS file that you can use as a starting point for styling the calendar and month components located in dist/ui-calendar.css.

The ui-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:

{{ui-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/selectedDatesselect 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 ui-month component is what powers the individual month views, you can use it if you want to build your own calendar functionality:

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

Development

Install the project dev dependencies, it will load about 50,000 microframeworks into node_modules.

$ 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