blank.gif blank.gif blank.gif blank.gif blank.gif
  Calendars Net  
search site
 
Display and edit your own calendar of events. Let others post and view events . . . or not. Link your calendar to your web site. View and print out calendars by the day, week, month, or year.
blank.gif blank.gif blank.gif
 

Calendars also available with layout and menus in Danish, Dutch, German, Italian, Norwegian, Portuguese, Spanish, or Swedish

 
blank.gif blank.gif blank.gif
blank.gif blank.gif blank.gif
 

Read this page in other languages:
Chinese | Deutsch | Español | Française | Italiana | Japanese | Korean | Portuguêses

 
blank.gif blank.gif blank.gif
blank.gif blank.gif blank.gif
blank.gif

 


Putting a Title on Your Calendar

After you name your calendar, the Calendar Settings menu appears. Click on General Settings and give your calendar a title (replacing "iCal Default Calendar"). You can also enter a Title (which appears at the top of the calendar) and a Description of the calendar (which does not appear on it), but you can also add or edit these later, using the Administer menu.

We suggest that you use your email address for the Description. This will not appear on your calendar, but it is a field we can search on, should you ever lose the userIDs or passwords you create when setting up Security on your calendar. It also allows us, with confidence, to email back to you your lost userID or password, should you request it from the Calendars Net Security Post.

Just one request: Please send email to Calendars Net and tell us how you found this site. Which search engine did you use? What search terms did you use? Thanks.

Embedding Your Calendar into Your Web Site

It is amazingly easy to make your calendar on Calendars Net appear inside your own web page. Just put this code in the page where you want the calendar to appear:

This is the part of your page above the calendar.
<ILAYER SRC="http://my.calendars.net/test1"></ILAYER>
<IFRAME NAME="cal" SRC="http://my.calendars.net/test1" frameborder=0 height=780 width=100%></IFRAME>
This is the part of your page below the calendar.

To see how this page appears, click here: Sample Web Page with Embedded Calendar.

The ILAYER tag is used by Netscape 4.xx and is ignored by all other browsers. Nearly no one still uses Netscape 4 or below. The IFRAME tag is used by Internet Explorer, Firefox, Netscape 6.xx, Mozilla, and Opera.

You must, of course, insert the name of your calendar in place of "testcaltest" in the code. And you can remove the comments about the parts of your page.

If you set the IFRAME height attribute to 100%, not all of the calendar will show; so a vertical scroll bar will appear. If your calendar has a big title, header, or footer, of if it has many events, you should increase the height setting inside the IFRAME tag in order to avoid the appearance of a scrollbar.

Now it gets even better. You can put your calendar inside a cell in a table on your web page by using this code:

This is the part of your page above the table containing the calendar.
<TABLE BORDER="0" CELLPADDING="2"><TR>
<TD WIDTH="620" HEIGHT="400">
<ILAYER SRC="http://my.calendars.net/testcaltest" height=400 width=620></ILAYER>
<IFRAME NAME="cal" SRC="http://my.calendars.net/testcaltest" frameborder=0 height=400 width=620></IFRAME></TD>
<TD HEIGHT="400" BGCOLOR="#FFCCCC">This is the right cell of row 1 of the table</TD>
</TR><TR><TD WIDTH="620" BGCOLOR="#99CCFF">This is the left cell of row 2.</TD>
<TD BGCOLOR="#CCFFCC">This is the right cell of row 2.</TD></TR></TABLE>
This is the part of your page below the table containing the calendar.

To see how this page appears, click here: Sample Web Page with Embedded Calendar Inside Table.

Again, Netscape 4.xx uses only the ILAYER tag, while all other browsers use only the IFRAME tag.

You can determine the size of the "window" that looks at your calendar by changing the height and width settings. This allows you to flow text or other HTML elements around your calendar (to its left or right).

This code will display your calendar in its default mode, probably block/month. We set the default on the testcaltest calendar to block/week, because that fits well into a small area. But you can change that to any combination of views (block, list, condensed) and time periods (day, week, month, year) by going to Administer This Calendar, General Settings, and changing the default view.

Limitations of Embedding. Not all is a bed of roses:

  1. If you click on any link in the calendar in Netscape 4.xx, the calendar breaks out of its cell and occupies the whole web page. With any other browser, however, the calendar stays confined in its cell and is not released for good behavior.
  2. A user using Netscape 3.xx or 4.xx will not be able to see any popup text linked to your events. Too see such text, these users will need to go to the List or Condensed views of your calendar. No other browsers we know of have this problem, including IE, Firefox, Netscape 6.xx, Opera, or Mozilla. Nearly no one still uses Netscape 4 or below.

In order to make sure all of your users can see popup text you have established with your events, you can use the "framing" technique described below.

Printing or Viewing Several Calendar Months at the Same Time

You can embed as many IFRAMES OR ILAYERS on your web page as you want. This allows you to create a web page that will show (and therefore print) several full months of your calendar. Here is some sample code to do this:

<P>This is the part of your page above the calendar.</P>
<P><ILAYER SRC=http://plus.calendars.net/test1/d27/03/2006?display=M&style=B&positioning=A></ILAYER>
<IFRAME NAME="cal" SRC=http://plus.calendars.net/test1/d27/04/2006?display=M&style=B&positioning=Aframeborder=0 height=1080 width=100%></IFRAME></P>
<P><ILAYER SRC=http://plus.calendars.net/test1/d01/05/2006?display=M&style=B&positioning=A></ILAYER>
<IFRAME NAME="cal" SRC=http://plus.calendars.net/test1/d061/06/2006?display=M&style=B&positioning=A frameborder=0 height=1080 width=100%></IFRAME></P>
<P><ILAYER SRC=http://plus.calendars.net/test1/d01/07/2006?display=M&style=B&positioning=A></ILAYER>
<IFRAME NAME="cal" src=http://plus.calendars.net/test1/d01/08/2006?display=M&style=B&positioning=A frameborder=0 height=1080 width=100%></IFRAME></P>
<P>This is the part of your page below the calendar.

To see how this page appears, click here: Sample Web Page with 3 Embedded Calendar Pages.

Obviously, you will need to modify the code so that it refers to your calendar (instead of "test1") and so that it refers to the months that you want to show. The "dxx" in from of the month and year can be any two numbers appropriate for a date in that month. You can change the display= and positioning= parameters, if you want the calendars to display in some fashion other than by month (M means month) in absolute mode (A means absolute). If you want the calendars to show in your calendar's default mode, just delete all of each link starting with the question mark and ending with "repositioning=A".

Notes:

  1. The ILAYER tag is used by Netscape 4 and below and is ignored by all other browsers. The IFRAME tag is used by Internet Explorer, Netscape 6 and above, Mozilla, Firefox, and Opera. Just about zero internet users still use Netscape 4 or below. If you do not care about them, you can omit all of the ILAYER tags.
  2. You must manually set the height of the IFRAME so that all of your calendar month will show (and so there will be no vertical scrollbars on your web page). This is tricky, because some months have 5 rows of days, while other months have 6 rows of days. So you have to set the height of the IFRAME to accomodate a month with 6 rows.
  3. Whether your calendars will have vertical scrollbars also depends on the user's browser settings. For example, if the user has set her browser text size to large, then it is likely that scrollbars will appear, and the page will not show each month's entire calendar.

"Framing" a Calendar on Your Web Site

You can put a Calendars Net calendar inside a frame on your web site, using normal HTML coding. It may be too wide for your frame, however, and cause both horizontal and vertical scroll bars to appear. To correct this, you can use the Administer/General Settings menu to specify the overall width of your calendar in pixels, so you can fit it into your frame without horizontal scrolling. Or use that menu to set your calendar to automatically Fill Browser Window.

Here is the code to use to put your calendar in a frame on your site. You can create the necessary 3 files by copying the HTML code from the yellow boxes below. Then just put all 3 files on your website. To view this very simple example of a frameset with a calendar, check out MyCal Frameset Example.
First, you need a page that establishes the frameset, such as this (which you could name calframeset.htm or some other name):

</HEAD>
<FRAMESET COLS = "170,100% " BORDER="0" FRAMESPACING="0" FRAMEBORDER="NO">
<FRAME SRC="leftframe.htm" NAME="left" MARGINWIDTH="0" MARGINHEIGHT="0" RESIZE target="main">
<FRAME SRC="calendarframe.HTM" NAME="main" MARGINWIDTH="2" MARGINHEIGHT="2" RESIZE target="main">
</FRAMESET>
<NOFRAMES>
<BODY>
<P>Your browser does not support frames</P>
<P><A HREF="indexnof.htm">Go to Non-Frames Calendars Net:</A>
<H3>Calendars.Net</H3>
<H4>Free Interactive Personal or Group Online Web Calendar PIM Hosting Service. Events can span days or recur (1st
Wednesday, etc.). Calendars fully customizable, with no advertising. Nested calendars available.
</BODY>
</NOFRAMES>

Next, you need to create the "leftframe.htm" file, which can contain anything you want but should include a link to your calendar:
<HEAD><BASE target="main"></HEAD>
<A HREF="http://my.calendars.net/defthin" target="main">Thin Demo Calendar</A>
Finally, you need to create the "calendarframe.htm" file to act as a placeholder for your calendar:
<HEAD><BASE target="main"></HEAD>
Your calendar will appear here.

If for some reason you cannot use frames on your web site, you can still encase your calendar inside your own menus or boxes. Visit the Example of Vertical Menu Calendar. To make a vertical menu, use the HTML code below and modify it with your own text, links, etc.

Warning: While all other browsers (IE, Mozilla, Opera, Netscape 6.xx) display calendars with vertical menus quite rapidly, it can take Netscape 4.xx about an extra 10 seconds to render the page. You just have to wait for it.

Calendar with Vertical Menu

Put ths code into the calendar's header:

<HTML><HEAD><LINK REL=stylesheet TYPE=text/css HREF=cal.css></HEAD>
<BODY><TABLE cellpadding=4 bgcolor=FFFFFF WIDTH=100%>
<TR><TD VALIGN=TOP bgcolor=ffaaaa>
<P><A HREF="http://www.calendars.net/"><b>Home</b></A>
<P><A HREF="http://www.calendars.net/calsetup.htm"><b>Setup</b></A>
<P><A HREF="http://www.calendars.net/merging.htm"><b>Remove Ads</b></A>
<P><A HREF="http://www.calendars.net/offline.htm"><b>Offline<br>Editing</b></A>
</TD><td><table><tr><td><blockquote>

Put this code into the calendar's footer:

</blockquote></td></tr></table></td></tr></table></body></html>

Or visit the Example of Dual Vertical Menus Calendar, which can be created with the HTML code below.

Warning: While IE, Netscape 6.xx, Mozilla, Firefox, and Opera display calendars with dual vertical menus, Netscape 4.xx does not. So if any of your users rely on Netscape 4.xx, this is not a good idea.

Example of Calendar with Dual Vertical Menus

Put ths code into the calendar's header:

<HTML><HEAD><LINK REL=stylesheet TYPE=text/css HREF=cal.css></HEAD>
<BODY><TABLE cellpadding=4 bgcolor=FFFFFF WIDTH=100%>
<TR><TD VALIGN=TOP bgcolor=ffaaaa>
<img src=dancing-penguin.gif>
<P><A HREF="http://www.calendars.net/"><b>Home</b></A>
<P><A HREF="http://www.calendars.net/calsetup.htm"><b>Setup</b></A>
<P><A HREF="http://www.calendars.net/merging.htm"><b>Remove Ads</b></A>
<P><A HREF="http://www.calendars.net/offline.htm"><b>Offline<br>Editing</b></A>
</TD><td><table><tr><td><blockquote>

Put this code into the calendar's footer:

</blockquote></td></tr></table></td></tr></table>
<td bgcolor=eebbcc valign=top>Another Menu Can Go Here
</td></tr></table></body></html>

Please don't try to use these vertical menus unless you are very familiar with HTML. If you make an error in the code, you calendar may stop displaying. If so, you can still get to the header and footer menus by going to http://my.calendars.net/[name of your calendar]/admin/headfoot. From there you can delete the code in the header or footer that may be causing your calendar not to display.

 

[Last Page]

[Directory]

[Next Page]


Try the Tutorial
Join the Calendars Email List
blank.gif
 

 


Home
 | Setup | Offline Editing | File Upload | File Download | Search | Privacy Policy | Top of Page
All Content ©2003 Calendars.Net

 
blank.gif blank.gif blank.gif