jQuery: The Write Less, Do More JavaScript Library

Plugins/Calendar/calendar

From jQuery JavaScript Library

Jump to: navigation, search


« Back to Plugins/Calendar

[edit]

calendar( options )

The method that you use to create a new calendar.
Arguments:
optionsOptions
A set of key/value pairs that configure the calendar. All options are optional.

Options:

NameType
clearTextStringDefault: 'Clear'
The text to display for the clear link. This attribute is one of the regionalisation attributes.
Sets clear text to 'Erase'.

$(".selector").calendar({ clearText: 'Erase' })

closeTextStringDefault: 'Close'
The text to display for the close link. This attribute is one of the regionalisation attributes.
Sets close text to 'X'.

$(".selector").calendar({ closeText: 'X' })

prevTextStringDefault: '<Prev'
The text to display for the previous month link. This attribute is one of the regionalisation attributes.
Sets previous month link to 'Earlier'.

$(".selector").calendar({ prevText: 'Earlier' })

nextTextStringDefault: 'Next>'
The text to display for the next month link. This attribute is one of the regionalisation attributes.
Sets next month link to 'Later'.

$(".selector").calendar({ nextText: 'Later' })

currentTextStringDefault: 'Today'
The text to display for the current day link. This attribute is one of the regionalisation attributes.
Sets current day link to 'Now'.

$(".selector").calendar({ currentText: 'Now' })

dayNamesString[]Default: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
The list of day names starting from Sunday. This attribute is one of the regionalisation attributes.
Sets day headings to shorter forms.

$(".selector").calendar({ dayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S'] })

monthNamesString[]Default: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
The list of month names. This attribute is one of the regionalisation attributes.
Sets month drop-down names to shorter forms.

$(".selector").calendar({ monthNames: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] })

dateFormatStringDefault: 'DMY/'
The format for parsed and displayed dates. First three characters are 'D' (day), 'M' (month), and 'Y' (year) in the required order, and the fourth is the separator, e.g. US would be 'MDY/'. This attribute is one of the regionalisation attributes.
Format dates for the US.

$(".selector").calendar({ dateFormat: 'MDY/' })

defaultDateDate(yyyy, mm - 1, dd), NumberDefault: null
Set the date to display on first opening if the field is blank. Specify either an actual date via a Date object, or relative to today with a number, or null for today.
Set the initial date displayed to one week in the future.

$(".selector").calendar({ defaultDate: +7 })

appendTextStringDefault: ''
The text to display after each date field, e.g. to show the required format.
Show the required format after each field.

$(".selector").calendar({ appendText: '(yyyy-mm-dd)' })

speedString, NumberDefault: 'medium'
Control the speed at which the calendar appears, it may be a time in milliseconds, a descriptive name ('slow', 'medium', 'fast'), or '' for immediately.
Slows down the opening animation.

$(".selector").calendar({ speed: 'slow' })

firstDayNumberDefault: 0
Set the first day of the week: Sunday is 0, Monday is 1, ...
Start each week on Monday.

$(".selector").calendar({ firstDay: 1 })

yearRangeStringDefault: '-10:+10'
Control the range of years displayed in the year drop-down: either relative to current year (-nn:+nn) or absolute (nnnn:nnnn).
Show the years from 2000 to 2010.

$(".selector").calendar({ yearRange: '2000:2010' })

minDateDate(yyyy, mm - 1, dd)Default: null
Set a minimum selectable date, or null for no limit.
Set the minimum selectable date to January 1st, 2007.

$(".selector").calendar({ minDate: new Date(2007, 1 - 1, 1) })

maxDateDate(yyyy, mm - 1, dd)Default: null
Set a maximum selectable date, or null for no limit.
Set the maximum selectable date to December 31st, 2007.

$(".selector").calendar({ maxDate: new Date(2007, 12 - 1, 31) })

autoPopUpStringDefault: 'focus'
Have the calendar appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both').
Set the calendar to open with both the click of a button and when the input field is in focus.

$(".selector").calendar({ autoPopUp: 'both' })

buttonTextStringDefault: '...'
Use in conjunction with autoPopUp equal to false. The text to display on the popup button.
Set the button text to 'Calendar'.

$(".selector").calendar({ buttonText: 'Calendar' })

buttonImageStringDefault: ''
The URL for the popup button image. If set, button text becomes the alt value and is not directly displayed.
Set the button image path to '/images/calendar.gif'.

$(".selector").calendar({ buttonImage: '/images/calendar.gif' })

buttonImageOnlyBooleanDefault: false
Place an image after the field without a button.

$(".selector").calendar({ buttonImageOnly: true })

closeAtTopBooleanDefault: true
Position the clear/close links at the top (true) or bottom (false).
Place close/clear links at the bottom.

$(".selector").calendar({ closeAtTop: false })

showOtherMonthsBooleanDefault: false
Display dates in other months (non-selectable).
Show the other month's days on the calendar.

$(".selector").calendar({ showOtherMonths: true })

customDateFunctionDefault: null
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 and [1] equal to CSS class name(s) or '' for default presentation.
Display some national holidays in the calendar.

$(".selector").calendar({ customDate: nationalDays})	
		
natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']];

function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }
    }
  return [true, ''];
}

One built in function exists, called 'noWeekends', that prevents the selection of weekend days.

$(".selector").calendar({ customDate : popUpCal.noWeekends })

fieldSettingsFunctionDefault: null
Can be a function that takes an input field and current calendar instance and returns a settings (anonymous) object to update the calendar with.

$(".selector").calendar({ fieldSettings : customRange})

function customRange(input) {
  return {minDate: (input.id == 'dTo' ? getDate($('#dFrom').val()) : null),
      maxDate: (input.id == 'dFrom' ? getDate($('#dTo').val()) : null)};
}

changeFirstDayBooleanDefault: true
Allows you to click on the day names to have the week start on that day. You can disable this feature by setting the attribute to false.
Disable the change first day feature.

$(".selector").calendar({ changeFirstDay: false })

changeMonthBooleanDefault: true
Allows you to change the month by selecting from a drop-down list. You can disable this feature by setting the attribute to false.
Disable the month selection feature.

$(".selector").calendar({ changeMonth: false })

changeYearBooleanDefault: true
Allows you to change the year by selecting from a drop-down list. You can disable this feature by setting the attribute to false.
Disable the year selection feature.

$(".selector").calendar({ changeYear: false })

hideIfNoPrevNextBooleanDefault: false
Normally the previous and next links are disabled when not applicable (see minDate/maxDate). You can hide them altogether by setting this attribute to true.
Remove previous/next links instead of disabling them.

$(".selector").calendar({ hideIfNoPrevNext: true })

onSelectFunctionDefault: null
Allows you to define your own event when the calendar is selected. The function receives the selected date as text and the calendar instance as parameters.
Alert the text returned from the calendar selection.

$("div.selector").calendar({ 
  onSelect: function(dateText) { 
    alert(dateText);
  } 
})

Examples:
A simple jQuery UI Calendar.

$('#example').calendar();


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $('#example').calendar();
  });
  </script>
  
</head>
<body>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script  src="http://dev.jquery.com/view/trunk/plugins/calendar/jquery-calendar.js"></script>
<input type="text" id="example" value="Click inside me to see a calendar" style="width:300px;"/>
</body>
</html>

Add a calendar that appears on focus or a click on an icon.

$('.invokeBoth').calendar({autoPopUp: 'both', buttonImageOnly: true, buttonImage: 'calendar.gif', buttonText: 'Calendar'});

Add a calendar that doesn't allow selection of days on weekends.

$('#noWeekends').calendar({customDate: popUpCal.noWeekends});

Add a calendar that defaults to 7 days in the future.

$('#openDatePlus7').calendar({defaultDate: +7});

Add a calendar in French. Requires loading of the French localization package.

$('#frenchCalendar').calendar(popUpCal.regional['fr']);

NameType

Retrieved from "http://docs.jquery.com/Plugins/Calendar/calendar"