--- layout: example ---

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:

{% highlight html %}
{% endhighlight %}

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

{% highlight html %}
{% endhighlight %}

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

Usage

Simple calendar from markup:

{% highlight html %} {% endhighlight %}

Using Calendar Picker With a Range Selection

{% highlight html %} {% endhighlight %}