The ANYDAY and TODAY HTCs
The ANYDAY Component is defined in day.htc. This component is an encapsulation of the calendar cells. The component name is determined by the XML namespace definition on the first line:
<HTML XMLNS:ANYDAY>
As oppose to calendar.htc, you have only one namespace definition. The reason is that we don't call any HTCs from this page. This is a "leaf" HTC. The custom tag we define here is DAY. We define its behavior as well now. HTML Component definition is actually a custom tag's behavior definition. The behavior includes one property and one event:
<PUBLIC:COMPONENT tagName="DAY">
<PROPERTY NAME="value"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</PUBLIC:COMPONENT>
Notice the event oncontentready. It occurs when the file day.htc completes its loading when imported by its caller, calendar.htc. The event handler is fnInit(). Let's look at it:
function fnInit() {
document.body.innerHTML = element.value;
document.body.className = "clsDay";
defaults.viewLink = document;
element.appointments = "";
element.date = element.value;
}
The fnInit() demonstrates some very important HTC's concepts. The first line assign element.value to the innerHTML property of the cell. An HTML Component is always encapsulated in an object named element. The property value is defined above in the PROPERTY tag. As a reminder, the actual value is passed in the caller, calendar.htc:
text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>'
The style of the cell is assigned on the second line:
document.body.className = "clsDay";
Style class clsDay is defined elsewhere on the page:
<STYLE>
.clsDay {
width:50;
height:50;
background-color:lightyellow;
align:center;
text-align:right;
}
</STYLE>
Notice that days are colored light yellow in the calendar. It proves that the HTC dominates any format assignments made by the caller, calendar.htc.
The third line of fnInit() sets the viewLink property of the defaults object. The viewLink property is the cornerstone of HTML Components. It allows an HTC's document (day.htc) to be viewed in another HTML document (calendar.htc). Here is the assignment of viewLink:
defaults.viewLink = document;
Notice that what you need to link is the whole document object. The last two lines of fnInit() initializes two internal properties that we'll explain later:
element.appointments = "";
element.date = element.value;
Besides displaying itself, the DAY HTML Component reacts to mouse clicks:
<BODY onclick="fnShowAppts()">
When a day is clicked, the user is prompted to add his or her appointments for the day, or to modify the existing ones:
function fnShowAppts() {
newAppointments = prompt("Add your appointment:",
element.appointments);
if (newAppointments != null) element.appointments = newAppointments;
document.body.innerHTML = '<FONT COLOR="red">' + element.date +
'</FONT>' + "<BR>" + '<FONT SIZE="1">' + element.appointments +
'</FONT>';
}
The input mechanism here is quite primitive. The user needs to put newline tags (<BR>) between appointments, or else they will all be in a single line. The final innerHTML is a concatenation between the day's date (element.date) and the appointments (element.appointments).
The TODAY HTML Component (today.htc) is very similar to the ANYDAY Component (day.htc). The only difference is that background-color in the STYLE block is pink instead of ligthyellow, and the font color is blue instead of red. Observe in the calendar that the current day is colored pink with blue font.
  
Next: Listings of Calendar's top page
| 
