01/23/2021 Themes:
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 | Description |
---|---|
Calendar(options:Object) | Create a new datepicker with given options |
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. |
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 |
<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>