Many applications involve some sort of calendar information. The calendar page in this sample application receives event information from a server application and allows the user to view the schedule details for any particular day by tapping that day in the calendar. For a full listing of the DHTML source code for this page, see Calendar page sample: hiding and displaying page elements.

The calendar page, as it displays initially, is shown in the figure below.

Days displayed in red have schedule information available. When the user taps a red-number day, any schedule information for that day is displayed. When the user taps a different day, the schedule information for the previous day disappears at the same time any schedule information for the new day is displayed.

The following figure shows the calendar page with schedule information displayed for the fourth.

The display of schedule information that is available for a day that the user taps in this sample calendar page is handled in the same way as the expanding and collapsing of the additional text for a header in the home page example, in Home page: expanding and collapsing hierarchical text. Any page element can be hidden and displayed this way, under the control of your DHTML, in response to user actions.