Calendar Templates
If your library has any sort of events, it's good to have these in a calendar format.
The example above is a demonstration of a free template, developed by KDLA's Web Coordinator, for use by Kentucky public libraries. What makes this calendar special is the ability to describe events listed in the calendar without the creation of additional webpages. You'll notice that, when the cursor is moved over a link, a description of the event is displayed. To accomplish this, a script called "Boxover" by Swazz.org (http://boxover.swazz.org) was customized for the calendar layout. There are many effects that can be applied; you can visit their site for more information. For now, though, we're going to keep this a basic tutorial on how to customize the look of the calendar and the pop-up tips.
Preparatory Work
The calendar is a basic 7-column/5-row table in an HTML document; the formatting is derived from an external Cascading Stylesheet (CSS). The pop-up boxes are created by an external Javascript (JS) file. In order to implement the calendar, you'll need to have these three files:
- the HTML file: example.htm
- the CSS file: example.css
- the JS file: example.js
To download these, right click on each file's link listed above, select "Save Target As..." Or, you can open each document (they will open in a separate window) and select "File," then "Save As..." You can rename these, if needed. If you do so, make sure to adjust the names listed in the example.htm document.
<link href="example.css"
type="text/css" rel="stylesheet" title="calendar"/>
<script src="example.js" type="text/javascript"></script>
Also, make sure to save all three of these files in the same folder, or else you'll need to change some of the link path coding (same coding shown above) to ensure that the calendar will function properly.
(Don't worry, the coding of the finished product can be cut and pasted into one of your existing webpages. The process for doing that will be explained later.)
To work with the files, you will need to open them in your HTML editor - preferrably all three at the same time, since we'll be moving from one file to another. Once open, you'll also need to have each one displayed in "code view."
Additional Templates Available
Customizing the Month Heading
Entering the Month Text (looking at example.htm)
The month heading is in caption format. A caption is a tag WITHIN the table's coding that specifies that the text is description of the table. Usage of the caption tag is the semantic approach to HTML markup: a screen reader would not readily associate a regular page heading or paragraph with the table. (For more information, visit: htmlhelp.com.)
So, the HTML code for the month is:
<caption>
Month 2006
</caption>
All you need to do is to type the correct month. It's preferrable that you do this in code view to prevent the accidental deletion of the caption tag. Without it, the text will not be styled, and could consequently negatively impact the layout of your calendar table.
Formatting the Month Text (looking at example.css)
To change how the caption looks, you'll need to switch to the example.css document. In the coding, you'll see:
caption {
caption-side: top;
text-align: center;
font-family: verdana, sans-serif;
font-size: 1.2em;
color: #000000;
}You'll want to leave "caption-side" as is; this is the coding that tells the browser to place the caption at the top of the calendar. The rest of the coding can be changed. "Font-family" indicates the type of fonts to use; "text-align" determines where the caption will appear (left, center, or right); "color" is short for font color, in this case "#000000" indicates black. (Visit the Online Color Wheel to access the coding for other colors.)
Day Headings
Entering Day Heading Text (looking at example.htm)
The day headings are table headers (<th>) in the first row (<tr>) of the table's coding:
<tr>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
Table headings, rather than regular table cells (<td>), are used for accessibility purposes.
Formatting Day Heading Text (looking at example.css)
To change the look of the headings, you'll need to switch to the CSS document and locate this coding:
table.schedule th {
font-size: .8em;
background-color: #000000;
color: #ffffff;
border: 1px solid #000000;
}
"Background-color" sets the cell's color; "color" indicates the font color. "Border" actually stands for three border attributes: the border's thickness, the border's style (a solid line), and the border's color. You can place these in any order that you like, as long as all three attributes are there. Else, the browser's default will be used.
Dates/Event Listings
Entering Dates/Events (looking at example.htm)
The dates can be changed easily for each month. You can do this in either code or design view. When adding or deleting dates, make sure to check your coding to ensure that the numbers are still encased in paragragh (<p>) tags. If the paragraph tags are accidentally deleted, the formatting associated with the CSS style for paragraphs will not be applied.
<td><p>1</p></td>
When adding events, also make sure that they are also encased in paragragh (<p>) tags.
<td>
<p>1</p>
<p>Story Time</p>
</td> Formatting Date/Event Text
table.schedule td a {
color: #000000;
}
table.schedule td a:hover {
text-decoration: none;
}
"Text-decoration" is a setting which controls underlining, overlining or strike-through. To produce the hover effect, the default link underlining is removed by placing "none" in the text-decoration setting. If you'd like to retain the underlining, you can delete the whole text-decoration line.
If you'd like to enhance the links further, such as having them turn a different color when the cursor is placed over them, the coding would look like this:
table.schedule td a {
color: #000000;
}
table.schedule td a:hover {
text-decoration: none;
color: #cc0000;
}
This coding produces an effect like this: Event Link
For more information about styling links, visit HTML Goodies.
Formatting the Date/Event Cells (looking at example.css)
The date/event cells' appearance is controlled by this:
table.schedule td {
width: 14%;
height: 90px;
overflow: visible;
margin: 0;
vertical-align: top;
font-size: .7em;
border: 1px solid #000000;
color: black;
background-color: #ffffff;
} To prevent the layout of the calendar from being altered, it's recommended that you only edit the last three settings: border, color, and background-color. The remainder of the settings for this particular element deal with positioning and size of the cells.
Pop-Up Boxes
The pop-up boxes are a bit tricky to work with. First, how to customize their appearance.
(looking at example.js)
The reason that the formatting for the pop-up boxes is contained in the javascript file, rather than the CSS stylesheet, is that the each pop-up box is created dynamically, i.e., the CSS document you've been working with only applies to coding of "real text" in the HTML document. Unlike the events you've entered into the calendar, the pop-up boxes do not exist until the "onmouseover" event occurs - when the patron places his cursor over one of the links. Then, with that trigger, the javascript begins working its magic, such as placing and styling the box.
Because of this, the styling is in a slightly different format. The area you'll want to edit in the JS file (example.js) will look like:
function defHdrStyle() {
dvHdr.innerHTML='<img style="vertical-align:middle" src="info.gif"> '+dvHdr.innerHTML;
/* THIS IS WHERE YOU CAN CUSTOMIZE THE LOOK OF THE POP-UP BOX'S HEADER */
dvHdr.style.fontWeight='bold';
dvHdr.style.width='150px';
dvHdr.style.fontFamily='verdana';
dvHdr.style.borderTop='1px solid #000000';
dvHdr.style.borderRight='1px solid #000000';
dvHdr.style.borderLeft='1px solid #000000';
dvHdr.style.padding='3px';
dvHdr.style.fontSize='.7em';
dvHdr.style.color='#ffffff';
dvHdr.style.background='#000000';
/* END OF CUSTOMIZATION AREA */
}
function defBdyStyle() {
/* THIS IS WHERE YOU CAN CUSTOMIZE THE LOOK OF THE POP-UP BOX'S CONTENT AREA */
dvBdy.style.borderTop='1px solid #000000';
dvBdy.style.borderBottom='1px solid #000000';
dvBdy.style.borderLeft='1px solid #000000';
dvBdy.style.borderRight='1px solid #000000';
dvBdy.style.width='150px';
dvBdy.style.fontFamily='verdana';
dvBdy.style.fontSize='.7em';
dvBdy.style.padding='3px';
dvBdy.style.color='#000000';
dvBdy.style.background='#FFFFFF';
/* END OF CUSTOMIZATION AREA */
}
The ALL CAPS text will help you locate this area of coding in the document. Most of the elements are self-explanatory, and can be changed using the methods described earlier in this tutorial.
"Creating" a Pop-up Box (looking at example.htm)
As mentioned, the pop-up box is created during the onmouseover event. The javascript file pulls information which you will place in the link's title to write the box's heading and content. The title method is ADA/508 compliant, due to the fact that the screen reader would normally read the title content to the patron. (This isn't the case using other javascript methods.)
Example: Computer Class
requires the following coding:
<a href="#" title="header=[Computer
Class] body=[The Library will be hosting a training course in MS Excel at
6:30 p.m. in the Reference Room.]">Computer Class</a>
The header for the pop-up box is placed in the link's title coding first, then the coding for the body (the description of the event). The description can be as long as needed, the pop-up box remains on the screen until the patron moves the cursor off the link.
The link's location (href) is left blank, since the pop-up contains the pertinent information. However, you can insert a link location into the tag if you want the patron to follow the link. Just be warned that it could prove confusing, having some pop-up box links that can be followed, and some not. (It's suggested that you leave the pop-up box coding out of links that need to be followed to other pages.)
A few tips...
- Make sure that you include both the open ([) and close brackets (]) for the header and body entries.
- If you want a pop-up to exclude a header, leave the space in the header brackets blank. The header only appears if there is text between the brackets.
- Avoid using quotes (") in the brackets.
- If you'd like to add special effects, visit the Boxover script's webpage at http://boxover.swazz.org for more instruction.
Pasting the Calendar into an Existing Webpage
If each page in your website has a consistent look, you may wish to cut and paste the calendar into a template containing your library's banner, menu, etc. There are a few steps (and precautions) you'll need to take.
- First, you need to open both your webpage template and the calendar (example.htm) in "code view." You're going to be extracting coding from the calendar, then placing it into your template. When selecting a webpage template, opt for one that lacks vertical navigation panes; you'll need as much horizontal space on the page as possible for the calendar. The smaller the space for the calendar, the more distorted your columns will be.
- Next, locate the link coding in the calendar's head
(<head>) section. It will look like this:
<link href="example.css" type="text/css" rel="stylesheet" title="calendar"/>
<script src="example.js" type="text/javascript"></script> - Highlight and copy this coding; then switch to your template and paste it above the head closing tag (</head>). You may want to edit the address of the links, in case your template is located in a folder other than where the calendar is located. The CSS file path is indicated by "href;" the JS file path is indicated by "src."
- Next, switch back to the calendar (example.htm), then highlight and copy the table coding. The table coding begins with the table tag (<table class="schedule" summary="calendar">) and ends with the closing tag (</table>).
- Locate the area in your template's coding where you'd like the calendar to appear, then paste. If you are pasting the calendar into a template dependent upon a table layout, you'll need to locate the table cell which would normally contain your page's main content. Again, make sure that the table you are pasting the calendar into lacks additional columns, so that the calendar has ample room to span the page.
And, that's it! You've just created a great calendar and way to promote your library services to your patrons with minimal fuss.
Good Luck!
[Problems working with this tutorial? Contact KDLA's Web Coordinator for help.]