For general instructions on how to turn a template into an HTML document, go to Instructions on PFF Article Template.
An individual calendar is required for each month for the next twelve months. On or very soon after the first of a month, swap the calendar for the just-past month for that same month in the coming year.
The filename must follow this protocol because it interacts with a script that makes the links in the twelve-month nav bar at the top of the page: calendarXxx.html, where Xxx is the first three letters of the month with the first only capitalized, for example May or Jun. You must save the document with this name.
This template includes a script that writes a bar across the top of the page with twelve months, starting with the current month. This changes automatically.
Following the twelve-month bar is a one-month calendar. This has to be changed each month. Prototypes for the seven basic month calendars are stored on the PFF server at http://www.peninsulaflyfishers.org/Calendar/theSevenCalendars.html. All of these month calendars are thirty-one days long; the length may need to be adjusted. PFF event days are marked by a special color; non-PFF event days are marked by a different special color. These colors are in comments on the template.
This template includes the four regularly scheduled monthly meetings: workshop, general, casting, board. From month to month, the dates and some details must be changed. Each calendar listing is a separate table. By being separate tables, listings can be added and removed modularly.
This template includes a proto-listing which can be adapted for any event listing. Try to keep the category name short enough that it stays on one line. Category names are lower case and end with a colon.
Input required of the web page author is indicated with this background color.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!-- SAVE THIS DOCUMENT FOLLOWING THE NAMING PROTOCOL -->
<meta name="filename" content="calendarXxx.html">
<meta name="author" content="Dennis Kellett">
<meta name="date" content="04 Apr 2003">
<title>Peninsula Fly Fishers – Calendar – Xxx 200X</title>
<style type="text/css">
@import url(http://www.peninsulaflyfishers.org/PFF.css);
a.monthList {text-decoration:none; background-color:#f6ffdf; margin-left:5px; padding-left:3px; margin-right:5px; padding-right:3px; color:#039;}
html, body {background-color:#fff9c6;}
table.entry {margin-left:30px; width:400px; margin-bottom:12px;}
h3.subtitle {padding:11px 0px 6px 0px; text-align:left;}
.w {font-size:11px; font-weight:bold; color:#054; padding-right:14px; vertical-align:top; text-align:right; width:85px;}
/* CALENDAR TABLE */
div.calendar {margin-left:129px;}
div.calendar table {background-color:#f6ffdf; padding:8px;}
div.calendar td {vertical-align:center; font-size:9px; font-family:monospace; padding:3px; background-color:#039; color:#f6ffdf; text-align:right;}
tr.letters td {background-color:#f6ffdf; color:#039; text-align:center;}
div.calendar .usual {background-color:#190;}
div.calendar .unique {background-color:#809;}
/* END CALENDAR TABLE */
</style>
<script type="text/javascript" src="http://www.peninsulaflyfishers.org/PFF.js"></script>
</head>
<body>
<!-- BREADCRUMB -->
<!-- BREADCRUMB -->
<script type="text/javascript" language="javascript">
breadcrumb();
</script>
<!-- TWELVE MONTH NAV BAR -->
<!-- TWELVE MONTH NAV BAR -->
<script type="text/javascript">
theMonthNames = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var today = new Date();
var currentMonthIndex = today.getMonth();
var currentMonth = theMonthNames[today.getMonth()];
var currentYear = today.getFullYear();
var nextYear = currentYear + 1;
document.write('<div style="margin-top:25px;"><p style="margin:0px; font-weight:bold;"><span style="padding:3px; background-color:#9a0;"><span style="color:#fff; margin-right:12px;">' + currentYear);
document.write('</span><!-- white lettering of year stops --><a class="monthList" href="http://www.peninsulaflyfishers.org/Calendar/calendar' + currentMonth + '.html">' + currentMonth + '</a>');
var n = currentMonthIndex +1;
while(n < 12){
document.write('<a class="monthList" href="http://www.peninsulaflyfishers.org/Calendar/calendar' + theMonthNames[n] + '.html">' + theMonthNames[n] + '</a>');
n++;
}
document.write('</span><!-- this span encloses the first year --><span style="padding:3px; background-color:#cc8;"><span style="color:#fff; margin-right:12px;">' + nextYear + '</span><!-- end white lettering of year -->');
var i = 0;
while(i < currentMonthIndex){
document.write(' <a class="monthList" href="http://www.peninsulaflyfishers.org/Calendar/calendar' + theMonthNames[i] + '.html">' + theMonthNames[i] + '</a> ');
i++;
}
document.write('</span></p></div>');
document.close();
</script>
<h1 class="article" style="margin-left:129px;text-align:left;">XXXXXXXX 2004</h1>
<!-- THIS MONTH CALENDAR -->
<!-- THIS MONTH CALENDAR -->
<!-- SELECT FROM ONE OF THE SEVEN PROTO-CALENDARS ON THE SERVER -->
<!-- COLORS THIS DAY TO INDICATE A REGULAR FEATURE -->
<!-- <td class="usual" title="workshop">X</td> -->
<!-- COLORS THIS DAY TO INDICATE A SPECIAL FEATURE -->
<!-- <td class="unique" title="SPECIAL EVENT NOTATION">X</td> -->
<!-- STARTS ON A MONDAY -->
<div class="calendar">
<table>
<tr class="letters">
<td>S</td>
<td>M</td>
<td>T</td>
<td>W</td>
<td>T</td>
<td>F</td>
<td>S</td>
</tr>
<tr>
<td> </td>
<td>1</td>
<td>2</td>
<td class="unique">3</td>
<td class="usual" title="workshop">4</td>
<td>5</td>
<td class="unique">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td class="unique">13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td class="usual" title="meeting">18</td>
<td>19</td>
<td class="usual" title="casting">20</td>
</tr>
<tr>
<td class="unique">21</td>
<td>22</td>
<td>23</td>
<td class="usual" title="board">24</td>
<td>25</td>
<td>26</td>
<td class="unique">27</td>
</tr>
<tr>
<td class="unique">28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div> <!-- end calendar -->
<!-- WORKSHOP MEETING -->
<!-- WORKSHOP MEETING -->
<table class="entry">
<tr><th> </th>
<th><h3 class="subtitle">Workshop</h3></th>
</tr>
<tr>
<td class="w">date:</td>
<td>Thursday, XX XXX 2004</td>
</tr>
<tr>
<td class="w">time:</td>
<td><span style="color:red;">Doors open at 7PM; activities from 7:30 to 9:30.</span></td>
</tr>
<tr>
<td class="w">information:</td>
<td><a href="../Meetings/fullDescripMeetings.html" target="meetings">meetings page</a>
<br>Fly Tying Chairman: <script type="text/javascript">writeEname(harold_patterson)</script>
<br>Rod Building Chairman: <script type="text/javascript">writeEname(doug_weber)</script></td>
</tr>
</table>
<!-- GENERAL MEETING -->
<!-- GENERAL MEETING -->
<table class="entry">
<tr><th> </th>
<th><h3 class="subtitle">General Meeting</h3></th>
</tr>
<tr>
<td class="w">date:</td>
<td>Thursday, 15 Jan 2004</td>
</tr>
<tr>
<td class="w">time:</td>
<td><span style="color:red;">Doors open at 7PM; activities from 7:30 to 9:30.</span></td>
</tr>
<tr> <td class="w">place:</td>
<td>Highlands Community Club<br>1665 Fernside<br>Redwood City
<br><a href="../Meetings/Maps.html#workshop" target="map">map</a></td>
</tr>
<tr>
<td class="w">dinner:</td>
<td>XXXX TIME, PLACE XXXX</td>
</tr>
<tr>
<td class="w">speaker:</td>
<td>XXXX SPEAKER NAME, "TITLE OF PRESENTATION". XXXX
<br>XXXX DESCRIPTION. XXXX
</td>
</tr>
<tr>
<td class="w">information:</td>
<td><a href="../Meetings/fullDescripMeetings.html" target="meetings">meetings page</a>
v<br>President and Program Chairman <script type="text/javascript">writeEname(mandy_anderson)</script></td>
</tr>
</table>
<!-- CASTING MEETING -->
<!-- CASTING MEETING -->
<table class="entry">
<tr><th> </th>
<th><h3 class="subtitle">Casting Clinic</h3></th>
</tr>
<tr>
<td class="w">date:</td>
<td>Saturday, XX XXX 200X</td>
</tr>
<tr>
<td class="w">time:</td>
<td>10–Noon</td>
</tr>
<tr> <td class="w">place:</td>
<td>Erckenbrack Park, Foster City
<br><a href="../Meetings/Maps.html#casting" target="map">map</a></td>
</tr>
<tr>
<td class="w">activity:</td>
<td>Casting practice.
<br>
Convivial lunch usually follows.
<br>
Call Wayne Taylor ahead of time if you want your cast videoed.</td>
</tr>
<tr>
<td class="w">safety:</td>
<td>no hooks, wear glasses and a hat</td>
</tr>
<tr>
<td class="w">information:</td>
<td><a href="../Meetings/fullDescripMeetings.html" target="meetings">meetings page</a>
<br>Casting Chairman <script type="text/javascript">writeEname(wayne_taylor)</script></td>
</tr>
</table>
<!-- BOARD MEETING -->
<!-- BOARD MEETING -->
<table class="entry">
<tr><th> </th>
<th><h3 class="subtitle">Board Meeting</h3></th>
</tr>
<tr>
<td class="w">date:</td>
<td>Wednesday, XX XXX 200X</td>
</tr>
<tr>
<td class="w">time:</td>
<td>7:30–9:30</td>
</tr>
<tr> <td class="w">place:</td>
<td>1250 San Carlos Avenue<br>4th Floor<br>San Carlos
<br><a href="../Meetings/Maps.html#board">map</a></td>
</tr>
<tr>
<td class="w">activity:</td>
<td>Policy is set, club activities are planned, operations are reviewed.
<br>
All members are invited to attend and participate.
<br>
The PFF board wants to hear your ideas.</td>
</tr>
<tr>
<td class="w">information:</td>
<td><a href="../Meetings/fullDescripMeetings.html" target="meetings">meetings page</a>
<br><a href="../Club_Leadership/Club_Leadership.html" target="lead">officers and directors</a> </td>
</tr>
</table>
<!-- PROTO EVENT -->
<!-- PROTO EVENT -->
<table class="entry">
<tr><th> </th>
<th><h3 class="subtitle">XXXX EVENT NAME XXXX</h3></th>
</tr>
<tr>
<td class="w">date:</td>
<!-- DATE PROTOCOL: Monday, 12 Sep 2004 -->
<td>Day, XX XXX 200X</td>
</tr>
<tr>
<!-- TIME PROTOCOL: USE AM, PM, AND Noon WHEN NECESSARY; – MAKES A SHORT DASH (THE APPROPRIATE PUNCTUATION FOR A RANGE OF TIME) -->
<td class="w">time:</td>
<td>X:XX–X:XX</td>
</tr>
<tr> <td class="w">place:</td>
<td>XXXX STREET ADDRESS<br>XXXX CITY (OPTIONAL) STATE
<br>(OPTIONAL LINK TO MAP OR DIRECTIONS)<a href="XXXX.html">XXXX MAP OR DIRECTIONS</a></td>
</tr>
<tr>
<td class="w">activity:</td>
<td>XXXX DESCRIPTION OF ACTIVITY XXXX</td>
</tr>
<tr>
<td class="w">information:</td>
<td><a href="XXXX.html" target="XXXX">XXXX APPROPRIATE TEXT XXXX</a>
</td>
</tr>
<tr>
<td class="w">XXXX other category (lower case, ending with colon) XXXX:</td>
<td>XXXX APPROPRIATE TEXT XXXX</td>
</tr>
</table>
<!-- BOTTOM NAVIGATION LINKS -->
<!-- BOTTOM NAVIGATION LINKS -->
<script type="text/javascript">
writeBottomNav()
</script>
</body>
</html>