Calendar

Inserts a calendar control into a Web page.

Syntax

HTML	<div cordysType="wcp.library.Calendar " id=sId> ... <div>

where,sID denotes the unique identifier of the calendar.

To dynamically add and initialize this component, you can use the initializeHTMLElements or addType methods of the Application object.

Once the calendar component is defined in the page, it can be made accessible in the page by attaching the calendar to a textbox and opening it on the onclick event of a button as in the following code.

HTML

//Calendar definition
<div cordysType="wcp.library.ui.Calendar " id="cal" style="position:absolute;display:none;width:150;height:137" ></div>

 //Define the textbox. ID is necessary for the textbox
<input type="text" calendar="cal" id="dateField"></input>

//Call the calendar on onclick of the button
<input type="button" onclick="document.getElementById('cal').openCalendar(document.getElementById('dateField'))">

To use the calendar as a window (as above), set the position and display properties of the calendar's style attribute to absolute and none, respectively.

You can also use the calendar component in combination with the validate component. This makes it possible to validate the data in the textbox of the calendar and to set different formats for it. A sample code explaining this feature is as follows:

HTML

//Calendar definition
<div cordysType="wcp.library.Calendar" id="cal" style="position:absolute;display:none;width:150;height:137" ></div>
 //validate component definition
<<div cordysType="wcp.library.util.Validate" validate id="validater" />
//Attach to a textbox
<input type="text" calendar="cal" fieldType="date" displayFormat="DD-MM-YYYY">

Apart from this, you can also use the calendar component separately without attaching it to a textbox. This is useful if the calendar is to be used to display dates. The following sample code demonstrates the way in which to define the calendar in a page.

HTML

//Calendar definition. It is advised to display the calendar with a width and height in percentage
//pixels so that when the page is resized, the calendar also gets resized.
<div cordysType="wcp.library.Calendar" id="sId" style="width:50%;height:30%">

The calendar component consists of three main sections:

Title Area of the calendar that displays months and years in list boxes.
Days of the week that are ordered horizontally below the Title area.
Individual days of the month, including overlapping days from the previous and following months, that are contained in a grid below the days of the week.

The Title area of the calendar displays months and year in list boxes. On both sides of the list boxes, the calendar displays arrow marks ("<" and ">") using which you can scroll forward and backward to previous and successive months and years, respectively.

At the bottom of the calendar control, the label Today is provided. On clicking this label, the current date is displayed.

The properties, methods, and events defined for this component are as follows:

Table 1. List of Attributes

Attribute

Property

Description

periods

Object that denotes the periods marked by the user to indicate important events in the calendar.

showWeekNumbers

Boolean that denotes the week numbers that are displayed in the calendar. Possible values are:

true: Default. Week numbers are displayed.
false: Week numbers are not displayed.
The week numbers are calculated based on ISO 8601. According to this, the week of the first thursday is the first week of a year; subsequently 1st January can fall in the 52nd, 53rd, or 1st week. Also, Monday is considered as the first day of the week.When this attribute is set astrue, the property firstDay is set to1(Monday) and the value cannot be edited.

showInline

Boolean that denotes whether the calendar will be shown inline, or as a look-up icon that is attached to another control (usually Input control) and opens a pop-up window when clicked. Possible values are:

true: Calendar is displayed inline.
false: Calendar is not visible at startup, by default. It can be displayed using the openCalendar() method.
If the showInline attribute is not defined, the calendar's style properties are used to determine the default view. The default style property is style="display:none;position:absolute", showInline=false otherwise "true".

Table 2. List of Methods

Method	Description
getDay()	Gets the day of the current month in the calendar.
getDayLength()	Gets the length of the day names in the calendar grid.
getFirstDay()	Gets the first day of the week.
getMonth()	Gets the month of the year in the calendar.
getMonthLength()	Gets the length of the month name used in the title and month-selection control.
getReadOnly()	Gets the value of the read-only property
getShowDateSelectors()	Gets the visibility of the month and year select controls in the calendar.
getShowDays()	Gets the visibility of the day of the week titles row in the calendar grid.
getShowTitle()	Gets the visibility of the month and year title at the top of the calendar.
getShowWeekNumbers()	Returns the parameter value of thesetShowWeekNumbers()method.
getValue(bDateObject)	Gets the date (day, month, and year) selected on the calendar. Possible values are: true: Value is returned as a date object. false: Default. Value is returned as a string in the DD/MM/YYYY format. The day and month are in two-digit format and the year is in four-digit format. However, this display format can be changed and set as required, by using the validate component with the calendar.
getValueIsNull()	Gets the value of the isNull property.
getWeek()	Returns the week number of the currently selected date.
getYear()	Gets the year in the calendar.
openCalendar(oElement, eventObject)	Shows the calendar based on the event on which it is called. The parameters available for use are: oElement: Mandatory. Object that specifies the element with which the calendar component is associated. It is also referred to asparent elementand is usually an Input control. eventObject: Mandatory for the Firefox browser. Refers to the eventObject that invoked this method; for example, the onclick event of a Button control.
redraw()	Refreshes and redraws the calendar if the "periods" defined in the XML document are changed during runtime and the user wants the calendar control to reflect the changes.
setDay()	Sets the day of the current month in the calendar. The day values can be set from 1 to the maximum day of the selected month and year. If the value is not set, this points by default to the current day. If an invalid value is specified for the day property, then the value is set to the closest valid value. Invalid input will throw an exception.
setDayLength()	Sets the length of the day names in the calendar grid. Possible values are: short: Days header will be in short format. For example, "S" for Sunday. medium: Default. Days header will be in medium format. For example, "Sun" for Sunday. long: Days header will be in long format. For example, "Sunday" for Sunday.
setFirstDay(iFirstDay)	Sets the first day of the week on the calendar grid. This property holds the values 0 to 6 indicating the weekdays by number, where 0 is Sunday. If the value set for the property is not in the range 0 to 6, the value is adjusted to the nearest possible value. The parameter available for use is: iFirstDay: Refers to the integer value that specifies the first day of the week. The value can be between 0 and 6, where Sunday=0. *Note:* The first day of the week cannot be changed if the week numbers are visible. In this case, the first day of the week is always specified as 1.
setMonth()	Sets the month of the year in the calendar. The month values can be anything between 1 to 12. If the value is not set, this points by default to the current month of the year. If an invalid value is specified for themonthproperty, then the value is set to the closest valid value. Invalid input will throw an exception. If the valueIsNull property for the calendar is set to NULL, then this property returns null.
setMonthLength()	Sets the length of the month name used in the title and month-selection control. Possible values are: short: Month will be displayed in short format; for example, "Aug" for August. long: Default. Month will be displayed in full length; for example, "August" for August.
setReadOnly()	Sets the read-only property that can be used to enable or disable user date selection by clicking on days or through the select controls. Possible values are: true: Date selection is disabled. false: (Default) Date selection is enabled.
setShowDateSelectors()	Sets the visibility of the month and year select controls in the calendar. Possible values are: true: (Default) Date selectors are displayed for the user to change the month and year. false: Date selectors are not displayed for the user to change the month and year.
setShowDays()	Sets the visibility of the day of the week titles row in the calendar grid. Possible values are: true: (Default) Day of the week title rows are displayed. false: Day of the week title rows are not displayed.
setShowTitle()	Sets the visibility of the month and year title at the top of the calendar. Possible values are: true: Title is displayed. false: (Default) Title is not displayed.
setShowWeekNumbers(bShowWeekNo)	Sets the visibility of week numbers. Possible values are: true: Week numbers are shown, and the firstDay property is set to1(Monday). false: Week numbers are hidden. The firstDay property can be set to any value.
setValue(sValue)	Sets the date (day, month, and year) in the calendar. The possible formats of the date value are: string: Refers to the {day}/{month}/{year} format; for example, 03/08/2002. The day and month are in two-digit format and the year is in four-digit format. However, the display format of the date can be changed and set as required, by using the validate component with the calendar. date object: Refers to the setValue(new Date()) format. Sets the selected date to the current date.
setValueIsNull()	Sets the value of the isNull property that specifies whether date selection is allowed in the calendar. This property is set to the calendar so that no day can be selected. Changing any date property, setting one of the date select controls, or clicking on a day will result in the property getting set to false. Possible values are: true: Date selection is not allowed. false: (Default) Date selection is allowed.
setYear()	Sets the year in the calendar. The value for this property is expected to be between the minYear and maxYear set in the regional options of the computer (This will be usually 1900 and 2099 respectively). If the value is not set, this points by default to the current year. An exception is thrown if an invalid value is specified for the property.

Table 3. List of Events

Event	Description
onpropertychanged	Fires when a property value is changed for the calendar behavior.
onmonthchange	Fires when the month is changed from the calendar display.
onyearchange	Fires when the year is changed from the calendar display.

Remarks

The behavior-defined members listed for the component are not accessible through script until the onselect event of the application is fired. Waiting for this event to fire ensures that the page is completely loaded, all behaviors are applied to the corresponding elements in the page, and all the behavior's properties, methods, and events are accessible for scripting. Attempting to use any of these members before this will result in a scripting error indicating that the object does not support that particular member.

The following keys are supported by calendar to provide easy navigation to the user.

arrow right : Go to next day
arrow left : Go to previous day
arrow up : Go to previous week
arrow down : Go to next week
<ctrl> arrow right : Go to next month
<ctrl> arrow left : Go to previous month
<ctrl> arrow up : Go to previous year
<ctrl> arrow down : Go to next year
<Esc> : Close the calendar

Example

The following sample code demonstrates the implementation of, and the adjustments to, the calendar library.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script src="/cordys/wcp/application.js" ></script>
		<script>
		function openCalendr(event)
		{alert("open")
			document.getElementById("cal").openCalendar(document.getElementById("dateFld"), event);
		}
		</script>
	</head>
	<body style="margin:20" >
		<div cordysType="wcp.library.ui.Calendar "  id="cal" showTitle="false"	style="position:absolute;display:none;width:150;height:137"></div>
		<div cordysType="wcp.library.util.Validate " > </div>
		<h3>Calendar Demo</h3>
		<h5>Using calendar - directly</h5>
		<input id="dateFld" ></input>
		<button class="medium" onclick="openCalendr(event)" >...</button>
		<h5>Using calendar - with validate</h5>
		<input id="calVal" fieldType="date" calendar="cal" filter="[\w +-/]" displayFormat="MM-DD-YYYY" ></input>
		<b>Field Type :</b>
		<input id="fieldType" size=15 value="MM-DD-YYYY" > <button class="medium" onclick="document.getElementById('calVal').setProperty('displayFormat', document.getElementById('fieldType').value)" >Set</button>
	</body>
</html>

pp108 : Calendar

Calendar

Syntax

Table 1. List of Attributes

Table 2. List of Methods

Remarks

Example