Getting All the Pieces Together
Let's consider an example. You have a Web form that has four different date fields to be filled in. These
are the estimated and actual beginning and ending dates of a project.
To get users to select the dates from your
calendar interfaceyou should provide four "browse" buttons next to the text boxes. Clicking on
the buttons brings up a calendar page that the user can select a date from. The interface will look
If you want to get fancy and improve user comprehension, you can replace the four buttons with a calendar icon.
Here's an example:
Below is the page that displays when the icon is clicked. They can select any date and even
navigate from month to month.
When the user selects a date, the calendar window closes and the text box on your original form is populated with their selection.
The user shouldn't be able to type anything in the text box.
My calendar is actually two separate HTML tables. The top table is the gray one containing the month
and the arrow graphics. The bottom table contains the dates, two horizontal lines and the "Today" button.
When the arrows in the top table are clicked, the page refreshes with the same table for the previous
or following month. So at all times, the ASP page needs to know two thingswhat month
and what year to display. These two values are sent as arguments via the query string to the
page when the ASP page is called.
I began with a new ASP page called "calpop.asp"
<%@ LANGUAGE="VBSCRIPT" %>
'----------- WEB SITE: YOUR WEB SITE NAME ------------
' File Name: calpop.asp
' Displays a pop up Calendar
' m = month to display, default to current month
' y = year to display, default to current year
' Author: Rama Ramachandran
' Imperium Solutions
' Internet: email@example.com
' Date Created:
' Modification History:
Now you are ready to begin coding for the page. First, declare a few variables:
' All your ASP preprocessing code goes here
' -- Declare Variables
Dim intM ' Cur Month
Dim intY ' Cur Year
Dim intFDay ' First day of the month
Dim intNoDays ' Number of days in the month
Dim intMPrev ' Previous Month
Dim intYPrev ' Previous Year
Dim intMNext ' Next Month
Dim intYNext ' Next Year
Now, figure out what month and year you wish to display. You get this value from the Request
object and if it is blank, you can assume the current month and current year.
' -- What month and year are we displaying the calendar for
intM = Request("m")
' -- if blank, use current month
If intM = "" Then
intM = Month(Date())
intY = Request("y")
' -- if blank, use current year
If intY = "" Then
intY = Year(Date())
In order to draw a calendar, the only other information needed is to figure out what day of the week the month begins
on and how many days there are in that month. Stay away from ASP calendar code on the Web or in textbooks
where these values are unnecessarily hard-coded or coded with a lot of if statements and select case statements.
VBScript has built in functions that can make it very easy to calculate the days.
intFDay = WeekDay(intM & "/01/" & intY)
intNoDays = DateDiff("d", _
intM & "/01/" & intY, _
DateAdd("m", 1, intM & "/01/" & intY) _
Use the "WeekDay" function to identify the day of the week for the first of the month, then use
the DateAdd and the DateDiff to fill out the rest of the days in the month. Notice the line continuation
characters ( _) in the code above. This calculation automatically takes care of odd months such as
February as well as leap year scenariosall with one line of code!
To allow the user to go back and forward one month at a time you need to know the previous
and next month/year values. Let us calculate them now, again, using built-in functions:
' -- Figure out the previous and next months also
intMPrev = Month(DateAdd("m",-1,intM & "/01/" & intY))
intYPrev = Year(DateAdd("m",-1,intM & "/01/" & intY))
intMNext = Month(DateAdd("m",1,intM & "/01/" & intY))
intYNext = Year(DateAdd("m",1,intM & "/01/" & intY))