CalendarJS

Properties

Property	Type	Description
dateFormat	string	Date format (Y, y, m, n, F, M, d, j, D, l). Defaults to 'Y-m-d'
dayNames	array	Short names of the days of the week. ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
dayNamesFull	array	Full names of the days of the week. ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
disablePast	boolean	Indicates whether past dates are clickable. Defaults to false
element	string	ID of html element. (Required)
inline	boolean	Indicates whether calendar is inline. Defaults to false
minDate	date	Set a minimum selectable date via a Date object, or null for no limit
month	number	Month index for the first calendar (0-11). Defaults to current month
monthNames	array	Short names of the months of the year. ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
monthNamesFull	array	Full names of the months of the year. ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
months	number	The number of months to show (1-12). Defaults to 1
position	string	The position of datepicker. Possible values: 'bottom', 'top'. Defaults to 'bottom'
selectOtherMonths	boolean	When true days in other months shown before or after the current month are selectable. This only applies if showOtherMonths is also true. Defaults to false
showNavigation	boolean	Display month navigation (prev month and next month links). Defaults to true
showOtherMonths	boolean	Display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use selectOtherMonths. Defaults to true
startDay	number	The start day of week (1 stands for Monday, 0 stands for Sunday). Defaults to 0
weekNumbers	boolean	Indicates whether to display the week number. Defaults to false
year	number	Year for the first calendar. Defaults to current year

Constructor

Constructor	Description
Calendar(options:Object)	Create a new datepicker with given options

Events

Event	Arguments	Description
onBeforeShowDay	function(date)	The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or "" for the default presentation. It is called for each day in the datepicker before it is displayed.
onBeforeOpen	function()	This event is triggered when a datepicker attempts to open. If the onBeforeOpen event handler (callback function) returns false, the open will be prevented. this refer to datepicker instance.
onOpen	function(element)	element - HTMLElement to which the datepicker is attached This event is triggered when datepicker is opened. this refer to datepicker instance.
onSelect	function(element, selectedDate, date, cell)	element - HTMLElement to which the datepicker is attached selectedDate - selected date in the specified format date - selected date in milliseconds cell - HTMLElement that you click on Allows you to define your own event when the datepicker is selected. this refer to datepicker instance.
onBeforeClose	function()	This event is triggered when a datepicker attempts to close. If the onBeforeClose event handler (callback function) returns false, the close will be prevented. this refer to datepicker instance.
onClose	function()	This event is triggered when the datepicker is closed. this refer to datepicker instance.

Methods

Method	Arguments	Description
close	.close()	Close datepicker. Return a reference to datepicker instance
detach	.detach()	Remove the datepicker functionality completely. This will return the element back to its pre-init state.
open	.open()	Open datepicker. Return a reference to datepicker instance
option	.option(optionName, [value])	Get or set any datepicker option. If no value is specified, will act as a getter. Return a reference to datepicker instance
option	.option(options)	Set multiple datepicker options at once by providing an options object. Return a reference to datepicker instance
refresh	.refresh()	Redraw a datepicker, after having made some external modifications. Return a reference to datepicker instance

Example

<link type="text/css" rel="stylesheet" href="themes/sky-blue/calendar.css" />
<script type="text/javascript" src="calendar-1.5.min.js"></script>
<script type="text/javascript">
/* Example 1. Inline calendar */
var cal_1 = new Calendar({
	element: 'calendar_1',
	inline: true,
	months: 3,
	dateFormat: 'm/d/Y',
	onSelect: function (element, selectedDate, date, cell) {
		document.getElementById('date_1').innerHTML = selectedDate;
	}
});
/* Example 2. Datepicker */
var cal_2 = new Calendar({
	element: 'calendar_2',
	weekNumbers: true,
	startDay: 1,
	onOpen: function (element) {
		//do something
	}
});
/* Example 3. Get/set datepicker options */
cal_1.option('dayNames');
cal_1.option('dayNames', ['По','Вт','Ср','Че','Пе','Съ','Не']).refresh();
cal_1.option({
	'dayNames': ['По','Вт','Ср','Че','Пе','Съ','Не'],
	'monthNamesFull': ['Януари','Февруари','Март','Април','Май','Юни','Юли','Август','Септември','Октомври','Ноември','Декември']
}).refresh();
</script>