setupagendas.htm

it is a flat calender

<br>
Finally, upload the agenda.php to your web server (suppose it's placed at /php-cgi/agenda.php) and replace the agenda.js in the name and id of the &lt;iframe&gt; calendar tag with the full path to agenda.php: <br>
<table cellspacing="1" cellpadding="3">
  <tr>
    <td><strong>Code: </strong></td>
  </tr>
  <tr>
    <td><div class="dottedBox">&lt;iframe name="gToday:normal:/php-cgi/agenda.php" name="gToday:normal:/php-cgi/agenda.php" ...&gt;</div></td>
  </tr>
</table>
<br>
Now put in some records in the db table and load up your page - you should see the agenda events showing up nicely in the calendar. <br>
<br>
Note that you can still append the fHoliday() function, as in agenda.js, to the end of the agenda.php so as to retain the holidays. And in the agenda tutorial you may also find an example written in JSP code. <br>
<br>
Last but not least, please be careful if you would like to use double-quote char (") in the strings - you should escape them wisely so as not to mess up the string boundary of javascript. If you were encountering any error, please point your browser directly to the URL of agenda.php, then either "view page source" or view the downloaded file - it should reveal the generated content. Make sure the content is pure valid javascript (no &lt;script&gt; tags allowed), as if it were in an agenda.js file.
<br>
<h4>How to pass parameters to the script that generates the agenda file?</h4>
  <p>If you want to create a calendar that belongs to a user, you may need to pass the user id to the script that generates the agenda file so that the calendar only shows up the events related to that specific user.</p>
  <p>CalendarXP has already taken it into account and all you need is set the url in the name &amp; id of the calendar tag, as following: </p>
  <blockquote>
    <div class="dottedBox" style="width:95%">
      <p><code>&lt;iframe name=&quot;gToday:normal:agenda.jsp?userId=&lt;%=obj.getUserID()%&gt;&quot; id=&quot;gToday:normal:agenda.jsp?userId=&lt;%=obj.getUserID()%&gt;&quot;<br>
      ...&gt;&lt;/iframe&gt;<br>
      </code></p>
    </div>
  </blockquote>
  <p>The above example is using JSP to generate the agenda file, of course you may use Perl, ASP, PHP or whatever else instead.</p>
  <p><span class="style1"><strong>Note</strong>:</span> you must escape any non-alphabetical chars in the URL, especially the colon char. Running the parameter string through an URL encoding filter and using the transformed string in the name &amp; id of the calendar tag is always a safe way to go. </p>
  <h4>Share agendas among multiple calendars</h4>
  <p>Sometimes when you have more than 1 calendar on the same web page, especially when
     PopCalendar and FlatCalendar are working together, you may
    need to share the agenda events among them. Since version 7.0 this can be
    done by setting the agenda parameter of other-than-the-first calendar to &quot;<code>share[&lt;context-name&gt;]</code>&quot;
    instead of &quot;<code>agenda.js</code>&quot;. <b>In addition, the <code>gbShareAgenda</code>
    theme option of all shared calendars must be set to <code>true</code>.</b> The following
    is a good example of agenda sharing between PopCalendarXP and FlatCalendarXP.</p>
  <blockquote>
    <div class="dottedBox">
      <p><code>...</code></p>
      <p><code>&lt;iframe name=&quot;gToday:normal:share[gfPop]:gfFlat&quot; id=&quot;gToday:normal:share[gfPop]:gfFlat&quot;<br>
        src=&quot;iflateng.htm&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot;&gt;<br>
        &lt;a name=&quot;gfFlat_spacer&quot;&gt;&lt;img width=172 height=180&gt;&lt;/a&gt;&lt;/iframe&gt;</code></p>
      <p><code>...</code></p>
      <p><code><br>
        &lt;iframe name=&quot;gToday:supermini:agenda.js:gfPop&quot; id=&quot;gToday:supermini:agenda.js:gfPop&quot;
        src=&quot;ipopeng.htm&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot;
        style=&quot;visibility:visible; z-index:999; position:absolute; top:-500px; left:-500px; &quot;&gt;<br>
        &lt;LAYER name=&quot;gToday:supermini:agenda.js:gfPop&quot; src=&quot;npopeng.htm&quot; background=&quot;npopeng.htm&quot;&gt;
        &lt;/LAYER&gt;<br>
        &lt;/iframe&gt;<br>
        &lt;LAYER name=&quot;gToday:normal:share[gfPop]:gfFlat&quot; src=&quot;nflateng.htm&quot; background=&quot;nflateng.htm&quot;&gt; 
        &lt;/LAYER&gt; <br>
        &lt;/BODY&gt;<br>
        &lt;/HTML&gt;</code></p>
    </div>
  </blockquote>

    <p></p>

  <p>Note that the 3rd parameter of the second calendar tag is <code>share[gfPop]</code>,
    which means to share the agenda loaded by <code>gfPop</code>. Should the agenda
    get changed by any run-time scripts both calendars would always get the same
    update automatically, and all you need to do is to call the <code>fRepaint()</code>
    afterwards to reveal the change in the calendar panel.</p>
  <p>Another advantage of sharing is that the agenda.js will be loaded only once,
    no matter how many calendar tags are embedded on the same page. It could save
    a lot if you had a huge agenda database.</p>
  <p class="style1"><strong>Note:</strong> When sharing the agenda.js file, it's important to know that any function definition, except fHoliday(), will not be shared, which means you should NOT declare any other functions in the agenda.js. If you really need an utility function, define it in the plugins.js instead. </p>
  <h4>Load agenda events per month instead of altogether </h4>
  <p>In certain situation, you may have intensive events in a calendar which may results in a huge agenda.js file. e.g. You have a table in DB that stores everyday events for each user for years, and you only want the calendar to load the events in current month so as not to generate too much network load. How to do it then?</p>
  <p>Since version 9.0.188, FlatCalendarXP has introduced an easy solution for it, as following:</p>
  <ol>
    <li>Create a JSP/ASP/PHP page,  here we assume using JSP solution to create one as <code>/jsp/agenda.jsp</code>, that generates the javascript source of the <code>agenda.js</code> by retrieving the events detail from the backend DB. Please refer to the above DB related section for how-to.</li>
    <li>Move the fHoliday() function from the <code>agenda.jsp</code> to the <code>plugins.js</code> , and append the following code:
      <div class="dottedBox" style="width:95%">
        <pre><code>function fOnChange(y,m,d,e) {
  if (gCurMonth[1]!=m||gCurMonth[0]!=y) fLoadEvents(y,m);          // MUST be the first line of fOnChange
  ...  
}
           
function fLoadEvents(y,m) {
  if (fGetEvent(y,m,0)==null) {
    fAddEvent(y,m,0,&quot;Loaded&quot;); // mark the month as loaded 
    fLoadScript(&quot;/jsp/agenda.jsp?year=&quot;+y+&quot;&amp;month=&quot;+m);
  }
}

fHoliday(y,m,d) {...you need to keep everything inside as is...} </code></pre>
        <pre><code>... 
// The 2 lines below MUST sit at page bottom and be the last 2 lines of the plugins.js !!!
if (gbShareAgenda&amp;&amp;!eval(gsAgShared)) eval(gsAgShared+&quot;=[]&quot;);
fLoadEvents(gCurMonth[0],gCurMonth[1]); // load data for the initial month </code></pre></div>
    </li>
    <li>In the <code>/jsp/agenda.jsp</code> you may have your own code to read the <code>year</code> and <code>month</code> parameters from the http request, and use them to constraint the result set loaded from the backend DB so that only events of the specific month will get generated.</li>
    <li>Append &quot;<code>if(fRepaint)fRepaint();</code>&quot; to <code>/jsp/agenda.jsp</code> file and make sure it gets generated as the last line of the javascript source. i.e. the generated source (you may test by pointing your browser directly to <code>/jsp/agenda.jsp</code> and select &quot;view page source&quot; ) should look like the following: </li>
    <div class="dottedBox">
      <p><code>fAddEvent(...);<br>
        fAddEvent(...);<br>
        ... <br>
      <br>
      if (fRepaint) fRepaint(); // must be the last line of the generated agenda source </code></p>
    </div>
    <li>Modify the calendar tag to remove the &quot;agenda.js&quot; from the name &amp; id, because after the above steps the agenda is loaded per request and we don't need it any more.</li>
	<div class="dottedBox">
      <p><code>&lt;iframe name=&quot;gToday:normal::gfFlat&quot; id=&quot;gToday:normal::gfFlat&quot; ... &gt;&lt;/iframe&gt;</code></p>
    </div>
  </ol>
  <p></p>
  <p>That's it! Now every time you try to switch a month, the Server Page <code>/jsp/agenda.jsp</code> will be visited with 2 http parameters - <code>year</code> and <code>month</code>. And the value of the <code>year</code> and <code>month</code> represent the month that the calendar will be switching to. All you need is to parse the month value and then load corresponding events from DB table and generate corresponding <code>fAddEvent()</code> calls.</p>
  <p>This should be easy, isn't it? However, the <code>fLoadScript()</code> call  approach currently is only supported by IE5+(except Mac),  NS6+, Mozilla and Opera7+. For those unsupported browsers  you may consider using server-side browser detection to set the  agenda param  in the name &amp; id (hint: <code>name='gToday:normal:&lt;%=isIE4||isNN4?&quot;agendaFull.jsp&quot;:&quot;&quot;%&gt;:gfFlat'</code> ) so as to load everything at one time. </p>
  <h4>Another way to load agenda events per month </h4>
  <p>As <code>XMLHttpRequest</code> object becomes more and more popular, a new option emerges to load scripts into the calendar engine and it can be used to complement the <code>fLoadScript()</code> to load events on demand. </p>
  <p>All you need is to replace the fLoadEvent() function above with the following code:</p>
  <ol><div class="dottedBox">
    <pre><code>var xmlReq = null;
function fLoadEvents(y,m) {<br>  if (fGetEvent(y,m,0)==null)
    fAddEvent(y,m,0,&quot;Loaded&quot;); // mark the month as loaded <br>  else<br>    return;
  var url  = &quot;/jsp/agenda.jsp?year=&quot;+y+&quot;&amp;month=&quot;+m;
  try {
    xmlReq = self.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
    xmlReq.onreadystatechange=function() {
      if (xmlReq.readyState == 4 &amp;&amp; xmlReq.status == 200) {
        eval(xmlReq.responseText);
      }
    }
    xmlReq.open("GET", url, true);
    if (self.XMLHttpRequest)
      xmlReq.send(null);
    else
      xmlReq.send();
  } catch (e) {
    alert(&quot;XMLHttpRequest is not supported.&quot;);
  }
}</code></pre>
  </div>
  </ol>
  <p></p>
  <p class="style1"><strong>XMLHttpRequest is supported by IE5+, Mozilla and Safari 1.2+, and is not accessible when the page is on local file system - which means you have to put it into a web server to test.
  </strong></p>
  <h4>Load agenda from external XML file </h4>
  <p> In additional to load script file,  we can also code a plugin to load agenda events from xml file.<br>
<br>
Suppose we have the following agenda.xml file located in the web root: <br>
  </p>
  <ol>
    <div class="dottedBox">
      <pre>&lt;?xml version="1.0" encoding="ISO-8859-1" ?&gt; <br>&lt;agenda&gt; <br>&lt;event year="2005" month="4" date="1" bgcolor="#00ff00" fgcolor="black" bgimg="" border="gold"&gt; <br>	&lt;tooltip&gt;this is a test&lt;/tooltip&gt; <br>	&lt;action&gt;alert(123)&lt;/action&gt; <br>&lt;/event&gt; <br>&lt;event year="2005" month="1" date="1" bgcolor="green" border="null"&gt; <br>	&lt;tooltip&gt;this is a new test&lt;/tooltip&gt; <br>	&lt;action/&gt; <br>	&lt;html&gt;&lt;![CDATA[ <br>&lt;br&gt; <br>&lt;b&gt;this is a new test&lt;/b&gt; <br>	]]&gt;&lt;/html&gt; <br>&lt;/event&gt; <br>&lt;/agenda&gt;</pre>
    </div>
  </ol>
  <p> To load it, we just need to append the following code in plugins.js : <br>
  </p>
  <ol>
    <div class="dottedBox">
      <pre>var _xmlReq; <br>function loadXMLDoc(url) { <br>    if (window.XMLHttpRequest) { <br>        _xmlReq = new XMLHttpRequest(); <br>        _xmlReq.onreadystatechange = processXML; <br>        _xmlReq.open("GET", url, true); <br>        _xmlReq.send(null); <br>    } else if (window.ActiveXObject) { <br>        _xmlReq = new ActiveXObject("Microsoft.XMLHTTP"); <br>        if (_xmlReq) { <br>            _xmlReq.onreadystatechange = processXML; <br>            _xmlReq.open("GET", url, true); <br>            _xmlReq.send(); <br>        } <br>    } <br>} <br>
function processXML() { <br>      if (_xmlReq.readyState == 4) { <br>        if (_xmlReq.status == 200) { <br>            var e=_xmlReq.responseXML.getElementsByTagName("event"); <br>          for (var i=0; i&lt;e.length; i++) { <br>             fAddEvent(parseAttrib(e[i],"year"), parseAttrib(e[i],"month"), parseAttrib(e[i],"date"), <br>             parseText(e[i], "tooltip"), parseText(e[i], "action"), parseAttrib(e[i],"bgcolor"), <br>             parseAttrib(e[i],"fgcolor"), parseAttrib(e[i],"bgimg"), parseAttrib(e[i],"border"), <br>             parseText(e[i], "html")); <br>          } <br>          fRepaint(); <br>        } else { <br>            alert("Please make sure loading agenda.xml from the same web domain, or it won't work due to browser security concern.\n" + <br>                _xmlReq.statusText); <br>        } <br>    } <br>} <br> 
function parseText(root, tag) { <br>    var ns=root.getElementsByTagName(tag); <br>    if (ns.length==0) return null; <br>    ns=ns[0].childNodes; <br>    if (ns.length==0) return null; <br>    else if (ns.length==1) return ns[0].data; <br>    else return ns[1].data; <br>} <br> 
function parseAttrib(root, attr) { <br>    var n=root.getAttributeNode(attr); <br>    return n?n.value:null; <br>}</pre>
    </div>
  </ol>
  <p> Then, 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)<br>
  </p>
  <ol>
    <div class="dottedBox">
      <pre>////////////////// Calendar fOnload Handler /////////////////////// <br>// It's triggered when the calendar engine is fully loaded by the browser. <br>// NOTE: DO NOT define this handler unless you really need to use it. <br>//////////////////////////////////////////////////////////////////// <br>function fOnload() { <br>    if (!__isAS) loadXMLDoc("/agenda.xml"); <br>}
</pre>
    </div>
  </ol>
  <p> Or load it externally from the onload event in the body of the containing page: (suppose the calendar context name is gfFlat) <br>
  </p>
  <ol>
    <div class="dottedBox"><code>
&lt;body onload="gfFlat.loadXMLDoc('/agenda.xml')"&gt;</code></div>
  </ol>
  <p> Note: you may still need the agenda.js file, as the only thing left inside is the fHoliday function. All fAddEvent calls can now be represented in XML. <br>
    <span class="style1"><strong>NOTE: If you would like to test the XML loading, please do it on a real web server and place the xml in the same web domain. Trying to load agenda from local file system or another domain will fail because nowadays modern browsers do not allow loading resources from outside the current web domain.</strong></span><br>
 </p>
  <hr size="1">
  <div align="right"><font size=-2><em>Copyright&copy; 2003-2007 Idemfactor Solutions,
    Inc. All rights reserved.</em></font></div>
  <p>&nbsp;</p>
</div>

</body>
</html>