EzEvents

• Download source - 62.1 Kb

Introduction

While creating a project website for work recently, I wanted to add an event calendar to make it easy for team members to communicate events such as meetings, training, moral-building events, etc. to other team members. Yeah, I know, there are lots of ASP calendars out there. I looked all over the web and found tons of web calendars, but I did not find exactly what I was looking for in format or capabilities. Also, most of the really good ones were not free and there was no budget to purchase one. So, I decided to try and write one for myself. I had found the basics for what I wanted at www.4guysfromrolla.com. There I found an article where the author had taken a very simple calendar app found on www.asp101.com and added the ability to enter events only.

However, in addition to being able to enter events, I wanted the ability to edit and delete events and enter events that span multiple days. I also wanted to provide some way of cleaning expired events from the database so that the database would not continue to grow unchecked. I am not a web developer by trade but I thought that I could tackle this, so I gave it a shot. The result is what I call (for lack of a better name) EzEvents.

Database Fields

The application, as designed, utilizes a Microsoft� Access database to store the events for the calendar. The database contains six fields of interest. These are listed in the following table:

Application Pages

EzEvents consists of six viewable pages. These are listed in the following table:

Calendar Views

EzEvents provides two calendar views, the Single-Month Calendar View and the Look Ahead Calendar View. The default (main/home) page for EzEvents is the Single-Month Calendar View (Default.asp). This page displays a calendar for the current month only by default. It also provides controls that allow you to select a different month and/or year to display. When the user selects a new month or year, the displayed calendar is automatically updated to reflect the events for that month using client-side JavaScript generated by the server-side VBScript. In addition, the calendar provides arrow controls that allow you to move forward or backward one month at a time.

The Single-Month Calendar View provides two arrow buttons. The left arrow, or Previous Month button, and the right arrow, or Next Month button. The Previous Month button will not be available if the Single-Month Calendar View is displaying the first month of the current year (see Design Notes).

The Single-Month Calendar View provides a Look Ahead button. By selecting this button, the user is able to see a calendar for the next 12 months (default) starting with the current month.

Both views also provide a Summary button that, when selected, displays the Event Summary Page. The Event Summary Page lists all events for the month being viewed in a form suitable for printing and ordered chronologically.

The Look Ahead Calendar View displays, by default, the next 12 months of events. However, that view provides a control that allows the user to change the number of months to view from 2 to 24 months. In addition, a checkbox is provided that allows the user to save this setting so that the next time the user visits the page, the previously-selected number of months will be displayed in the Look Ahead Calendar View. This feature saves the count on the client machine using a cookie named "EZEVENTS".

Adding Events

Both the Single-Month Calendar View and the Look Ahead Calendar View provide a button labeled Add Event. When clicked, the Add Event Page is displayed. This page provides a form with which the user may enter the data for a new event. The Add Event Page contains controls that allow the user to select the start date and end date for the new event. If the user is viewing a calendar for the current month when he/she selected the Add Event button, the controls will default to the current date, otherwise, the controls will default to the first day of the month being viewed.

The user may enter an event that occurs only on a single day or that spans multiple days. If an event is to be listed for a single date only, then the start date and end date controls should be set to the same date. If the user wishes to enter an event that spans multiple days, then the date of the last day that the event is to be listed is entered into the controls provided for the end date by the Add Event Page.

The server-side VBScript in the Add Event Page generates client-side JavaScript to perform validation on the information entered by the user. The validation is performed at the time that the user clicks on the Add Event button on the Add Event Page. The event will not be submitted for addition to the database until the user correctly enters the information for the event.

The user has the option of abandoning the Add Event process and returning to the most recent calendar view by selecting the Return to Calendar button on the Add Event Page. If after entering the new event data, the user clicks the Add Event button on the Add Event Page, the new event is entered into the database and the user is taken back to the most recent calendar view. If the event that was just entered is in the current month, the user will see the event title in the month's calendar as a hyperlink.

As an added benefit, the author of a new event may elect to password protect the new event he/she defines. This will prevent anyone who does not know the password from being able to modify or delete the event from the database. The protection is limited as the password is currently stored in the same database as the events and is thus visible to anyone with read access to the database. However, it helps to discourage "unauthorized" modifications to an event. The password may be up to 20 characters in length.

The example image above illustrates the Single-Month Calendar View. In this example, there are two events. One occurs on a single day, 6 July 2001. The other spans two days, 16 and 17 July 2001. You will also notice that if the current month is being displayed, the current day number (6 July 2001 in this example) will be highlighted.

Viewing Existing Event Details

If the user clicks on the title of an event in one of the calendar views, the Selected Event Page is displayed showing all the information available regarding the event selected. From this page, the user can click on the Edit/Delete Event button to either modify the selected event or delete it from the database. A padlock will be displayed beside the author's name if modifications to the event are password protected. The user may also select the Back To Calendar button to return to the last viewed calendar.

Editing and Deleting Existing Events

Should the user select the Edit/Delete Event button on the Selected Event Page, the Edit Event Page will be displayed. The Edit Event Page provides a form very similar to that presented by the Add Event Page. This form allows the user to modify the details of the selected event. The user may abandon the edit/delete action by selecting the Return to Calendar button, if desired.

If the user selects the Update button, the user is taken back to the Selected Event Page which will now show the details of the modified event as they were recorded in the database. This allows the user to proof his/her changes to the event. The user may then return to the last viewed calendar by selecting the Return to Calendar button or make further edits/corrections to the event by selecting the Edit/Delete Event button again. As with the Add Event Page, all user input is validated before the form is submitted. However, if a user attempts to edit/delete a password protected event for which the user does not have the correct password, the author will be returned to the Selected Event Page which will now contain a message notifying the user that he/she is not authorized to modify the selected event.

Configuring EzEvents

There are a few parameters controlling the look of EzEvents that you can change by editing the server-side include file "ConfigCalendar.inc" located in the "Includes" folder. This file provides constants that you can use to change various colors used within EzEvents, the name/location of the database, and other useful constants. A constant is provided that allows you to alter the number of months for the Look Ahead Calendar View. For example, if you want the "look ahead" to be 3 months or 15 months, you can simply change the value of MAXLOOKAHEADMONTHS in "ConfigCalendar.inc".

The app also provides for automatically purging expired events from the database. The "ConfigCalendar.inc" include file defines a constant, EVENTEXPIRATIONPERIOD, that allows you to pre-configure the expiration time. This time is specified in number of days (a negative value). When the event becomes EVENTEXIRATIONPERIOD days old, it will be automatically deleted from the database the next time someone visits the Single-Month Calendar View (EzEvents' home page) in their browser. A Boolean flag is also provided by the include file to allow you to turn off this feature if you wish to control this maintenance task by some other means.

A constant is also provided in "ConfigCalendar.inc" called CALENDARTITLE that may be used to change the title of the event calendar across all pages of the app.

I have commented "ConfigCalendar.inc" so that it should be easy to determine how each constant is used.

Security Considerations

Since I developed EzEvents for a project with restricted access, I could trust everyone who used the site to behave in a professional manner (I think). As a result, the app allows everyone to have access to view, add, edit or delete events. However, it would be an easy matter for you to restrict access to the add/edit/delete capabilities of the app if you wish to act as a "moderator" of what was listed in the event calendar. In addition, a constant is provided in the server-side include file "ConfigCalendar.inc" that allows you to easily eliminate those capabilities completely if you wish to handle this yourself as webmaster.

Processing Database Modifications

The actual modifications to the database are performed by two processing pages, "ProcessAddEvent.asp" and "ProcessEditEvent.asp". These pages are for processing only and are never displayed to the user. The form provided by the Add Event Page posts to "ProcessAddEvent.asp" and the form on the Edit Event Page posts to "ProcessEditEvent.asp".

The code that performs the database connection resides in the server-side include file "DBCONNECT.inc".

Adding EzEvents to Your Site

To add EzEvents to your site, simply copy the files and folders included in the zip to your web, add a link to "default.asp" on your site, and provide the appropriate write access to the folder containing the database if you wish to allow others to edit/delete events from the database.

Quick Look At Today

I have provided the code to allow you to embed a table on another page of your site that lists only today's events. Like the calendar views, you can click on an event title to see details of the event. In this case, however, an Event Viewer Page is displayed. This page has the same appearance as the Selected Event Page but it provides no controls to allow the user to edit/delete the event. You must go through the main EzEvents interface described previously to perform those actions. As an example, you may wish to include a list of "Today's Events" on the home page of your site. All you have to do is make that page a .asp file and include the server side include file "TodaysEventsTitles.inc" wherever you wish the event list for today to appear.

Design Notes

I never planned to use this application to store/display events that occurred in the distant past. The plan was to use it to post events that are to occur in the future. In addition, it supports the display of events that have occurred in the recent past so that users can see an event that he/she may have missed. After a predefined time period elapses (default 7 days), the expired events are deleted. Therefore, I did not design this application to support dates before the first month of the current year. It only supports dates from the first month of the current year, through the last month of the current year plus MAXYEARSSELECTIONS years. See "ConfigCalendar.inc" and "DisplayCalendar.inc".

Each of the viewable pages are simple as all code is provided through server-side include files. You can easily modify the look of the viewable pages to match your site.

When creating this app, I wanted to avoid using the Session object because the configuration of our project's server did not support freeing specific data from the Session object. I am not the administrator for the server so I could not alter the server's configuration. Therefore, the code passes some information from page-to-page via query strings. This may make it difficult for some web developers to follow but probably not. The information passed via query strings is the same from page-to-page and is simple in content. This data is utilized to persist information regarding the most recent calendar view (i.e., Single-Month Calendar View or Look Ahead Calendar View).

I also utilize hidden input types within forms whenever it makes sense to do so to facilitate the exchange of data between pages. I tried to comment the code to make it as easy to follow as possible. Unfortunately, it isn't easy to format server side VBScript that generates HTML to make the HTML very readable, so you just have to jump in and study it.

I also avoided using Cascading Style Sheets in the generated HTML in order to accommodate older browsers that may have to access this app on our project site. As referenced earlier, the app does use client-side JavaScript, so you have to have a script-enabled browser.

Possible Enhancements

You may be able to think of a few enhancements to this app. Here are a few:

• Modify "DisplayCalendary.inc" to support any date regardless of how far in the past it occurred.
• Password protect access to Add/Delete capability if EzEvents will be used on a public site.
• Add a Vacation Schedule View with pages to enter/modify/delete vacation schedules for project personnel. (Hint: add another table to the database to store vacation records.) It is often useful on time-critical projects to post vacation schedules on a project site so that team members can plan around absences of key personnel.
• A control on the Selected Event Page that allows the user to notify someone by e-mail of the event being viewed.

Closing Comments

I hope that you find this useful. If you have some suggestions for improvements to this app, let everyone know by posting them in this article's comments section. Enjoy!