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="Today" prevLabel="Raw HTML" nextLabel="Raw HTML" 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 ofselectedDate/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 installThen install the Bower dependencies:
$ npm install -g bower # if you don't have Bower installed on your system $ bower installAfter that you can run:
$ npm install -g broccoli-cli # if you don't have Broccoli CLI on your system $ broccoli serveThen either play around with one of the examples or fire up the test runner and add some tests:
$ testem # Then follow the instructions