HTML Templates - Overview
You can easily customize the look and feel of Calendar Central’s Classic View to match your
company’s or organization’s web site. This is because Calendar Central uses a set of HTML templates to generate
all the pages that make up the different parts of the calendar. The templates are easily modified with an HTML
editor.
The template pages are located in the cc/db/templates directory. The pages are:
HTML Page |
File |
Description |
|
Month Calendar
|
monthgraphic.html
|
Monthly view of events in calendar format.
|
|
Filter Selection
|
filter1.html, filter2.html, …
|
Hierarchical view for selecting categories.
|
|
Event Detail
|
event.html
|
Detail view of a specific event.
|
|
When someone requests a page in Calendar Central, the correct template is read and the page is dynamically generated.
There are variables embedded in each template which are replaced with the proper content. For example, if a template
contains the variable $QUERY{MONTH}; when the page is generated, the variable will be replaced with the
correct month’s name.
The templates were also designed so you can work easily with a WYSIWYG HTML editor (ex: FrontPage 98 or Adobe Page
Mill).
GRAPHICS:
The first thing you will probably want to do is change some of the graphics. Feel free!
NOTE:
One thing we do, to help you out, it that we translate all instances of "../../images" to "/cc/images".
That way, you can see the images while working with the template files. When the server loads the templates,
all graphics that start with "../../images" are translated to "/cc/images".
VARIABLES:
The best way to understand the templates is to look at the different template files and then look at the generated
pages. You'll see how each of the variables are replaced with the appropriate content.
Let’s run through an example of a simple template. In our example template we want to display the current month.
In the example below, we show the template as viewed by a text editor (HTML code), a web browser, and the final
generated page viewed in a web browser.
Template HTML Code
|
Template viewed
in Web Browser
|
Generated Page
|
<html>
<body>
$QUERY{MONTH}
</body>
</html> |
$QUERY{MONTH} |
September |
We want the modify the template by making the month italicized and adding "Month:" before the name of
the month.
Template HTML Code
|
Template viewed
in Web Browser
|
Generated Page
|
<html>
<body>
Month:
<i>$QUERY{MONTH}</i>
</body>
</html>
|
Month:$QUERY{MONTH} |
Month: September |
As you can see, Calendar Central simply replaces any variables with the proper content. Calendar
Central did not "see" the "<i>" that was added for italics. The only thing it cares about
is that there is a variable $QUERY{MONTH} and it needs to be replaced with the proper month's name.
You may change anything on the HTML page and move the variables anywhere on the page.
Calendar Central reads the template files at startup. In order to see
any changes you make in the templates, you must restart the server.
HTML Template Pages
Below are the different template pages that Calendar Central uses. For each page, there
is a set of variables Calendar Central will recognize.
Variables for Month Calendar Page - monthgraphic.html |
$QUERY{MONTH} |
This variable is replaced by the current month’s name. For example: July |
$QUERY{YEAR} |
This variable is replaced by the current year. For example: 1998 |
$NAV{YEARMONTH} |
This variable is replaced with the controls to navigate to different months and years. |
$QUERY{EVENTS} |
This variable should reside in a table cell. The cell will be copied to create the grid for the
month calendar. If the cell specifies a color or cell width, each cell created will have the same attributes. |
$HREF{MONTH:CALENDAR} |
This variable will be replaced with the link to the Month Calendar Page. This variable should
be an HTML HREF statement. For example:
<a href="$HREF{MONTH:CALENDAR}"> |
$HREF{FILTER:n} |
This variable will be replaced with the link to the Filter Selection Page. The ‘n’
is replaced with the appropriate filter index number. This variable should be an HTML HREF statement. For example:
<a href="$HREF{FILTER:1}"> |
$POWEREDBY{IR} |
This variable will be replaced with the Powered by iRenaissance logo. |
Variables for Event Details Pag - event.html |
$HREF{MONTH:CALENDAR} |
This variable will be replaced with the link to the Month Calendar Page. This variable
should be an HTML HREF statement. For example:
<a href="$HREF{MONTH:CALENDAR}">
|
$HREF{FILTER:n} |
This variable will be replaced with the link to the Filter Selection Page. The ‘n’
is replaced with the appropriate filter index number. This variable should be an HTML HREF statement. For example:
<a href="$HREF{FILTER:1}"> |
$EVENT{date} |
This variable will be replaced by the event’s date. |
$EVENT{contact}
$EVENT{contact:contact} |
This variable will be replaced with the contacts email address. If the :contact is added,
a mailto link will be created. |
$EVENT{url}
|
This variable will be replaced by the event’s URL. You can make this visible text or put it within
an HTML HREF. |
$POWEREDBY{IR} |
This variable will be replaced with the Powered by iRenaissance logo. |
Variables for Filter Selection Page - filter1.html, filter2.html, ...
Because the Filter Selection Page requires that users checkmark the
categories they are interested in, all variables must be within the CGI Form. |
$FORM{CGI} |
This variable is replaced with the name of the form’s CGI script. For example:
<form method="POST" action="$FORM{CGI}" > |
$HREF{MONTH:CALENDAR} |
This variable will be replaced with the link to the Month Calendar Page. This variable should
be the NAME of a FORM INPUT statement. For example:
<input type=IMAGE name="$HREF{MONTH:CALENDAR}" src="calendar.gif"> |
$HREF{FILTER:n} |
This variable will be replaced with the link to the Filter Selection Page. The ‘n’
is replaced with the appropriate filter index number. This variable should be the NAME of a FORM INPUT statement.
For example:
<input type=IMAGE name="$HREF{FILTER:1}" src="calendar.gif"> |
$QUERY{FILTERS} |
This variable will be replaced with the hierarchical tree with the current filter (event types or
locations). |
$FORM{HIDDEN} |
This field will be replaced with hidden form fields that are needed for Calendar Central. |
$POWEREDBY{IR} |
This variable will be replaced with the Powered by iRenaissance logo. It does not need to
be within the CGI FORM. |
|