Object-Oriented ASP Calendar

Introduction

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 MyCalendar.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:

<% MyCalendar.OnDayClick = "javascript:alert('The date you clicked on is $date')" %>

What the above example does is when a user clicks on a day, it sends a JavaScript alert to the user indicating the date that 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 holidays:

<% ' 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 MyCalendar.Draw() %>

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.

Click here to view a sample of the calendar.

p34c3 +0 4|| c0d3erz!