A stateful calendar control module providing intuitive range switching and navigation.
Ambitus can be used to control standard calendar UIs that expose day/week/month views with functions to navigate to the next and previous range and to return to today.
The aim is to provide a user experience that shows the expected range, no matter what date interval size the user navigates or switches to. When switching from a bigger interval to a smaller one, the first day of the bigger is chosen and the wanted range that includes it is returned. When switching from a smaller to a bigger range Ambitus tries to return to the previous selected one if there is a range overlap with the smaller one. The concept of 'today' is given special significance when switching interval size.
All dates returned by Ambitus are instances of moment.
All date ranges returned by Ambitus are instances of moment-range.
This gives you a very rich tool chain to work with the resulting ranges and dates.
new Ambitus({
// Give special significance to today
ignoreToday: false,
// Initial interval string
interval: 'month', // ['day', 'week', 'month']
// Custom moment getter
moment: function (input) {
return moment(input).utc().locale('da');
},
// Callback that is fired before the internal state changes
// Return false to block the change
onBeforeChange: function (newState, oldState) {},
// Callback that is fired when the internal state changes
onChange: function (newState, oldState) {}
});
Amitus.get()
: Returns the current value
Amitus.interval(intervalString)
: Switches the interval. intervalString
may be 'day'
, 'week'
or 'month'
Amitus.next()
: Switch to the next range.
Amitus.previous()
: Switch to the previous range.
Amitus.today()
: Jump directly to the range that contains todays date.
Amitus.go(date)
: Jump directly to an range including date
. date
may be any moment parseable value.
All methods return the same state object that get passed into the onBeforeChange
and onChange
event handlers:
{
interval: 'week', // Possible values: ['day', 'week', 'month']
range: moment.range(start, end) // Range desribing the current interval start end end date
}
Ambitus will default to use the globally configured moment constructors. So if you already have your moment constructor set up, Ambitus will do what you want.
If you need Ambitus to use a different time zone or locale than your globally defined one, you can pass in the moment
configuration option. This should be a function that takes a normal moment input and returns your preferred moment instance.
UTC: function (input) { return moment(input).utc(); }
Danish locale: function (input) { return moment(input).locale('da'); }
UTC and German locale: function (input) { return moment(input).utc().locale('de'); }
Setting the locale like in these examples requires that the locale you want to switch to is already installed. Please refer to the moment-timezone documentation
The first day of a week and week numbering can be configured through the moment.locale
settings. See the section above
moment and moment-range. Both can be installed using bower. See test.html for example configuration.
MIT