Skip to content

A calendar component for Ember with a speedy month view

License

Notifications You must be signed in to change notification settings

unspace/un-calendar

Repository files navigation

Un Calendar

Warning: works only with Ember <= 1.10

This project is currently unmaintained but we'll still accept all the PR love you want to give us!

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 (OUTDATED) 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.