glimr-calendar
You need a highly customizable base for a calendar component? Well you got one!
- Drag and drop to create ranges
- Click to select dates
- Navigation previous/next month
Installation
ember install glimr-calendar
Translations
glimr-calendar depends on ember-intl for translations. For navigation you need to add the following keys to your translation files:
"glimr.date.previous": "Previous"
"glimr.date.next": "Next"
Usage
Available properties
-
moment: moment
: The date that it is visible to start with -
clickToRange: boolean
: If "click to range" feature is enabled. Default:false
-
ranges: Array<[moment, moment]>
: An array of array of moment objects for the defined ranges. -
selectedDates: Array<moment>
: An array of moment objects to be selected. (They get theactive
class) -
highlightedDates: Array<moment>
: An array of moment objects to be highlighted. (They get thehighlighted
class) -
highlightFrom: moment
: The start date to highlight. (Any dates after get thehighlighted
class) -
highlightTo:
: The end date to highlight. (Any dates before get thehighlighted
class) -
disabledFrom:
: The start date to disable. These dates are not clickable. (Any dates after get thedisabled
class) -
disabledTo:
: The end date to disable. These dates are not clickable. (Any dates before get thedisabled
class)
Available actions
-
selectedDate: (date: moment) => void
: When a day was clicked in the calendar -
addRange: (range: [moment, moment]) => void
: Called when a range needs to be added. -
updateDate: (newDate: moment) => void
: Called when the active date is changed.
Click to select dates
// component.js
import Ember from "ember";
export default Ember.Component.extend({
selectedDates: Ember.computed(function() {
return [];
}),
actions: {
alertDate(momentDate) {
alert(`Select ${moment.format("YYYY-MM-DD")}`);
this.set("selectedDates", [momentDate]);
}
}
});
Select a range of dates
// component.js
import Ember from "ember";
export default Ember.Component.extend({
ranges: Ember.computed(function() {
return [];
}),
actions: {
addRange(newRange) {
this.get("ranges").pushObject(newRange);
}
}
});
Only allow this week
// component.js
import Ember from "ember";
import moment from "moment";
export default Ember.Component.extend({
selectedDates: Ember.computed(function() {
return [];
}),
startOfWeek: Ember.computed(function() {
return moment().startOf("week");
}),
endOfWeek: Ember.computed(function() {
return moment().endOf("week");
}),
actions: {
addDate(newMoment) {
this.get("selectedDates").pushObject(newMoment);
}
}
});