Put an RRCA calendar on your website

Put an RRCA calendar on your website
by Warren Finke, RRCA webmaster

Beginning May 2002 the RRCA calendar uses a relational database to store events and php scripting to provide highly interactive calendar functionality including easy posting and editing of events and sophisticated search capabilities. Also included in this package is the ability to export the RRCA calendars utilizing one line of Javascript in your web site code. You also have the ability through cascading style sheets to customize the look and feel of the calendar to your particular web site. Here is an example on the Team Oregon web site.

The first step

Create a directory for your calendar (eg yoursite.com/calendar).

Create a basic web page to contain the calendar. Name it index.html.

Put the following line of code into this web page where you want the calendar to appear:

<script src="http://www.rrca.org/calendars/jsshowlist.php?state=OR"></script>

This will create an Oregon calendar on the page. Note that parameters are added to a URL with a ?. To get a different state, put in the appropriate 2 letter abbreviation. If you want a calendar with several states, use a comma separated list (eg. state=OR,WA,ID). If you want all states use state=All.

Additional parameters

It is useful at this point to look at the search capability on the RRCA calendar. Besides passing the state parameter, you can pass an event type specifier, (eg Marathon), a special race series specifier, and a search string. These parameters are specified by a name and a value.

type= {Run, Walk, or Marathon etc.}
special= {Womens Distance Festival or RRCA National Champ etc.}
search=<string>

The best way to determine proper options is to look at those allowed by the RRCA Calendar page.

Each name=value pair is separated from the others by an appersand.

Examples:
.../jsshowlist.php?state=OR&type=Marathon will give you all the marathons in Oregon
.../jsshowlist.php?state=All&search=5k will give events for all states that have 5k in their name

Let's say your club's name is ORRC and it is in Oregon. To make a calendar that shows only your clubs events, place ORRC in the name of each event you post and use the scripting
.../jsshowlist.php?state=OR&search=ORRC

NOTE:
If you use an option that has spaces in it, you need to replace the spaces with a + mark. This is called URL encoding and allows "funny" characters to be passed along on the web as part of a URL without confusing servers and browsers.

Example:
.../jsshowlist.php?state=all&special=RRCA+National+Champ will get you all the RRCA National championships.

Style

To get the look and feel of your website, it will be necessary to incorporate a style sheet. You will want to place this style sheet into the directory with your calendar page and name it calendar.css.

Here is an example calendar.css page from the Team Oregon site. You can modify this one for your needs:

    /*
     * calendar.css
     * For TeamOregon.com/calendar
     */

    <style type="text/css">
    <!--
      BODY {
        background: url(http://www.teamoregon.com/graphics/sunseth.gif);
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 9pt;
      }

      /* special style for inverse text on year bar
      */
      P.inverse {
	color: white;
	}

      TD {
        font-family: Arial-narrow, Helvetica, sans-serif;
        font-size: 9pt;
      }

      /* special style for color of year bar
      */
      TR.year {
        background: #A52A2A;
      }

      /* special style for color of month bar
      */
      TR.month {
        background: #FF9900;
      }

      /* special style for color of day bar
      */
      TR.day {
        background: #FFCC99;
      }

      H1 {
	font-size: 20pt;
	color: black;
      }

      H3 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24pt;
	font-style: italic;
	color: white;
      }

      H2 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: white;
        background: #FF9900;

      }

      A:link {
	font-size: 9pt;
	color: black;
	text-decoration: none;
      }

      A:visited {
	font-size: 9pt;
	color: black;
	text-decoration: none;
      }

      A:active {
	font-size: 9pt;
	color: black;
	text-decoration: none;
      }

      A:hover {
	font-size: 9pt;
	color: black;
	text-decoration: none;
        background: red;

      INPUT {
	font-size: 9pt;
	color: black;
        background-color: red;
      }
    -->
    </style>

You will need to include a reference to this external style sheet in your calendar html file. it should go between the <HEAD></HEAD> tags and loo like this:

Passing on the style

Finally, to make sure that the style is maintained on the subordinate calendar pages, and that you can get back to your own website after making any changes to the calendar, add a parameter for the path to your directory. This parameter will be named css.

Example:
.../jsshowlist.php?state=OR&type=Marathon&css=http://www.teamoregon.com/calendar/

This example will show the Marathons on Oregon with the proper style and return properly to your web site.