Examples

Calendar

The calendar plugin is a flexible API that can be used for date display or selection.

Single Calendar Display

Usage

Simple calendar from markup:

<div class="calendar1"></div>
<script type="text/javascript">
	n.one('#calendar1').plug('Calendar')
</script>

Multi-pane

Display several panes at once with the "panes" configuration value. Date selection will persist during calendar navigation. In this example we also use the 'multiple' mode to select a range of dates.

Usage

<div class="calendar2"></div>
<script type="text/javascript">
	n.one('#calendar1').plug('Calendar', {
		panes: 3,
		mode: 'multiple' // Select a range of dates
	})
</script>

Events

Calendar Events

Event	Description
pick	Anytime a user picks a date on the calendar. Receives an object with the day, month, year, and date object.
rangePick	Fired whenever a range is selected.

CalendarPicker Plugin

The Calendar plugin also ships with a 'CalendarPicker' plugin which plugs into an input or DOM node and renders when the user interacts with that node.

Example Calendar Picker

Pick a start date: Pick an end date:

Usage

Simple calendar from markup:

<input type="text" id="datepicker1">
<input type="text" id="datepicker2">
<script type="text/javascript">
	var startDatePicker = n.one('#datepicker1'),
		endDatePicker = n.one('#datepicker2')

	startDatePicker.on('pick', function(e, o){
		startDatePicker.set('value', o.formatted)
		// Fire the close event to close the calendar
		startDatePicker.fire('close')
	})

	startDatePicker.plug('CalendarPicker')

	endDatePicker.on('pick', function(e, o){
		endDatePicker.set('value', o.day + '-' + o.month + '-' + o.year)
		// Fire the close event to close the calendar
		endDatePicker.fire('close')
	})

	endDatePicker.plug('CalendarPicker', {
		calendar: {
			panes:2
		}
	})
</script>

Using Calendar Picker With a Range Selection

Select a range:

<label for="datepicker3">Select a range:</label>
<textarea id="datepicker3"></textarea>
<script type="text/javascript">
	var trigger = n.one('#datepicker3')

	trigger.on('rangePick', function(e, o){
		trigger.set('value', 'JSON is:' + JSON.stringify(o))
		trigger.fire('close')
	})

	trigger.plug('CalendarPicker', {
		calendar: {
			panes:3,
			mode:'multiple'
		}
	})
</script>