Popup Calendar 1.0 - DHTML Lab

Pop-up Calendar 1.0
Introduction

By using the code contained in this article, you agree to the following terms.

It's been a while since we published a DHTML widget here at DHTML Lab. While the Web has quite a few popup calendars already in use, it doesn't have the DHTML Lab Popup Calendar.

Some of the features of the DHTML Lab Popup Calendar that make it unique are:

No knowledge of JavaScript is required to customize and use it. A beginner's aquaintance with HTML and CSS syntax is all that's needed.
Popup calendars can be included in your web pages using a custom HTML tag and attributes, in three easy steps
The calendar element dimensions are specified in relative units, conforming to accessibility requirements. If the user changes the browser text size, the calendar follows suit.
Any date format is accepted for date display in associate input element. Most calendars offer US and European formats only with set delimiters. You can specify any delimiter and any ordering of date-month-year.
User date selection can be limited by specifying start and dates that can be displayed and navigated to.

and more...

Browser Support

This first version of the DHTML Lab Popup Calendar works only in a Windows environment in Internet Explorer, Netscape, Mozilla and Opera, in the versions listed below

		5.0 +
		6.1 +
		0.9 + ( except for 0.9.3 )
		7.02 +

Future versions will include support for other platforms and browsers. We believed this to be a good start to get the widget out there and working.

Code Discussion

The tradition here at DHTML Lab is to discuss scripts on a statement-by-statement basis. We are a "lab" site, after all. This first article is quite long, outlining as it does, the many customization options available. Therefore, there is no space for a script discussion.

We will describe the script statements in a future article, probably after we expand our browser support.

Live Examples

This article contains several live examples of the DHTML Lab Popup Calendar, beginning on the next page.

Acknowledgement

Many thanks to my friend and colleague Andrew Galloni, who outlined some of the math behind the logic required to navigate the calendar months and years, and showed me a more elegant way to script it.

Script Download

All the files needed for using the DHTML Lab Popup Calendar, including a sample page are included in a downloadable ZIP file:

Download: dlcalendar.zip

Let's get started by looking at page inclusion of the DHTML Lab Popup Calendar

-----------------------------------------------------------------------------------------------

QuinStreet grants you a non-transferable and non-exclusive right and license, without the right to grant sublicenses, to use the following software "Popup Calendar" (the Software). You may use the Software solely on one (1) Internet Web site. You shall not sell, assign, disseminate or otherwise make available any portion of the Software to any third party. You must keep the following copyright notice with all use of the Software: Copyright (c) (CURRENT YEAR) QuinStreet Inc. All Rights Reserved. Contact permissions.com for more information.

THE SOFTWARE IS LICENSED "AS IS". ALL OTHER WARRANTIES WHETHER EXPRESS OR IMPLIED INCLUDING, WITHOUT LIMITATION, WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.

You shall not acquire any proprietary rights in the Software and shall not modify, translate, reverse engineer, decompile, disassemble, or create derivative works of the Software or remove any proprietary notices on the Software. You may make minor modifications to the Software to conform the Software to your application, provided that you agree to assign all right and interest to the modifications to QuinStreet, at no cost. You acknowledges that the source code of the Software is confidential and proprietary information of QuinStreet and that will not disclose such information to any third party.

-----------------------------------------------------------------------------------------------

Send a comment or suggestion to Peter Belesis

Created: July 20, 2004
Revised: July 20, 2004

URL: https://webreference.com/dhtml/column67/