HTML Components: The Calendar Component

HTML Components

The Calendar Component

You probably have noticed that HTCs can contain other HTCs. The HTC calendar.htc contains two other HTML Components, day.htc for all days of the month, and today.htc for today's square. Here are the top 15 lines or so from calendar.htc:

<HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY>
<HEAD>
  <?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
  <?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>
  
<PUBLIC:COMPONENT tagName="CALENDAR">
  <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fnInit()
{
  defaults.viewLink = document;
}
// -->
</SCRIPT>

The first line specifies the XML namespaces that are used in this HTC. They include both the namespace of the page itself (MYCAL), and the namespaces positioned (called) in this page (ANYDAY and TODAY). Notice that the namespace does not have to match the HTC file name. Next, we import these HTCs:

<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
<?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>

As we explained previously in this column, the browser waits for these files to be loaded, before continuing the page rendering (synchronous load). Next, we define the CALENDAR custom tag:

<PUBLIC:COMPONENT tagName="CALENDAR">
  <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>

The PUBLIC:COMPONENT tag is used to declare the new CALENDAR tag. In between the opening and closing tags you can attach events to the new CALENDAR tag. The event is oncontentready which is fired when the imported calendar.htc file is fully loaded and rendered on the containing page. The event handler specified is the function fnInit(), defined in a JavaScript section:

<SCRIPT LANGUAGE="JavaScript">
<!--
function fnInit()
{
  defaults.viewLink = document;
}
// -->
</SCRIPT>

The viewLink assignment above is extremely important. It is the cornerstone of the HTML Component concept. It links between the HTML Component and the containing page that calls it. The object defaults has other properties and will be covered elsewhere. The value assigned to the viewLink property is the HTC's document object. Thanks to this link, you can navigate to the HTC object from the containing page.

We'll explain the calendar's layout on the next page. Notice, though, how different the style of today's box is from the style of the other days of the month, and from the empty squares on the calendar. We achieve this effect through the dominance rules. The HTC Component's style overrides any conflicting definition in its containing page. The style definition of the calendar.htc is as follows:

<STYLE>
  TD {
      background-color:tan;
      width:50;
      height:50;
     }
</STYLE>

Now compare this definition with the calendar's colors. Only empty boxes are colored tan. The HTCs we call override this definition. The calls are embedded in the text preparation. Here is the call to TODAY:DAY HTC:

<TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY>

We pass a single argument to the HTC, the day of the month. Similarly, for any other day of the month we call ANYDAY:DAY tag:

<ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY>

Next: How to program the calendar - Part I

Produced by Yehuda Shiran and Tomer Shiran

Created: July 3, 2000
Revised: July 3, 2000

URL: https://www.webreference.com/js/column64/5.html

HTML Components: The Calendar Component

HTML Components

The Calendar Component

Find a programming school near you