Many applications involve some sort of calendar information. The calendar page in this sample application, calendar.html, 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. The workings of this page are described in detail in Calendar page: hiding and displaying page elements.
The full source code for calendar.html is listed below. For instructions on downloading this source code, see Downloading and accessing the JavaScript engine sample files.
<html> <head> <title>My Calendar</title> <meta name="HandheldFriendly" content="True"> <script language="JavaScript1.2"> |
<!-- // // FILE: calendar.html // // Revision Date: March 15, 2002 // // Copyright (c) 2006, iAnywhere Solutions, Inc. // //--> |
<!--
//
// Globals
//
var oldTD = null; |
//
// FUNCTION: InitializeNav()
//
function InitializeNav()
{
//
// Initialize the calendar.
//
InitializeCalAppts(); |
//
// By default, the navigation bar is not displayed.
//
HideNav(); |
//
// Show the navigation URLs that are at the bottom of the HTML
document.
//
document.getElementById("navurls").style.display = "block";
return;
} //InitializeNav |
//
// FUNCTION: InitializeCalAppts()
//
function InitializeCalAppts()
{
var objAppointments; |
if (arguments.length != 0)
throw new Error("function InitializeCalAppts()
incorrectly called");
|
for (i=1; i<=31; i++)
{
//
// Hide all appointments for the month.
//
var objAppointments = document.getElementById("dateD" + i); |
//
// If the day has appointments, it will have a
// non-null appointments object.
//
if (objAppointments != null)
objAppointments.style.display = "none";
} // for
return; |
} // InitializeCalAppts
//
// FUNCTION: ShowNav()
//
// Purpose: Show the dropdown navigation bar.
//
function ShowNav()
{ |
if (arguments.length != 0)
throw new Error("function ShowNav()
incorrectly called");
document.getElementById('openNav').style.display="block";
document.getElementById('closedNav').style.display="none";
document.getElementById('nav').style.display="block";
return;
} // ShowNav |
//
// FUNCTION: HideNav()
//
// Purpose: Hide the dropdown navigation bar.
//
function HideNav()
{ |
if (arguments.length != 0)
throw new Error("function HideNav()
incorrectly called"); |
document.getElementById('openNav').style.display="none";
document.getElementById('closedNav').style.display="block";
document.getElementById('nav').style.display="none";
return;
} // HideNav |
//
// FUNCTION: ShowDate()
//
function ShowDate(newTD) {
var oldDisp = null;
var newDisp = null; |
if (arguments.length != 1)
throw new Error("function ShowDate()
incorrectly called"); |
//
// First hide any existing appointments that are being shown.
//
if (oldTD != null) {
oldDisp = document.getElementById("date" + oldTD.id); |
if (oldDisp != null)
oldDisp.style.display = "none"; |
oldTD.style.backgroundColor="#ffffff";
} // if |
//
// Process the new selected date.
//
newTD.style.backgroundColor="#ffff00";
newDisp = document.getElementById("date" + newTD.id); |
if (newDisp != null)
newDisp.style.display = "block";
oldTD = newTD;
return false;
} // ShowDate
//--> |
</script>
</head>
<body style="FONT-SIZE: 8px; COLOR: #000000; FONT-FAMILY:
verdana,geneva,arial;
MARGIN-TOP: 0px; MARGIN-LEFT: 0px" onload="InitializeNav()">
|
<table border="0" width="144" style="font-size: 8px; COLOR: #000000;">
<tr>
<td valign="top" width="128">
<IMG height=34 src="logo.gif" width=118 border=0>
<IMG height=5 src="darkdotline.gif" width=118 border=0>
<br> |
<span style="COLOR: #333333; FONT-SIZE: 8px;">
MY CALENDAR
</span> |
<br>
<IMG height=5 src="darkdotline.gif" width=118 border=0>
<br>
<span style="FONT-SIZE: 9px;">
<b> September 2001 </b>
</span>
<br>
<br> |
<table border="1" cellspacing="1" ID="Calendar" style="FONT-SIZE: 8px;
BACKGROUND-COLOR: #ffffff;" width="115"> |
<tr align="center">
<th width="16">Su</th>
<th width="16">Mo</th>
<th width="16">Tu</th>
<th width="16">We</th>
<th width="16">Th</th>
<th width="16">Fr</th>
<th width="16">Sa</th>
</tr> |
<tr align="center">
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)" id=D1>1</td>
</tr> |
<tr align="center">
<td onclick="ShowDate(this)" id=D2>2</td>
<td onclick="ShowDate(this)" id=D3>
<font style="COLOR: #cc0000"> <b>3</b> </font></td>
<td onclick="ShowDate(this)" id=D4>
<font style="COLOR: #cc0000"> <b>4</b> </font></td>
<td onclick="ShowDate(this)" id=D5>5</td>
<td onclick="ShowDate(this)" id=D6>6</td>
<td onclick="ShowDate(this)" id=D7>7</td>
<td onclick="ShowDate(this)" id=D8>8</td>
</tr> |
<tr align="center">
<td onclick="ShowDate(this)" id=D9>9</td>
<td onclick="ShowDate(this)" id=D10>10</td>
<td onclick="ShowDate(this)" id=D11>11</td>
<td onclick="ShowDate(this)" id=D12>12</td>
<td onclick="ShowDate(this)" id=D13>13</td>
<td onclick="ShowDate(this)" id=D14>14</td>
<td onclick="ShowDate(this)" id=D15>15</td>
|
</tr>
<td onclick="ShowDate(this)" id=D16>16</td>
<td onclick="ShowDate(this)" id=D17>17</td>
<td onclick="ShowDate(this)" id=D18>18</td>
<td onclick="ShowDate(this)" id=D19>19</td>
<td onclick="ShowDate(this)" id=D20>20</td>
<td onclick="ShowDate(this)" id=D21>21</td>
<td onclick="ShowDate(this)" id=D22>22</td>
</tr> |
<tr align="center">
<td onclick="ShowDate(this)" id=D23>23</td>
<td onclick="ShowDate(this)" id=D24>24</td>
<td onclick="ShowDate(this)" id=D25>25</td>
<td onclick="ShowDate(this)" id=D26>26</td>
<td onclick="ShowDate(this)" id=D27>27</td>
<td onclick="ShowDate(this)" id=D28>28</td>
<td onclick="ShowDate(this)" id=D29>29</td>
</tr> |
<tr align="center">
<td onclick="ShowDate(this)" id=D30>30</td>
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)"> </td>
<td onclick="ShowDate(this)"> </td>
</tr> |
</table>
<div class="dataElement" ID="dateD3">
<br>
<table width="150" cellspacing="1" style="FONT-SIZE: 8px;
BACKGROUND-COLOR: #cccccc;" border="1">
<tr>
<td nowrap valign=top bgcolor="#ffff00"><b> 8:00 </b></td>
<td>Meeting with Phil Condit. Remember stealth module swap arrays.</td>
</tr>
</table> |
<br>
<table width="150" cellspacing="1" style="FONT-SIZE: 8px;
BACKGROUND-COLOR: #cccccc;" border="1">
<tr>
<td nowrap valign=top bgcolor="#ffff00"> <b>9:00</b> </td>
<td> Conference call with near east manufacturing facilities
managers </td>
</tr>
</table>
</div> |
<div class="dataElement" ID="dateD4">
<br>
<table width="150" cellspacing="1" style="FONT-SIZE: 8px;
BACKGROUND-COLOR: #cccccc;" border="1">
<tr>
<td nowrap valign=top bgcolor="#ffff00"><b>10:00</b></td>
<td>
Exec staff - Reports from Davis (finance), Whittaker
(Engineering), Gardner (Program Management)
</td>
</tr>
</table> |
<br>
<table width="150" cellspacing="1" style="FONT-SIZE: 8px;
BACKGROUND-COLOR: #cccccc;" border="1">
<tr>
<td nowrap valign=top bgcolor="#ffff00"><b>12:00</b></td>
<td>Lunch with Trudy</td>
</tr>
</table> |
</div>
</td>
<td valign="top" align="right" width="16">
<div id="openNav" onclick="HideNav()">
<IMG height=11 src="open.gif" width=16 border=0>
</div> |
<div id="closedNav" onclick="ShowNav()">
<IMG height=11 src="closed.gif" width=16 border=0>
</div> |
<div id="nav">
<IMG id=IMG1 height=92 src="calendar_nav.gif" width=16
useMap=#nav border=0 >
</div>
</td> |
</tr> </table> <br> |
<map name="nav"> <area shape="RECT" coords="0,0,15,15" href="index.html"> <area shape="RECT" coords="0,19,15,34" href="calendar.html"> <area shape="RECT" coords="0,38,15,53" href="chart.html"> <area shape="RECT" coords="0,57,15,72" href="mail.html"> <area shape="RECT" coords="0,76,15,91" href="leads.html"> </map> |
<div id="navurls">
<table border="0" width="120"
style="font-family:verdana,geneva,arial;font-size:8px;
padding-bottom:1px;padding-top:1px;"> |
<tr align="center" valign="top" >
<td><A href="index.html">Home</A></td>
<td><A href="calendar.html">Cal</A></td>
<td><A href="chart.html">Chart</A></td>
<td><A href="mail.html">Mail</A></td>
<td><A href="leads.html">Leads</A></td>
</tr> |
</table> </div> </body> </html> |
| Send feedback about this page using email. | Copyright © 2008, iAnywhere Solutions, Inc. |