What role are you playing?
Viewer ~ Publisher ~ Admin
Role: Admin
 

Getting Started
Install Calendar Central on a server

Running Calendar Central
Customizing the graphics and layout ...back
Filters, Calendars, and Members
Setup a new organization to publish events
Definitions

 

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.