Updating the ONB Event Calendar

David Fellows

Introduction

This document is addressed to the meet offical charged with advertising a meet. It describes the ONB Calendar system and how to use it.

The ONB web site includes a calendar system which maintains a database of event information and displays it as a monthly calendar with events marked on it. This calendar is acccessed from the ONB home page. A list of events (the earliest 10) ocurring in the next 30 days is also shown on the home page. It is also possible for viewers to subscribe to an RSS feed to be informed of changes.

As meet official you should use the system to create a notice for the event as soon as the basic information is known. This should be done at least a month prior to the meet. As more details are worked out they can be added to the event notice.

All ONB level 1 officials are provided with a login id which provides them with the ability to add new events to the database and edit event information that they have previously entered. If you are a Level 1 official and have not received your login id, or if you have lost it, please contact the ONB webmaster.

In addition, level 1 officials are provided with a onb email address for use with the system. For your own protection against spam, please use only this email address when preparing meet information. If spam becomes a problem contact the webmaster and he will create a new address for you and delete the old one.

The onb email address is of the form yourinitials at orienteering.nb.ca. The ONB mailserver will automatically forward emails addressed this way to your regular email address. They will turn up in your inbox in the usual way. Please note that when you reply to them your ordinary email address will be used as the return address, not the ONB one.

What it is

The event calendar is implemented with the WebCalendar software package which runs on ONB web server. WebCalendar is a general calendaring system for coordinating work, meetings, etc among cooperating people. It has been customised and specialised for ONB's use.

Each user with a logon id has their own personal calendar to which they can add entries. These entries automatically become part of the public calendar. Thus while you have a personal calendar, you do not have a private calendar. In addition to creating entries in your personal calendar you can edit them and delete them.

How is it used

The public Event Calendar

This is found from the Complete Event Calendar link on th ONB home page. It shows the current month with events marked on the appropriate days. There is a menu bar across the top. At the right end of the menu bar the My Calendar link gives access to buttons to select other calendar views - day, week, year. Choosing Exit from the list takes you back to the ONB home page. Next to it is a Search button which provides access to the search function. The help button does not bring up much useful help to the public. Next to it is a print button which brings up the page in a format suited for printing. There are three drop-down menus for navigating to a particular date. The login link is on the right end of the menu bar.

Hovering the mouse over any entry on the calendar will pop up a very abbreviated bit of information about the event. Clicking on an event will fetch a new web page containing all the details about the event. If you are keen, you can download the event details in a format suitable for importing into other calendar programs or PDA's.

Your Personal Calendar

After you login you are presented with your personal calendar instead of the public one. This is identified with your name in the center under the month name. You will also note that there are several more links on the menu bar. As well, each of the "day boxes" has a circle with a plus sign in its upper right corner.

The Menu Bar

My Calendar
Behaves the same as when not logged in except that it is referring to your personal calendar.

Events
Add New Event
Brings up a page with a new entry form to fill in. Discussed in detail below.
Unapproved Entries
Not relevant
Export
beyond the scope of this document.
Import
beyond the scope of this document.

Views
Another User's Calendar
Not relevant, has no visible effect
Manage views
Not relevant

Settings
Assistants
There are none - not relevant
Layers
Not relevant - everybody sees everything anyway
My Profile
Brings up a form with which you can change your password or your name.
Preferences
With one very important exception the preferences settings only affect how you see your personal calendar. It is very important that you have "America/Halifax" as your timezone selection. If it is not the selection shown, please select it and click Save Preferences immediately. If your time zone is wrong then times for events will be stored incorrectly. Daylight savings time is looked after automatically.

A word about language. The default for the package is to negotiate with the browser about what language to use. The package has been set to prefer English-US. Most users will have their browser preferred language also set to English-US. Therefore that is what will be used. However, if you have set your browser preferred language to, say, French, then that is what all the menus, etc will be displayed in.

If you select a specific language on the settings page. That is what will be used for menus while you are logged on. After you log off the language will revert to your browser preference until you log on again.

Most of the preference settings are self-explanatory. Note that tasks are not enabled so there is no point in trying to display them. Similarly, Categories are disabled. You want to display unapproved entries since there is no approval mechanism operating.

The settings under the tabs When I am the boss and Subscribe/Publish are appropriate as set. Please don't change them.

Adding a New Event

A new event is added to the database by clicking on the Events -> Add New Event link or by clicking on the plus sign on the date of the event. In either case an Add New Event page will appear. This page contains three tabs: Details, Repeat, and Reminders. The reminders functionality is not applicable for our purposes and has been disabled. It wil not be discussed further. The Repeat tab provides a way to set up entries for events that repeat on a periodic basis. Since ONB orienteering meets do not repeat themselves, at least not exactly, we will not discuss this feature either.

That leaves the Details tab. This tab is an HTML form with spaces to supply various items of information. The information is stored in a database and displayed on the calendar and event pages as requested. For this discussion I will use the term Item name to refer to the words on the left side of the page and the term Item value to refer to the information you provide.

There are two general rules to remember: 1) The initial item values for all items is set to "empty", and 2) item names for items with empty item values are not shown when displaying an event. Basically, if you do not wish to use a particular item to describe your event, it will not exist as far as site visitors are concerned.

Items are presented to the visitor in the same order as they appear on the Details tab. The first five items are generic, provided as part of the WebCalendar software. The remaining twenty-one are what are known as site_extras. They are specific to ONB. They are item names that have appeared in past ONB meet flyers. They are intended to guide meet organizers about what information they should provide in advertising their meet. Not all items will be applicable to every meet.

Most of the item values are just plain text. If the input box is more than one line high, then you can supply as much text as you need to. Lines are wrapped when you reach the edge of the box. New lines that you enter are preserved. You should indicate new paragraphs with two new lines in a row. The item values that are not plain text will be discussed as they appear in the lists below.

Generic Items

Brief Description
Required. Is used to indicate the event on the calendar view(s). Pick a title like "Falcon Cup", or perhaps the location "Rockwood Park".
Full Description
As much as you need to describe the event. More suited for events such as the Annual General Meeting, or out-of-province meets. ONB Orienteering meets are better described using the site_extra Items.
Location
Briefly describe the location. For example Odell Park.
URL
This would be a link to a web page with more details about the event. Most likely needed only for out-of-province events.

Note that you must include the http:// as part of the URL. For example:

http://www.example.com/index.html
Date
Required. The date is pre-populated either with today's date or your chosen date. Most orienteering meets will be "Timed events". Select that from the drop-down list, then pick a start time and end time (or duration). The on-site registration opening time would be a good choice for event start time. Course closing time would be a good end time choice.

ONB-specific Items

Meet Type
Score meet, B meet, Rogaine, etc. Specify here if it is an ONB ranking meet.
Courses and Classes
List the courses and/or classes that you are planning. Use a table if necessary. See the section on HTML.
Map:
Any comments about the map
Terrain
Description of the characteristics of the terrain
Prizes
List the fabulous prizes that will be awarded.
Registration Deadline
For giving a deadline for preregistration.
Online Registration
A URL pointing to an online registration/payment page. Provided for possible future use if ONB sets one up. Don't forget to include the http:// as the first part of the URL.
On-site registration
Time, location details for on-site registration.
Start Times
List your mass start time or first start time here.
Course Closure Time
The time you want all competitiors back before.
Required Equipment
This is a selection box. You can select multiple items by pressing the <Ctrl> key while pressing the left mouse button on the items you want.
Driving Directions
Supply any information you want. If you want to refer to Google maps, say, you can include the HTML for a link to it. If you do include a link be sure to test that it works.
Meet Officials
List the folks putting on the meet.
Course Setter's Notes
Anything the course setter wants to say.
Entry Form
A URL pointing to a (printable) registration form. Provided in case ONB decides to produce a generic meet entry form.
Notes
Anything that does not fit elsewhere.
Accommodation
Information about accommodation. Links to hotel web sites can be included using HTML.
Meals
Information about meals
Other Activities
If other activities are planned in conjunction with the meet, this is the place to list them.
Contact
Name and telephone number of a person to contact for more information. Consider this a mandatory item to be provided.
Contact Email
An email address. When displayed to the viewer it is "clickable" to automatically start the composition of an email. It is strongly suggested to use an ONB address here. For example, I might use dmf@orienteering.nb.ca.

When you have filled in all the information you plan to give click on the Save button at the very bottom of the form. The data you have provided will be saved in the database and you will be returned to the calendar view.

The first thing you should do is verify that the event is displayed as you intended. If necessary, navigate to the correct month. The event should be shown in its correct day box. Click on the event to see a page with the details. The top part of this page shows the details as they will be seen by everybody. Note that there is a line identifying you as the creator and another one that shows the time the entry was last updated.

Because you own this entry you are presented with a list of actions you can perform on it. They are:

Add Attachement
Currently this only works for the administrative user. It is intended to allow uploading documents to the database that users can download. For example, a meeting agenda or a report that is to discussed at a meeting.
Edit Entry
Clicking on this gets you a web page that is the same as the Add Entry page with all the details from the database filled in. You can edit any information or provide new information. Clicking on Save will cause the database to be updated.
Delete Entry
Does the obvious. This is probably not the best thing to do except for newly created entries. If a meet is not going to occur, it is better to edit the entry to add "Cancelled" to the full description. Perhaps in big red letters. See below. Please noet that it is not possible to put HTML into the Brief Description item value.
Copy Entry
Presents a new Add Entry page pre-populated with the data from the source entry. You should at least edit the Short Descriiption before you save it. Useful if you need to create a new event that is nearly the same as an existing one. You can only copy within your own calendar.

HTML

HTML is an acronym for HyperText Markup Language. A complete discussion is way beyond the scope of this document. Most event notices can prepared without using any HTML, but occasionally it can be useful so a few recipes will be given. I hope that they are in a form such that they can be cut-and-pasted into your event notice input form. The recipes will relate to:

If you want more on-line information about HTML, Dave Raggett's tutorial is as good as any. Please remember that most tutorials are trying to show you how to make a complete web page. In our application we are just creating snippets of HTML that will be automatically be incorporated into a complete page. Thus you do not have to worry about things like <head>, <title>, <body>, etc., they are all looked after.

There are two other components of web pages: style sheets (CSS), and javascript. These are powerful tools and indeed are used to construct WebCalendar pages, but you should NOT try to include them in any HTML snippets you write for event entries. You will probably break things if you do.

HTML is created by "marking up" text with special tags that tell the browser directly or indirectly how to render the text. HTML tags are of the form <tagname></tagname>. The first is the opening tag, the second is the closing tag. Opening tags may also include options after the tagname. For example, if you want some text to be emphasized:

Doing thisProduces this
Text <em>emphasized</em> or not Text emphasized or not

The <strong> tag is more emphatic still:

Doing thisProduces this
Text <strong>strongly emphasized</strong> or not Text strongly emphasized or not

The following might be good for a cancellation notice:

Doing thisProduces this
<big><font color=red>CANCELLED</font></big> CANCELLED

The <big> tag causes the browser to use a font one size bigger than the surrounding font and the color option (Note the American spelling.) in the <font> tag says to use red "ink". Note also that the inner tag/endtag pair is completely enclosed in the outer pair.

The <a> or anchor tag is used to create clickable hyperlinks to other web pages. The anchor tag always has at least the destination URL as an option. The following will produce output such that when you click on the link text enctlosed between the <a> and </a> tags the browser will create a new window and display the target web page in it.

Doing thisProduces this
<a href="http://www.orienteering.nb.ca/index.html" target=_blank>the clickable text</a> the clickable text

The href option value specifies the target of the hyperlink. It is safest to enclose the value within double quotation marks. Please note that the "http://" at the beginning of the URL is required.

The target option "_blank" tells the browser to open a new window (or tab depending on the user's preference setting) to display the new page in. If the target option is omitted the browser replaces the current page with the new one in the current window.

Lists are made with <li> list item tags arround the list elements. The whole list is inclosed in either <ol> or <ul> tags depending whether you want a numbered list or a bulletted list. Thus:

Doing thisProduces this
<ul><li>First item</li> <li>Second item, etc</li> </ul>
  • First item
  • Second item, etc

Tables can be made with HTML, but they are extremely tedious and error-prone to do by hand. Conceptually a table is one or more rows each of which contains the same number of cells. There are three tags:

The following table of one row of three columns could be used to create a side-by-side bilingual document. The middle cell is there just to provide some spacing between the other cells. You can put has much text as you want in the two outer cells.

Doing thisProduces this
<table border=0 >
<tr valign=top><td>English text</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td>texte fran&ccedil;ais</td>
</tr>
</table>
English text    texte français

The border= 0 option on the <table> tag says do not put a border around this table or the cells within it. The default is border=2, measured in pixels. All the examples above are rendered in tables with the default border.

This example also illustrate how to generate special characters. HTML provides what are called named entities for this purpose. The form of a named entity is &name;. In the example &nbsp; refers to the non-breaking space character. This character is used between words you do not want broken over a new line, or to provide extra spacing between words. (The rule browsers use is to replace multiple ordinary space characters with a single space.)

The other named entity illustrated is &ccedil; This is the french c cedilla character. All the accented french letters are available. The names are formed from the letter plus acute grave circ cedil. A complete list of all the named entities can be found in Raggett's tutorial part 2.

The final tag I wish to mention is <br>. This tag does not have a closing tag. It is used by itself. It tells the browser to start a new line immediately. In this respect it should be noted that the software that processes the text you enter in the text boxes on the Add New Entry page automatically changes the new lines that you create with the Enter key into <br> tags before storing your text in the database.

Finally, if you are ever curious about how a web page is constructed, you can ask your browser to show you the html for it. With Firefox you can select View->Page Source, or press the Ctrl-U key. Internet Explorer is similar.

[ ONB Home ]  [ Up


$Revision: 1.4 $  $Date: 2010/03/10 15:33:37 $
Maintained by David Fellows