What it is
DHTML Calendar is a collection of HTML, CSS, and JavaScript code that utilizes Mike Foster's CBE JavaScript library to add a dynamic calendar to any Web page.
DHTML Calendar is ideal for...
- Providing an accurate reference calendar for visitors, or
- Providing a point-and-click interface for entering date information into an HTML form.
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
What it looks like
DHTML Calendar's appearance can be easily customized by editing the external style sheet. Three style declarations control most of The Calendar's appearance:
- DHTMLC - The 'DHTMLC' delcaration controls the appearance of the outer box.
- dotw - The 'dotw' declaration controls the appearance of the navigation bar (across the top of The Calendar) and the column headings.
- days - The 'days' declaration controls the appearance of the individual days that make-up The Calendar
What you'll need
To add DHTML Calendar to your Web page, you'll need...
- The DHTML Calendar files:
- DHTML_Calendar.html,
- DHTML_Calendar.js, and
- DHTML_Calendar.css.
- The CBE cross-browser JavaScript library. Specifically, you'll need...
- cbe_core.js, and
- cbe_util.js.
How to use it
Adding DHTML Calendar is easy:
- Retrieve the current DHTML Calendar archive from the DHTML Calendar project page.
- Retrieve the CBE JavaScript library (from either www.cross-browser.com or from the DHTML Calendar project page.)
- Upload both of the archives to your Web site's document root.
- Expand both of the archives.
- Insert the HTML from the DHTML_Calendar.html file into any Web page where you'll want to add a calendar.
- Insert the following in the <HEAD>...</HEAD> section of the Web page:
<link rel='stylesheet' type='text/css' href='/DHTML_Calendar.css' />
<script type='text/javascript' src='DHTML_Calendar.js'> </script>
<script type='text/javascript' src='/cbe/cbe_core.js'> </script>
<script type='text/javascript' src='/cbe/cbe_util.js'> </script>
- Edit the style declarations (located in DHTML Calendar's external style sheet file: DHTML_Calendar.css) to modify The Calendar's appearance to better suit your application.
