 |
The
page makecalendar.htm contains
a form with two inputs, month and year. Both have values selectable
from lists which avoids the user making any errors in entry
- Only valid values are allowable.
This
means we don't need to go overboard validating the passed
data in the ASP page.
All
the work is done in VBScript in the ASP page
|
| The
HTML code in makecalendar.htm
is quite straightforward, having a simple form which allows
two data values to be selected and returned to an active server
page, calendar.asp. |
|
<form
name="frmDate" method="post" action="calendar.asp">
<table width="100%" border="0" cellspacing="0"
cellpadding="4">
|
Begin
the HTML form, called frmDate. This form will post back its
data to calendar.asp. The form contains a single table - It
has three rows each of two columns |
<tr>
<td width="17%">
<div align="right">
<strong>
<font color="#003300"
size="2"
face="Verdana, Arial, Helvetica,
sans-serif">Month</font>
</strong>
</div>
</td>
<td width="83%">
<select name="listMonth" id="listMonth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select></td>
</tr>
|
The
first row of the table cotains the prompt text, Month,
in the left-hand column and a select object in the second
column. The text is displayed in strong (bold) Verdana and
is right-justified.
The
select object is called listMonth. Its visible
list text consists the names of the months of the year. The
values associated with the visible month names are the month
numbers, starting at 1 and ending - in December - with 12. |
<tr>
<td>
<div align="right">
<strong>
<font color="#003300"
size="2"
face="Verdana, Arial, Helvetica,
sans-serif">Year</font>
</strong>
</div>
</td>
<td>
<select name="listYear" id="listYear">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
</td>
</tr>
|
The
second row in the table contains the year selection elements:
In
column one there is prompt text, Year.
In
column two there is another select object, in this instance
containing a list of years. The visible text is identical
to the value of each year.
The
selected values will be sent to the specified page when the
submit button is clicked . . . |
<tr>
<td> </td>
<td>
<input
name="cmdSubmit"
type="submit"
id="cmdSubmit"
value="Make calendar">
</td>
</tr>
|
The
third and final row of the table contains the submit button,
which bears the text Make calendar.
The
button submits the form to the page specified in the action
property of the form tag. |
</table>
</form> |
The
table is wrapped up and the form completed with the appropriate
closing tags. |
| |
|
|
The
ASP page accepts the passed data
values in the request to the server,
dynamically writing HTML into a static
HTML framework.
|
The
basic HTML page is created from HTML code which remains the
same every time the page is served. Below, only the elements
relevant to dynamic calendar creation are discussed |
<%@LANGUAGE="VBSCRIPT"
%>
<%
Dim strMonth
Dim strYear
Dim strDayOfWeek
Dim intLastDay
strYear = request.Form("listYear")
strMonth = request.Form("listMonth")
%>
<HTML> |
The
first lines of VBScript appear before the opening HTML tag
of calendar.asp.
After
declaring the server-side scripting language as VBScript in
the line <%@LANGUAGE="VBSCRIPT"
%>,
the passed parameters are copied into named variables:
The
passed year value into strYear and the month into strMonth.
The
HTML code of the page begins with the tag <HTML>.
|
<p>
<font color="#003300"
size="2"
face="Verdana, Arial, Helvetica,
sans-serif">
<strong>
Calendar of <% =MonthName(strMonth) %>, <% =strYear
%>
</strong>
</font>
</p> |
The
next section of code appears in the body of the HTML.
The
name of the month and the year are combined with HTML text
to give the calendar which follows a title |
<table
width="100%"
border="1"
cellpadding="4"
cellspacing="0"
bordercolor="#009933">
<tr align="center" valign="middle">
<td width="10%">
<strong>
<font color="#009900"
size="1"
face="Verdana, Arial, Helvetica,
sans-serif">
Monday
</font>
</strong>
</td>
<td width="10%">
<strong>
<font color="#009900" size="1" face="Verdana,
Arial, Helvetica, sans-serif">Tuesday</font>
</strong>
</td>
<td width="10%">
<strong>
<font color="#009900" size="1" face="Verdana,
Arial, Helvetica, sans-serif">Wednesday</font>
</strong>
</td>
<td width="10%"><strong><font color="#009900"
size="1" face="Verdana, Arial, Helvetica, sans-serif">Thursday</font></strong></td>
<td width="10%"><strong><font color="#009900"
size="1" face="Verdana, Arial, Helvetica, sans-serif">Friday</font></strong></td>
<td width="10%"><strong><font color="#009900"
size="1" face="Verdana, Arial, Helvetica, sans-serif">Saturday</font></strong></td>
<td width="10%"><strong><font color="#009900"
size="1" face="Verdana, Arial, Helvetica, sans-serif">Sunday</font></strong></td>
</tr> |
The
calendar begins with a header row. The framework for the calendar
- a HTML table with visible borders - is set up in HTML code
with the days of the week as column headers.
After
the table is started using <table
followed by some presentation parameters, the first row starts
<tr
align="center" valign="middle">.
A
cell is created, beginning with <td
width="10%">.
The cell contains the text Monday and ends
with the closing tag </td>.
This
process is repeated for the rest of the days of the week (shown
in smaller text at left) then the table row is ended with
the closing tag, </tr>.
The
rest of the table is generated by VBScript, with the closing
</table>
tag
provided by HTML code, as detailed below. |
<%
Dim intPreFirst
Dim intDayCount
Dim PostLast
Dim i ' Loop counter
'
intPreFirst = WeekDay(DateSerial( strYear , _
strMonth , 1), vbMonday) - 1
intDayCount = Day(DateAdd("d", -1, _
DateSerial( strYear , strMonth + 1,
1)))
intPostLast = 7 - ((intPreFirst + intDayCount) mod 7)
|
The
calendar table is processed in four blocks of code with the
cells written out in three sections.
The
first block declares the variables used the calculates the
number of empty cells which precede the first day of the month,
the number of days in the month and the number of blank cells
which must follow the last day of the month. These trailing
cells ensure that the final row is correctly formatted as
seven cells. |
'
' Start first row
'
Response.Write "<TR>"
'
' Cells before first of month
'
For i = 1 to intPreFirst
Response.Write "<TD> </TD>"
& vbCR
Next
|
The
first row begins with any blank cells necessary to place the
first of the month in the proper day column.
The
row is started with a <TR>
opening tag. Because these are filler-cells the closing tag
doesn't need to be included here, since there can never be
more than six filler cells.
Each
<TD> </TD>
is a cell conatining only a hard space, .
The vbCR
is a carriage return (a new line). It's included to make the
HTML code more readable. |
'
' The days of the month
'
For i = intPreFirst + 1 to intPreFirst + intDayCount
If i mod 7 = 1 Then ' Start of a new row?
Response.Write "<TR>"
End If
Response.Write "<TD align='right'
valign='top'>" & _
"<font color='#000000'
size='1' " & _
"face='Verdana, Arial,
Helvetica, sans-serif'>" & _
i - intPreFirst & _
"<BR> </font></TD>"
& _
vbCR
If i mod 7 = 0 Then ' End of a row?
Response.Write "</TR>"
& vbCR
End If
Next
|
The
remained of row one and then the body of the table is generated
by the next block of code.
The
loop iterates once for each day of the month, with an offset
of intPreFirst
it runs from 1
to intDayCount.
If
this pass is at the start of a new row, i
mod 7 = 1,
the opening tag for the new row, <TR>,
is written.
A
cell is written containing the day number at top right plus
a line break <BR>
and a hard space, ,
to improve layout.
Finally,
if the counter on this pass is divisible by 7, i
mod 7 = 0,
then the row is complete and a closing </TR>
tag is written after the cell's closing tag. Again, vbCR
is written to insert a new line into the output and make the
HTML produced more readable. |
'
' Wrap up the last row
'
For i = 1 To intPostLast
Response.Write "<TD> </TD>"
& vbCR
Next
If intPostLast > 0 Then ' Need to wrap up last line?
Response.Write "</TR>"
End If
|
After
a cell for the final day of the month is written the final
row is expanded to seven cells.
If
there were filler cells required to complete the final row
the row will need to be terminated. The code checks whether
any filler cells have been written and, if they have, the
row is completed with </TR>.
If
there are no filler cells (That is, the last day of the month
is in the right-most column) the closing </TR>
will have been written in the preceeding code block when the
condition i
mod 7 = 0
is met. |
'
' End the table in HTML
'
%>
<!-- The scripted calndar table ends here
-->
</table> |
Finally,
with a cheery comment, the VBScript ends and the table is terminated
with a closing </table>
tag. |
See also ASPcalendar.asp
for a more detailed discussion
of the calendar's concepts and some of the functions used. |
