As big proponent of Object-Oriented design, I try to take many common
and repetitive tasks and package them up into something reusable and simple
to understand. That's what OOP is all about anyway, right? Last month I brought
the ASP community the FileUploader library which was simply an ASP include that
assisted developers in retrieving files from their users by use of VBScript classes.
(Check it out here ) Well here I am am
again, courtesy of ASP 101, to present my latest offering. This time around I bring
you a Calendar include that allows you to create calendar based applications
quickly so you can focus on functionality rather than worry about
what weekday the 1st of January falls on. Enjoy!
Some of the Features
Easy positioning and sizing to best suit your application's needs.
Dynamic cell width and font scaling based on the size of your calendar.
Current day highlighting and activity scheduling capability.
Customizable actions for events such as OnNextMonthClick, OnPrevMonthClick and OnDayClick.
Customize titlebar and font color as well as font face.
Let's Get Coding
When I set out to create the
Calendar library, I wanted to be able to get a calendar up and running with as little
code possible. Once I finished the library, I could create a pretty nice
looking calendar with less than 15 lines of code. When you view the
example provided with the library, you will be suprised to see that I didn't write a
single tag of HTML for the actual calendar. How's that for simplicity! Now, moving on to the code.
The first thing you will need to do is include "calendar.asp" with
a server-side include statement. Once that's complete, you can create your
Calendar object like so:
Dim MyCalendar Set MyCalendar = New Calendar
The next thing to do is define what the calendar is going to look like.
Here is an example of how to set all of the visual properties of the calendar
that tell it how to display itself to the user's browser. All of these
properties in the example are explicitly set to their default values just to
show you what is available for modification... meaning you could omit any of the following lines of code and the calendar would still look the same. Here it is:
MyCalendar.Top = 0 'Sets the top position
MyCalendar.Left = 0 'Sets the left position
"absolute" 'Relative or Absolute positioning
MyCalendar.Height = 500 'Sets the height
MyCalendar.Width = 500 'Sets the width
MyCalendar.TitlebarColor = "darkblue" 'Sets the color of the titlebar
MyCalendar.TitlebarFont = "arial" 'Sets the font face of the titlebar
MyCalendar.TitlebarFontColor = "white" 'Sets the font color of the titlebar
MyCalendar.TodayBGColor = "skyblue" 'Sets the highlight color of the current day.
MyCalendar.ShowDateSelect = True 'Toggles the Date Selection form.
Okay, the calendar is visually stunning, but it doesn't
do anything yet except display the days of the month. Now its time to make it
come alive by adding some event code. Since the OnNextMonthClick and the
OnPrevMonthClick events work just fine without modification, I will show you how
you can respond to a user clicking on a particular day of the month by setting the OnDayClick event:
What the above example does is when a user clicks on
was clicked. Notice that "$date" is replaced with the actual date the user clicked on.
This is because "$date" is a special variable that is passed to the
OnNextMonthClick, OnPrevMonthClick and OnDayClick events and is replaced by an actual date
string. (e.g. 12/25/00). Just imagine creating a application
where a user can click on a day of the month and you popup an event scheduler
for that day. Pretty cool, huh?
Our next order of business is adding activities to the calendar.
Activities could be anything from holidays to your weekly workout
on Thursday. This is a relatively simple task and could easily be database
driven. In this example, we are just going to show a couple of
' Check the current month Select Case Month(MyCalendar.GetDate())
' January Case 1
' Add New Years Day
MyCalendar.Days(1).AddActivity "<b>New Years</b>", "limegreen"
' December Case 12
' Add Christmas Day
MyCalendar.Days(25).AddActivity "<b>Christmas</b>", "limegreen" End Select
The calendar is now prepped and ready to be seen by the
user. The last line of code that you need to have lets the calendar
know that we are done modifying it and to show it to the end user. Here is the
moment of glory:
' Draw the calendar to the client's browser
That should just about wrap up this article. To get the
Calendar include and example code, click here to download it. Thanks to
everyone at ASP 101 for their support and efforts in the ASP community. Email questions or comments to me, Jacob G.