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 someplace else?
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... the downloads include 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.
CSS zip file included in the downloads.
With a Database Attached!!!
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.
[non-related section removed]
Michael S. Hepfer
Calendar database inlcuded in the downloads.
Calendar Sample Enhancement: Events Sorted
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 chronological order.
Take a look at the forum post for details:
|Date:||1/9/2003 4:36:19 PM|
|Message:||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 to you.
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!
Calendar datepicker included in the downloads.
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 below.