HTML Components: The ANYDAY and TODAY HTCs

HTML Components

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:

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:

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:

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.