<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML: <input type="text" id="date3" name="date3"> <a href="#" id="cal3_toggler">Open Calendar</a> <div id="calendar3"></div> ... later ... Script: var calender3 = new Calendar("calendar3", "cal3_toggler", {inputField:'date3', numMonths:3, multiSelection:true, maxSelection:5, forceSelections:[ {date:'last Saturday'} ], dateFormat:'D, d M Y :: ', idPrefix:'cal3'});
German | Deutsch | Spanish | Español | Chinese | 中文 |
Japanese | 日本語 | Arabic | العربية |
{option: value, option: {option: value, option: value}, option: [value1, value2]}
{click:function(){ ... do something ... } )Skinning:
Option | Description | Default Value |
---|---|---|
visible | Indicates weather the calendar will be visible when loaded or not | false |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {visible:false}); |
||
offset | The calendar by default will show at the lower left corner of the input field. offset allows for moving the offsetting the calendar position | {x:0, y:0} |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {offset:{x:50, y:50}}); |
||
dateFormat | The format of the date output (for text field). check nogray_date.js for details check http://us3.php.net/manual/en/function.date.php for formatting details |
D, d M Y |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {dateFormat:"Y-m-d"}); |
||
numMonths | The number of months per calendar. Warnings: Firefox is slow when handling date objects. If using datesoff or forcedSelection try to use 1 month per calendar |
1 |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {numMonths:4}); |
||
classPrefix | The CSS class prefix, check the skinning section for instructions | ng- |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {classPrefix:'new_calendar'}); |
||
idPrefix | The id prefix for the dates, use this if using more than one calendar. | ng- |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {idPrefix:'cal_1'}); |
||
startDay | The first day of the week. 0 for Sunday, 1 for Monday ... 6 for Saturday | 0 |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {startDay:1}); |
||
startDate | The first selectable date, use a date object | today |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {startDate:new Date(2007,0,1)}); |
||
endDate | The last selectable date, use a date object | year+10 |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {endDate:new Date(2017,0,1)}); |
||
inputType | The type of input fields. It can be one of the following values:
|
text |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {inputType:'select'}); |
||
inputField | The input field to be used. If the inputType is text it can be either an HTML input object or the object ID. If the inputType is select it must be an object with the date, month and year HTML object | null |
Example:
HTML: <input type="text" name="date" id="date" /> ... later ... Script: var cal = new Calendar('holdingElement', 'toggeler', {inputField:'date'}); HTML: <select name="date" id="date"></select> <select name="month" id="month"></select> <select name="year" id="year"></select> ... later ... Script: var cal = new Calendar('holdingElement', 'toggeler', {inputField:{date:'date', month:'month', year:'year'}}); |
||
allowSelection | Allows the user to select a date | true |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {allowSelection:false}); |
||
multiSelection | Allows the user to select more than one date | false |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {multiSelection:true}); |
||
maxSelection | The maximum number of dates the user can select if multiSelection is true. If 0, unlimited number of dates is selectable. | 0 |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {maxSelection:3}); |
||
selectedDate | The initially selected date, use a date object | null |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {selectedDate:'today'}); |
||
datesOff | An array of date objects for the holidays. Holidays are unselectable unless allowDatesOffSelection is true. | [] |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {datesOff:{date:25, month:11}}); |
||
allowDatesOffSelection | Allows the user to select the dates off. | false |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {allowDatesOffSelection:true}); |
||
daysOff | An array of numbers (0 for Sunday, 1 for Monday ... 6 for Saturday) for the days off in the week (beside weekends). daysOff are unselectable unless allowDaysOffSelection is true. | [] |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {daysOff:[4]}); |
||
allowDaysOffSelection | Allows the user to select the days off. | false |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {allowDaysOffSelection:true}); |
||
weekend | An array of numbers (0 for Sunday, 1 for Monday ... 6 for Saturday) for the weekend. Weekend are unselectable unless allowWeekendSelection is true. | [] |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {weekend:[4,5]}); |
||
allowWeekendSelection | Allows the user to select the weekend. | false |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {allowDaysOffSelection:true}); |
||
forceSelections | an Array of date objects that are forced to be selectable regardless where they fall (e.g. if the user can select the last Saturday of the month but not other weekend days) | [] |
Example:
var cal = new Calendar('holdingElement', 'toggeler', {forceSelections:[{date:'last Saturday'}, 'today']}); |
||
formatter | A function that will return the HTML for the table cell and takes the Date as an argument. Default return is the date’s getDate() value. | function (date){ return date.getDate(); } |
Example:
var cal = new Calendar('holdingElement', 'toggeler', { formatter: function(date){ if (date.getDate() == 25) return "It's the 25th"; else return date.getDate(); } }); |
||
outOfRangeFormatter | Same as formatter but for out of range dates | ~~~~~~ |
weekendFormatter | Same as formatter but for the weekend dates | ~~~~~~ |
daysOffFormatter | Same as formatter but for days off dates | ~~~~~~ |
datesOffFormatter | Same as formatter but for dates off dates (holidays) | ~~~~~~ |
selectedDateFormatter | Same as formatter but for the selected date | ~~~~~~ |
language | a language object (check nogray_date.js for details). Used for translation. | null (for English) |
daysText | The days format to be used on the calendar. The key for the language.days object. | mid |
monthsText | The months format to be used on the calendar. The key for the language.months object. | long |
preTdHTML | The HTML for the previous months arrow | « |
preTdHTMLOff | The HTML for the previous months arrow when the calendar at the first month. | |
nexTdHTML | The HTML for the next months arrow | » |
nexTdHTMLOff | The HTML for the next months arrow when the calendar at the last month. | |
closeLinkHTML | The HTML for the close link. | Close |
clearLinkHTML | The HTML for the clear link (only visible when multiSelection is true). | Clear |
calEvents | an Events object for all the selectable table cell. Arguments passed to the function:
|
mouseover: add a mouse-over class to the table cell mouseleave: remove the mouse-over class from the table cell |
tdEvents | An array of Events objects to attach events to a specific table cells.
The array key must be the date in the following format
month-date-year (8 for August) Arguments passed to the function:
|
[] |
Example:
var events_arr = []; events_arr['8-15-2007'] = {click: function(td, date_str){ alert(td.innerHTML+" "+new Date().fromString(date_str)); } }; var cal = new Calendar('holdingElement', 'toggeler', { tdEvents: events_arr }); |
||
dateOnAvailable | An array of functions to run when a specific date is rendered.
The array key must be the date in the following format
month-date-year (8 for August) Arguments passed to the function:
|
[] |
Example:
var dates_func_arr = []; dates_func_arr['8-15-2007'] = function(td, date_str){td.setHTML(date_str);} var cal = new Calendar('holdingElement', 'toggeler', { dateOnAvailable: dates_func_arr }); |
||
speedFireFox | Option to speed the calendar creation in Firefox, since firefox is slow when handling date objects, this option will illuminate the datesOff (holidays) daysOff and forcedSelection for better performance. | false |
closeOpenCalendars | Close all the open calendars when the calendar opens | true |
Event | When Fired |
---|---|
onSelect | When a date is selected. |
onUnSelect | When a date is unselected. |
onCalendarLoad | When the calendar is completely rendered. |
onOpen | When the calendar is opened. |
onClose | When the calendar is closed. |
onClear | When the calendar is cleared. |