Package Exports

ember-ui-calendar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ember-ui-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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` / `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 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