|
|
|
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. |
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:
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.
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:
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>
|
| 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>
|
| Finally, you need to create the "calendarframe.htm" file to act as a placeholder for your calendar: |
<HEAD><BASE target="main"></HEAD>
|
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>
|
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>
|
Put this code into the calendar's footer: |
</blockquote></td></tr></table></td></tr></table>
|
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] |
Home | Setup | Offline
Editing | File Upload | File
Download | Search | Privacy
Policy | Top of Page
All Content ©2003 Calendars.Net