Integrating the calendar into your template using an iframe

[jazbek]

As promised many months ago (sorry guys!), I'm posting the code here for how to embed the Easy PHP Calendar into a page template in an iframe. Using an iframe is the easiest way I found to ensure that the URLs for the calendar don't interfere with the URLs for Wordpress. In reading some other threads, it sounds like there could be some other methods that work, but I have not tried them; this one worked great for me so I stuck with it. Here's the code:

<iframe src="/calendar/TOC.php" width="100%" height="500" style="border: 0" id="calendar"></iframe>

<script type="text/javascript">

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["calendar"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="no"

var getFFVersion=navigator.userAgent.substring(navigat or.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 25 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++) {
if (document.getElementById)
resizeIframe(iframeids)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no") {
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid) {
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera) {
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextr aHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent) {
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>

A little explanation: all you really NEED is the first line that reads <iframe src="/calendar/TOC.php" width="100%" style="border: 0" id="calendar"></iframe>

However, the javascript will resize the iframe so that it's always as big as the content, which will prevent any scrollbars from appearing on the calendar content. Of course, if you'd like to display any other layout of the calendar, you can include that instead of TOC.php in the src attribute of the calendar, and you should adjust the width="100%" to match your needs. If you'd like to see a working example of this method, see here:

http://asianamericanmedia.org/events/

Post here if you have any questions!

Jessica :)