pluginssdk.htm

it is a flat calender

      // the return value is true, that date will be rendered using the giMarkSelected,<br>
      // gcFGSelected, gcBGSelected and guSelectedBGImg theme options.<br>
      // NOTE: If NOT defined here, the engine will create one that checks the gdSelect only.<br>
      ////////////////////////////////////////////////////////////////////<br>
      function fIsSelected(y,m,d) {<br>
       &nbsp;&nbsp;return gdSelect[2]==d&amp;&amp;gdSelect[1]==m&amp;&amp;gdSelect[0]==y;<br>
       }</code></div>
  </blockquote>
  <p>The 7th one is the <code>fOnDoWClick()</code> call-back, which is triggered when the week title (day of week) is clicked. It may be useful if you want to select dates by day-of-week (per column), e.g. the behavior in multi-picker demo. </p>
  <blockquote>
    <div class="dottedBox"><code>////////////////// Calendar fOnDoWClick Handler ///////////////////////<br>
      // It's triggered when the week head (day of week) is clicked.<br>
      // dow ranged from 0-6 while 0 denotes Sunday, 6 denotes Saturday.<br>
      // NOTE: DO NOT define this handler unless you really need to use it.<br>
      ////////////////////////////////////////////////////////////////////<br>
      function fOnDoWClick(year, month, dow) {<br>
      <code>&nbsp;&nbsp;.... put your code here ....</code>      <br>
    }</code></div>
  </blockquote>
  <p>The 8th one is the <code>fOnload()</code> call-back, which is triggered when the calendar engine (iframe) is fully loaded. It may be useful if you want to perform certain action only after the calendar is fully rendered. </p>
  <blockquote>
    <div class="dottedBox"><code>////////////////// 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>
      <code>&nbsp;&nbsp;.... put your code here ....</code> <br>
    }</code></div>
  </blockquote>
  <p></p>
  <p>These are very useful features. Please check out the demos for good examples. </p>
  <h4>Some predefined objects can be used in plugins/themes to aid your customization</h4>
  <ul>
    <li><strong>gContainer</strong> is a global reference to the parent window 
      that contains the calendar engine. <strong><em>It can be used to access 
      objects outside the engine context</em></strong>, e.g form fields or frames 
      in your web page.</li>
    <li><strong>gfSelf</strong> is a reference of the calendar engine frame itself.</li>
    <li><strong>gToday</strong> is a 3-element array containing the current date 
      of the operating system, in the format of [year, month, day].</li>
    <li><strong>gCurMonth</strong> is a 2-element array controls the month to 
      be shown in the calendar panel, in the format of [year, month].</li>
    <li><strong>gTheme</strong> is actually the whole parameter array parsed from 
      the name&amp;id of the calendar tag.</li>
    <li><strong>ua</strong> is the navigator.userAgent string in all lower-case.</li>
    <li><strong>gdSelect</strong> is an array that stores the current selected date in format [year, month, day]. NOTE that if you want to update it programatically, you should better do it via the <strong>fUpdSelect()</strong> function to avoiding potential inconsistency. </li>
    <li><strong>gbCacheAgenda</strong> is a boolean that is by default set to <code>true</code>, which means the calendar engine will employ certain approach to prevent the browser from caching the agenda file. </li>
    <li><strong>giShowInterval</strong> is a value that determines the speed of auto-traversing when you holding down the month navigation button. It's by default set to delay 250ms.</li>
  </ul>
  <h4>Some system functions may also be much helpful</h4>
  <ul>
    <li><strong>fGetXY(tag,offset)</strong> will return the position [x,y] of the tag with the offset adjustment.</li>
    <li><strong>fRepaint()</strong> is used to refresh the calendar panel so that 
    the latest update of agenda can be revealed.</li>
    <li><strong>fUpdSelect(y,m,d)</strong> marks the (y,m,d) as the selected date. </li>
    <li><strong>fAddEvent()</strong>, <strong>fGetEvent()</strong> and <strong>fRemoveEvent()</strong> 
    are used to set, get and delete disparate agenda events.</li>
    <li><strong>fGetAgenda(y,m,d,taint)</strong> will return the constrained agenda 
      &amp; holiday events if <strong>taint</strong> is true; or non-constrained 
      if <strong>taint</strong> is false. Constrained means that for all dates 
      outside the current panel view a null value or modified event will be returned 
      according to the <code>giShowOther</code> option. Non-constrained means 
      simply return the result from <code>fHoliday()</code> excluding the dates 
      out of theme range.</li>
    <li><strong>fSetCal(y,m,d,bTriggerOnChg,e)</strong> will set selected date 
      to the specific date. If <strong>d</strong> is 0, the calendar will be switched 
      to the specific month only. <strong>bTriggerOnChg</strong> determines whether 
      the<code> fOnchange()</code> plugin will be called or not. It's very userful to avoid looping calls when coordinating among multiple calendars. <strong>e</strong> 
      is optional but should be set to the reference of an event object if any 
      event property were to be used by specific plugins. It'll return false if 
      designated date is out of selectable range.</li>
    <li><strong>fSetDate(y,m,d,taint,e)</strong> is somewhat like <strong>fSetCal()</strong>, 
      but it will check against agenda (agenda range determined by taint flag) 
      to activate the associated actions if applicable. <strong>taint</strong> 
      and <strong>e</strong>vent are optional and usually omitted. It'll return 
      false if designated date is out-of-range or has a <code>null</code> agenda 
      action.</li>
    <li><strong>fPrevMonth(e)</strong> and <strong>fNextMonth(e)</strong> are 
      used to switch the calendar to previous or next month.<strong> e</strong> 
      is optional but should be set to the reference of event object if any event 
      property were to be accessed in the plugins.</li>
    <li><strong>showPrevMon()</strong>, <strong>showNextMon()</strong> and <strong>stopShowMon()</strong> are set to trigger/stop the auto-traverse feature. Generally speaking, set the first two in onmousedown event to start auto-traversing at the speed determined by <strong>giShowInterval</strong>, and set the last one in onmouseup and onmouseout to stop. NOTE that you also need to set the id of the tag, used in theme option gsNavPrev or gsNavNext, to be &quot;navPrev&quot; or &quot;navNext&quot; respectively. </li>
    <li><strong>fDate2W(y,m,d)</strong> converts the specific date to [year, weekOfYear, 
      Nth-dayOfWeek]. weekOfYear is ranged from 1 to 53; Nth-dayOfWeek is ranged 
    from 1 to 7. <strong>fW2Date(y,w,wd)</strong> is the reverse function.</li>
    <li><strong>fGetDateByDOW(y,m,q,dow) </strong>returns the date of the month (y,m), which is the q-th day-of-week of month (y,m). e.g. fGetDateByDOW(2004,1,1,0) means to get the first Sunday of January 2004. <strong>q</strong> ranges from 1 to 5, 5 meaning the last dow of the month. <strong>dow</strong> ranges from 0 to 6 and the return value ranges from 1 to 31. </li>
    <li><strong>fLoadScript(url)</strong> loads a javascript file from the designated URL dynamically and execute it within the calendar context. Note currently it's only supported by IE5+(except Mac), NS6+, Mozilla and Opera7+.</li>
  </ul>
  <h4>Override theme options in plugins.js</h4>
  <p>Because theme options are loaded before the plugins, you may re-define any 
    option of <code>theme-name.js</code> from within <code>plugins.js</code>. 
    The benefit is that you can add additional features or make small changes 
    without touching the standard theme. The bundled demos are using this approach 
    to share themes.</p>
  <p>&nbsp;</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>
  <p>&nbsp;</p>
</div>
</body>
</html>