I just love the Microsoft Calendar ActiveX Control. It's a great way to
quickly add some really cool features to an application, but guess what,
as usual it only works in IE! Yes I know you can get the ActiveX
plug-in for Netscape to get ActiveX to run, but what percentage of your
users have it? More importantly, if they don't have it are they gonna go
get it and then come back to your site, or are they just going to go
That's what prompted this little script. It's nothing fancy, but it'll
show you a calendar with today highlighted, let you choose a day, month,
and year to view, and with some minor modification will even put your
events onto the page on the proper days! It's basically browser
independent (it does need tables and forms, but what doesn't?) and will
do just about anything you'd want a calendar to do if you're willing to
take some time to tell it how!
Currently it takes two types of input. You can use the form or click on
any of the days the calendar displays. This becomes more useful if you
perhaps let someone choose a month and year for which to display the
calendar. Then display it (without the highlighted day) and when they
click on the day, pass the day clicked to a script which requires a day
as input. First, this will guarantee it is an existing day taking into
account leap years and such. Secondly, it allows the user to see what
day of the week it falls on.
There are an unlimited number of uses for a simple calender. Now you
don't need to build yours from scratch, you can simply customize this one!
Oh and one last thing..... if you hear laughing, it's just this little calendar
laughing at all those Y2K issues. Go on and try 2001..... we dare you!
Two things recently came to our attention about this sample. First we
found that, like everybody else, we occasionally don't write perfect code
on the first try. (We had forgotten to end some anchor tags...like all
of them!) Secondly, we realized that while we had provided clickable
days, there was no way to move from month to month without using the
form.... so naturally we took it upon ourselves to immediately rectify
the situation. Hence the new arrows in the month title bar which allow
you to skip back or forward one month. So I guess this is version 1.1
or is it Calendar 98 OSR1? Either way...here it is!
More Code Updates!
Dynamic Form Generation
This one has to do with the form at the bottom that lets
you select a date to view. I've gotten endless email about how
inappropriate it is for such an asp-centric site to hard code
the values. I originally did it so as not to confuse people
any more then the code above it already had, but
in response to popular demand... here's a sample
of a couple ways to generate the year drop down on the fly.
I've only illustrated the year, but you get the point.
CSS / XHTML Formatting
One of our visitors has taken the code to our old calendar
sample and attempted to bring it up to date. This version
includes some CSS classes for formatting and updates the
HTML to XHTML Transitional DTD standards.
Here's his email:
I recently downloaded your Calendar demonstration app. It's really great and
I'm working on integrating into the archiving section of my ASP application.
I thought you might be interested in the attached version. I've modified it
to be completely valid XHTML according to the Transitional DTD. There are a
number of CSS classes that can be used:
.cal_title - the cell that contains the month
.cal_title_r - right hand arrow
.cal_title_l - left hand arrow
.cal_day_head - cells that show the day names
.cal_day - general date cells
.cal_day_current - current day cell
.calendar - outer table
I've also made a slight mod to the ASP which means that the current day is
only displayed for the actual month rather than it showing up as the
"current day" by number in the other months.
The mod is:
' If the day we're writing is the selected day then highlight it somehow.
If iCurrent = Day(dDate) and Month(dDate) = Month(now) Then
I just wanted to give a little bit back
for all the help and stuff I've found at ASP 101.
Someone has finally gotten around to attaching a
database to our old calendar sample and submitting it
back to us to share with everyone. Your dreams have
finally been answered.
Here's his email:
Dear ASP 101 Staff,
I was making a website for my daughter's cheerleading team, and decided to
modify your calender sample. The calender now pulls events from a database.
I created a web interface for updating the database, and added a style
sheet. I also streamlined it a little. The calender uses a few techniques
from samples and articles from your site (wordwrap, filtered recordset,
mini-adovbs.inc). Then after I got this done, I went back to your website and
saw that Adrian Frost had done some work on it. I don't know how to use the
Transitional DTD stuff, so I didn't go back and put it in (just a plain ol
style sheet here). There is a readme inclosed with installation
instructions. I hope that your readers find it useful.
One of our users took a look at the calendar sample and the
user submitted version (with the database attached) and
offered an enhancement that arranges appointments in proper
Take a look at the forum post for details:
1/9/2003 4:36:19 PM
Just took a look at the Calendar app offered on this website. Very nice, useful, espec. with the addition of the database.
In order to arrange appointments in proper chronological order, I made an addition to the SQL statement that creates the recordset for the main page.
Within calendar.asp on my web server, the SQL statement now reads:
select * from calender_event order by start_time
"order by start_time" does the trick. Now your appointments are in chronological order.
A little SQL goes a long way!
Thanks go out to John Meyers (aka HarryHoudini) for sharing.
Calendar in a Pop-Up Window
One of our visitors wanted a calendar that worked slightly differently...
Your example of a calendar is not bad but really did not serve my
purposes. I wanted to have a pop up window to display when a button is
pressed showing a calendar where a user picks a date. Once that date is
picked, it returns that value to the parent form. After some careful
coding, I have an example that works great that I would like to submit
There are two files related to my asp application. The first shows the
field and a date picking button, the second is the actual calendar and
it returns the result to the first very nicely. God how I wish somebody
had this for me before it took me some time to figure it all out since
nobody gives you a clear way on how to code it yourself!
- Rex Campbell
Unfortunately it was too late for Rex, but for all the rest of you...
it's your lucky day... he's done all the work for you. Thanks Rex!
Yet Another User-Contributed Version of the Calendar Sample
I recently got an email from yet another visitor who wanted to share their modified
version of our sample code. Quite a few changes in this version... if any of these
features are something you think might be useful, download it and give it a whirl!
Thanks for calendar on your site, loved it. Made a few amendments which you may
(or may not) be interested in.
Prettier - based on the look of the <asp:Calendar> control available in aspx.
Easily resizable using constants at the beginning of the file.
Should handle regional date formats using constants at the beginning of the file (not really tested, currently set for UK).
Has no blanks for days before the 1st of the month in the first row or after the last day in the last row, inserts dates from the appropriate month(s) instead.
Uses a sub to paint the day names onto the calendar.
Automatically changes to dates selected on the dropdown menus (day dropdown not really needed).
Included a button to jump to today.
Has date error handling function, if illegal date entered, will jump to closest possible date rather than today.
Includes code so that the name of the file isn't hard-coded. URLs are created to jump back to itself no matter what it is called.
Have enclosed the code, it wouldn't need much hacking about to change it back to an include file.
Thanks go out to Robin for taking the time to modify the code and especially for sending
it back to us so that others can benefit from the changes as well. You can download a zip
file containing Robin's version from here:
calendar_robin.zip (3.5 KB)