CalendarJS

Javascript Calendar & Datepicker component

Current version: 1.5

Demo

08/19/2017 Themes:

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="http://calendarjs.googlecode.com/svn/tags/1.5/themes/sky-blue/calendar.css" />
<script type="text/javascript" src="http://calendarjs.googlecode.com/svn/tags/1.5/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>