Author: Michael Elfial
This article describes a calendar implementation designed for ASP/IE usage. The IE specific feature is the ability of the Microsoft WEB browser to show modal dialog boxes. However it can be easily changed to support other browsers as well. I decided to publish it in this form because using modal dialog boxes for temporary GUI is much more convenient for the user then pop-up windows or DHTML layers/divisions.
The code is mostly Javascript DHTML but it has a little ASP part to support date conversion. Why date conversion is implemented myself if we have such functions in VBScript, JScript? Unfortunately the MS supplied API which is base for these scripting routines is a little buggy and causes very unpleasant problems when used with some date formats (for example Bulgarian). Also it implements some heuristics if date separator character is not the character expected and the result is sometimes unpredictable. Therefore doing this ourselves allows us to solve the problem and know exactly what happens. See the second part of the article (below) for more details about the conversion.
The GUI is implemented in these 3 files:
So, the most important part of the code is the clndr.js. The constants in this file define the names of the days, months, the allowed years, the date and time separators, the date format ordering and the special holidays. Obviously this is country and language specific. In case you want to support many countries and languages you may write some ASP code that generates this constants section according to the user selected language and country. The best way is to change the clndr.js file to ASP file (do not forget to update the SCRIPT SRC=... statements in the other pages!). Then you can fetch the country/language settings from your ASP application and generate the constants dynamically. If the variations are few (2-3) you can create copies of the files and update them manually, then from the other pages invoke the copy appropriate for the user selected language and country.
About the constants
The constants section is in clndr.js:
// --> BEGIN CONSTANTS
// Modify these values if needed
// Usualy these values are common for the entire site so they are
// not configurable through parameters.
///////////////////////////////////////////////////////////////////////////////////////
// Day names
VCalendar.weekdays = new Array("Su","Mo","Tu","We","Th","Fr","Sa");
VCalendar.weekdaysLong = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
// Month names
VCalendar.months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
// Start/End year shown in the calendar
VCalendar.beginYear = 1998;
VCalendar.endYear = 2010;
VCalendar.DateDelimiter = "/";
VCalendar.TimeDelimiter = ":";
VCalendar.DateOrder="dmy";
VCalendar.WeekStartDay = 1; // 0 - sunday, 1 - monday and so on
VCalendar.WeekHolidays = new Array(0,6);
VCalendar.Holidays = new Array("1,1","5,1","5,24","3,3","5,6");
// <-- END CONSTANTS
Most of them are obvious, but let me say a few words for some of them:
VCalendar.beginYear = 1998; VCalendar.endYear = 2010;
These specify the range of years which will be displayed and allowed by the calendar for user selection.
VCalendar.DateDelimiter = "/"; VCalendar.TimeDelimiter = ":";
These specify the characters used to delimit date and time parts in their textual representation. This allows the calendar to parse the initialization date value and compose textual date results. You can allow the user type the date/time in a text field and still allow usage of the calendar dialog as alternative. The value from the text box is used to initialize the calendar.
VCalendar.DateOrder="dmy";
Specifies the order of the date parts in the textual representation. d - is for the day, m - for the month, y for the year.
VCalendar.WeekStartDay = 1;
Specifies the week's first day. 0 is for Sunday, 1 for Monday and so on.
VCalendar.WeekHolidays = new Array(0,6);
VCalendar.Holidays = new Array("1,1","5,1","5,24","3,3","5,6");
These lines specify the specific holidays. Each country has its own holidays and if you want they to be indicated you must specify them. First the WeekHolidays array specifies the indices of the week holidays (the regular holidays). In most European and American countries they are 0 - Monday and 6 - Saturday, but if you need to support a country where they are different - change the array. The second array Holidays specifies strings - pairs "month,day" which indicate the specific holidays spread through the year.
If you are going to implement dynamic constants generation you will need to do changes like these:
In the shclndr.htm you should change the <SCRIPT SRC="clndr.js"></SCRIPT> to <SCRIPT SRC="clndr.asp"></SCRIPT> and so on.
The demo.asp page sows how to invoke the calendar and also uses the conversion.inc to implement conversions to and from native OLE Dates so they can be used easily in the rest of the ASP application. The conversions.inc is needed for the reason mentioned above - buggy Win32 API conversion functions concerning some languages and country standards, but this one is for the server side of the application. Note that this include file has some constants as well. They should correspond to the client side configuration (the constants in the clndr.js). Therefore if you are using the sample as base for more dynamic implementation be sure to use the same settings as on the client side.
On the client side the demo.asp uses the routines.js to invoke the calendar. This file provides a few simple routines that allow you invoke the dialog with all the parameters you want to pass in one statement. The calendar supports various views and they can be activated/disabled by using the parameters of the doClndr function (see in clndr.js). This includes week numbers and time. You can specify also default date, close behavior and a field to receive the selected date's week number. The demo.asp contains simple demonstration of this - in most cases the calendar will have constant layout for the entire application, thus most of the parameters (such as show week numbers for instance) sill be constants. However if you see some benefit in showing the calendar in different forms in different places of the application you can do so by simply changing the value of the parameter you need.
Click this link to open the demo.asp in separate window. Note that the page is very simple with no layout improvements.
The samples in the archive can be tested with ALP (Active Local Pages) but they can be used directly on IIS without changes.
clndr.zip - this article and the sample. No special components are required.
Copyright newObjects and Michael Palazov - Elfial 2002-2003