calendarxp Site Admin
Joined: 30 Jan 2005 Posts: 409
|
Posted: Sun Mar 20, 2005 6:26 am Post subject: How to feed the calendar with XML agenda? |
|
|
With the help of XMLHttpRequest object, we can easily code a plugin to load agenda events from xml files. However, make sure you understand that XMLHttpRequest is not a fully cross-browser object - currently best supported by IE5+, FireFox, Opera 8+ and Safari 1.2+.
Please note that this object doesn't work if the container page is loaded directly from your local hard without going through a web server - which means the following codes have to be tested on a real web server.
Suppose we have the following agenda.xml file located in the web root:
Code: | <?xml version="1.0" encoding="ISO-8859-1" ?>
<agenda>
<event year="2005" month="4" date="1" bgcolor="#00ff00" fgcolor="black" bgimg="" border="gold">
<tooltip>this is a test</tooltip>
<action>alert(123)</action>
</event>
<event year="2005" month="1" date="1" bgcolor="green" border="null">
<tooltip>this is a new test</tooltip>
<action/>
<html><![CDATA[
<br>
<b>this is a new test</b>
]]></html>
</event>
</agenda> |
To load it, we just need to put the following code in plugins.js:
Code: | var _xmlReq;
function loadXMLDoc(url) {
if (window.XMLHttpRequest) {
_xmlReq = new XMLHttpRequest();
_xmlReq.onreadystatechange = processXML;
_xmlReq.open("GET", url, true);
_xmlReq.send(null);
} else if (window.ActiveXObject) {
_xmlReq = new ActiveXObject("Microsoft.XMLHTTP");
if (_xmlReq) {
_xmlReq.onreadystatechange = processXML;
_xmlReq.open("GET", url, true);
_xmlReq.send();
}
}
}
function processXML() {
if (_xmlReq.readyState == 4) {
if (_xmlReq.status == 200) {
var e=_xmlReq.responseXML.getElementsByTagName("event");
for (var i=0; i<e.length; i++) {
fAddEvent(parseAttrib(e[i],"year"), parseAttrib(e[i],"month"), parseAttrib(e[i],"date"),
parseText(e[i], "tooltip"), parseText(e[i], "action"), parseAttrib(e[i],"bgcolor"),
parseAttrib(e[i],"fgcolor"), parseAttrib(e[i],"bgimg"), parseAttrib(e[i],"border"),
parseText(e[i], "html"));
}
fRepaint();
} else {
alert("There was a problem retrieving the XML data:\n" +
_xmlReq.statusText);
}
}
}
function parseText(root, tag) {
var ns=root.getElementsByTagName(tag);
if (ns.length==0) return null;
ns=ns[0].childNodes;
if (ns.length==0) return null;
else if (ns.length==1) return ns[0].data;
else return ns[1].data;
}
function parseAttrib(root, attr) {
var n=root.getAttributeNode(attr);
return n?n.value:null;
} |
Finally, we can either use fOnload plugin to load the xml: (check __isAS to prevent redundant loading if you have multiple calendars sharing the same agenda)
Code: | ////////////////// Calendar fOnload Handler ///////////////////////
// It's triggered when the calendar engine is fully loaded by the browser.
// NOTE: DO NOT define this handler unless you really need to use it.
////////////////////////////////////////////////////////////////////
function fOnload() {
if (!__isAS) loadXMLDoc("/agenda.xml");
} |
Or load it externally from the onload event in the body of the containing page: (suppose the calendar context name is gfFlat)
Code: | <body onload="gfFlat.loadXMLDoc('/agenda.xml')"> |
Note: you may still need the agenda.js file, but the only thing left inside is the fHoliday function. All fAddEvent calls can now be represented in XML.
Again, the above code will not work if you load it in your browser directly from local hard disk. Because XMLHttpRequest is only allowed to load a real web resource located in the same web domain of the page (due to security concerns).
Also note that if you are going to use asp, jsp or php to generate the agenda.xml in runtime, please remember to add content-type "text/xml" to the header of response (server-side code).
e.g. for php generated xml feed, i.e. agenda.php, you need to add the following code to the 1st line:
Code: | <?
header("Content-Type: text/xml");
?> |
Then, you may load the asp/jsp/php directly via:
Code: | function fOnload() {
loadXMLDoc("/agenda.asp");
} |
_________________ Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved. |
|