Options

element: HTMLElement the container that the calendar is initialized into

handle: HTMLElement the element that the calendar will be tied to when shown. Click the handle to show the calendar, click outside the calendar to close it

number_of_months: 1 number of months to display

date_format: 'YYYY-MM-DD' how the dates will be formated internally. See moment.js docs for format options. Each td element in the calendar will have a data-date attribute with the date formated from this string

ctrl_click: true turns on/off ctrl-clicking to select/deselect dates

shift_click: true turns on/off shift-clicking to select date ranges

vertical_offset: 0 setting to vertically move the picker from the handle in pixles, negative for left and positive for right

horizontal_offset: 0 setting to horizonally move the picker from the handle in pixles, positive for up and negative for down

shortcuts: true show/hide the shortcut buttons below the calendar

custom_shortcuts: [] an array of javascript objects with the properties of 'label', (html)'class' and 'callback' that will add custom shortcuts, the callback function should accept the options object and event object as parameters and return the dates to be selected. The currently selected dates will be cleared out when this function executes

on_select: function () {} callback function that is executed when selections are made

on_open: function () {} callback function that is executed when the calendar is opened/shown

on_close: function () {} callback function that is executed when the calendar is closed/hidden

on_destroy: function () {} callback function that is executed when the calendar gets destroyed

class_era: 'erajs-era_div' class name of the calendar container

class_selected: 'erajs-selected_date' class name of the selected date that are viewable in the current range of the calendar

class_active: 'erajs-active' class name of the selectable dates, the dates in the currently viewable month

class_inactive: 'erajs-inactive' class name of the dates outside the currently viewable month

class_today_highlight: 'erajs-today_highlight' class name of the current date

class_days: 'erajs-days' class name of the div inside each td representing the dates, allows the styling of the hover effect

class_back_arrow: 'erajs-back_arrow' class name of the back button

class_forward_arrow: 'erajs-forward_arrow' class name of the forward button

class_shortcuts: 'erajs-shortcuts' class name of the shortcuts container

class_shortcuts_title: 'erajs-shortcuts_title' class name of the shortcuts title

class_deselect_weekends: 'erajs-deselect_weekends' class name of the Deselect Weekends shortcut

class_mtd: 'erajs-mtd' class name of the Month to Date shortcut

class_today: 'erajs-today' class name of the Today shortcut

class_yesterday: 'erajs-yesterday' class name of the Yesterday shortcut

class_this_week: 'erajs-this_week' class name of the This Week shortcut

class_last_week: 'erajs-last_week' class name of the Last Week shortcut

class_clear: 'erajs-clear' class name of the Clear shortcut

back_button: '◀' text of the back button

forward_button: '▶' text of the forward button

Methods

.destroy() destroys the calendar, sets things back to before the calendar was initialized

.get_dates() gets the currently selected dates, returns an array of moments

.set_dates(dates) sets the currently selected dates clearing the current selection, pass in an array of moments or pass in nothing to clear the current selection

.add_dates(dates) add to the currently selected dates, pass in an array of moments

.remove_dates(dates) remove from the currently selected dates, pass in an array of moments

.set_last_clicked_date(date, clear_dates = false) add a date to selection if not already present and set it to the last clicked date, pass in a moment object

.show() show the calendar

.hide() hide the calendar

Properties

.options the current options of the calendar, changing some of the properties of the options after initialization will still effect the functionality of the calendar. Contains an array of objects as the property .selected_dates representing the currently selected dates. The objects have two properties, a .date property and a .last_clicked property that is a boolean for if that was the last date clicked on

Events

All handler functions should be attached to the container element (the element in the options) that the calendar was initialized into

'erajs-select' event that is fired when selections on the calendar are made, event property detail will contain an array of the dates that are currently selected

'erajs-open' event that is fired when the calendar is opened/shown

'erajs-close' event that is fired when the calendar is closed/hidden

'erajs-destroy' event that is fired when the calendar is destroyed