@pirxpilot/calendar

Calendar component


Keywords
browser, calendar, date, ui
License
MIT
Install
npm install @pirxpilot/calendar@1.0.1

Documentation

NPM version Build Status Dependency Status

Calendar

Calendar UI component designed for use as a date-picker, full-sized calendar or anything in-between.

Live demo is here

Installation

$ npm install --save @pirxpilot/calendar

Example

var Calendar = require('@pirxpilot/calendar');
var cal = new Calendar;
cal.el.appendTo('body');

Events

  • view change (date, action) when the viewed month/year is changed without modification of the selected date. This can be done either by next/prev buttons or dropdown menu. The action will be "prev", "next", "month" or "year" depending on what action caused the view to change.
  • change (date) when the selected date is modified

API

new Calendar(date)

Initialize a new Calendar with the given date shown, defaulting to now.

Calendar#select(date)

Select the given date (Date object).

Calendar#show(date)

Show the given date. This does not select the given date, it simply ensures that it is visible in the current view.

Calendar#showMonthSelect()

Add month selection input.

Calendar#showYearSelect([from], [to])

Add year selection input, with optional range specified by from and to, which default to the current year -10 / +10.

Calendar#prev()

Show the previous view (month).

Calendar#next()

Show the next view (month).

Calendar#min()

Define earliest valid date - calendar won't generate change events for dates before this one.

Calendar#max()

Define latest valid date - calendar won't generate change events for dates after this one.

Calendar#locale(locales)

Set alternative locale:

  • locales - Optional. A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see the Intl page.

For browsers which do not support Intl in not available only English locale is supported.

Themes

Aurora:

License

MIT