Setting Up the Calendar Page

Calendar page setup in Allwebco web templates

The small calendar:
The small calendar includes anchor links to each date. Open your "calendar.htm", click on any date on the calendar to move down on the "calendar.htm" page to that specific date.



Optionally, (see section below), when you archive old calendar pages or include future month pages this small calendar can be left on all template pages. It will link to the correct current month date on the "calendar.htm". If you rename the "calendar.htm" you should edit this link variable named "CalendarLink" near the top of the "calendar.js" in the "calendar" folder.

The calendar.js:
The calendar.js does not need to be edited unless you rename the "calendar.htm" page.

Adding or archiving calendar pages:
To add a future calendar page, or to archive an old calendar page: open your website folder, make a copy of the "calendar.htm" page. Rename it for example: "calendar-01-16.htm" for January 2016. Link to this archived page in the "calendar.htm". Sample links are included on this page that you can edit.

The small calendar anchor links:
Anchor links are links that navigate areas of a page rather then linking to other pages. The anchor links in the template calendar page link to the "calendar.htm" first, then to the anchor link for the date selected. If your anchor links are not working you may have deleted some of the code. Below is the code for an anchor link for the date 2 in your calendar.htm:

<a name="2" id="2"></a>

If the anchor links are not working also see section "The small calendar" above on this page.

Adding a second small calendar with a specific date:
To add a calendar with a specific month and year (2012 and newer templates):

1. Make a copy of the "calendar.htm". Rename it for example "calendar-01-2016.htm".
2. Make a copy of the "calendar.js" in the "calendar" folder. Rename it for example "calendar-01-2016.js".
3. In the newly named "calendar-01-2016.js" edit the variables like the following:
   
   
   • var showcalendar = "yes"
   • var curntmonth = "no"
   • var calyear = "2016"
   • var calmonth = "1"
     
     
4. Edit the "var CalendarLink" in the "calendar-01-2016.js" with the name of your HTML page you have added the second calendar to.
   
   = "calendar-01-2016.htm"    // LINK FOR CALENDAR NUMBERS
   
   
5. In the source code of your "calendar-01-2016.htm" page edit the following to display the new "calendar-01-2016.js" calendar:
   
   <script type="text/javascript" src="calendar/calendar-01-2016.js"></script>
   
   
6. Test your HTML page in any web browser.