---+ TWiki.CalendarPlugin / TWiki.TimeTablePlugin Integration Demo
<!--
%CALC{"$SET(curtime, $IF($LENGTH(%URLPARAM{"time"}%) == 0, $TIME(), %URLPARAM{"time"}%)))"}% 
%CALC{"$SET(curyear, $VALUE($FORMATTIME($GET(curtime), $year)))"}% 
%CALC{"$SET(prevyear, $TIMEADD($GET(curtime), -1, year ))"}%
%CALC{"$SET(nextyear, $TIMEADD($GET(curtime), 1, year ))"}%
%CALC{"$SET(curday, $IF($VALUE($FORMATTIME($GET(curtime), $day)) > 28, 28, $VALUE($FORMATTIME($GET(curtime), $day))))"}%
%CALC{"$SET(curmonth, $VALUE($FORMATTIME($GET(curtime), $month)))"}% 
%CALC{"$SET(midmonth, $TIME(15-$FORMATTIME($GET(curtime), $mon)-$GET(curyear)))"}% 
%CALC{"$SET(prevmonth, $TIMEADD($GET(midmonth), -1, month )))"}% 
%CALC{"$SET(nextmonth, $TIMEADD($GET(midmonth), +1, month )))"}%
%CALC{"$SET(curweek, $FORMATTIME($GET(curtime), $day $mon $year))"}% 
%CALC{"$SET(prevweek, $TIMEADD($GET(curtime), -1, week ))"}%
%CALC{"$SET(nextweek, $TIMEADD($GET(curtime), 1, week ))"}%

   * Set CURTIME = %CALC{"$GET(curtime)"}%
   * Set CURDAY = %CALC{"$GET(curday)"}%
   * Set CURYEAR = %CALC{"$GET(curyear)"}%
   * Set PREVYEAR = %CALC{"$GET(prevyear)"}%
   * Set PREVYEARNAME = %CALC{"$FORMATTIME($GET(prevyear), $year)"}%
   * Set NEXTYEAR = %CALC{"$GET(nextyear)"}%
   * Set NEXTYEARNAME = %CALC{"$FORMATTIME($GET(nextyear), $year)"}%
   * Set CURMONTH = %CALC{"$GET(curmonth)"}%
   * Set PREVMONTH = %CALC{"$GET(prevmonth)"}%
   * Set PREVMONTHNAME = %CALC{"$FORMATTIME($GET(prevmonth), $mon)"}%
   * Set NEXTMONTH = %CALC{"$GET(nextmonth)"}%
   * Set NEXTMONTHNAME = %CALC{"$FORMATTIME($GET(nextmonth), $mon)"}%
   * Set CURWEEK = %CALC{"$GET(curweek)"}%
   * Set PREVWEEK = %CALC{"$GET(prevweek)"}%
   * Set NEXTWEEK = %CALC{"$GET(nextweek)"}%
-->

<script type="text/javascript">
function toggle(theView) {
   var views = "Month,Week,List,Post";
   var viewArray = views.split(",");
   for (var i = 0; i < viewArray.length; i++) {
      var mySection = viewArray[i] + "_section";
      if (theView == viewArray[i]) {
        document.getElementById(mySection).style.display = "block";
        document.getElementById(viewArray[i]).disabled = true;
       } else {
         document.getElementById(mySection).style.display = "none";
         document.getElementById(viewArray[i]).disabled = false;
       }
   }
}
</script>
<div style="width: 90%">
<div style="font-size:1.5em;text-align:center;">
<form name="switchView" >
<input type="button" name="Month" id="Month" value="Month View" onclick="toggle(this.name)" %IFDEFINED{"%URLPARAM{"view" default="Month"}%" as="Month" then="disabled" glue="off"}% > 
<input type="button" name="Week" id="Week" value="Week View" onclick="toggle(this.name)" %IFDEFINED{"%URLPARAM{"view" default="Month"}%" as="Week" then="disabled" glue="off"}% > 
<input type="button" name="List" id="List" value="Event List" onclick="toggle(this.name)" >
<input type="button" name="Post" id="Post" value="Post New Event" onclick="toggle(this.name)"  >
</form>
</div>
<div id="Month_section" style="display:%IFDEFINED{"%URLPARAM{view}%" as="Week" then="none" else="block" glue="off"}%;" >
  <div style="float: left;">
    <div style="float: left; padding: 1em 1.5em;">
      [[%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?time=%PREVYEAR%][%ICON{"go_fb"}% %PREVYEARNAME%]]
    </div>
    <div style="float: left; padding: 1em 1.5em;">
      [[%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?time=%PREVMONTH%][%ICON{"go_back"}% %PREVMONTHNAME%]]
    </div>
  </div>
  <div style="float: right;">
    <div style="float: left; padding: 1em 1.5em;">
      [[%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?time=%NEXTMONTH%][%NEXTMONTHNAME% %ICON{"go_forward"}%]]</span>
    </div>
    <div style="float: left; padding: 1em 1.5em;">
      [[%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?time=%NEXTYEAR%][%NEXTYEARNAME% %ICON{"go_ff"}%]]</span>
    </div>
  </div>
  <div style="text-align: center; padding: 1em 1.5em;">
    [[%TOPIC%][Today]]
  </div>
  <div style="clear: both; width: 100%;">
%~~  CALENDAR{topic="%TOPIC%" 
~~~      width="100%" 
~~~      cellheight="100" 
~~~      vcellalignment="top" 
~~~      showweekdayheaders="1" 
~~~      weekstartsonmonday="1"
~~~       year="%CURYEAR%" 
~~~       month="%CURMONTH%"
~~~   }%
  </div>
</div>
<div id="Week_section" style="display:%IFDEFINED{"%URLPARAM{view}%" as="Week" then="block" else="none" glue="off"}%;" >
<div style="float: left; padding: 1em 1.5em;">
[[%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?view=Week&time=%PREVWEEK%][%ICON{"go_fb"}% Previous Week]]
</div>
<div style="float: right; padding: 1em 1.5em;">
[[%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?view=Week&time=%NEXTWEEK%][Following Week %ICON{"go_ff"}%]]
</div>
  <div style="text-align: center; padding: 1em 1.5em;">
    [[%SCRIPTURL{view}%/%WEB%/%TOPIC%?view=Week][Today]]
</div>
<div style="clear: both; width: 100%;"></div>
%~~  TIMETABLE{
~~~       compatmode="1"
~~~       days="7"
~~~       tablewidth="100%"
~~~       timeinterval="60"
~~~       tablecolumnwidth="100px"
~~~       weekendbgcolor="#D3D3D3"
~~~       todaybgcolor="%WEBBGCOLOR%"
~~~       monthheaderformat="<font size=\"+2\">%B</font>"
~~~       monthheaderbgcolor="%WEBBGCOLOR%"
~~~       tableborder="1"
~~~       tablecellspacing="0"
~~~       clicktooltip="on"
~~~       wholetimerow="1"
~~~       wholetimerowtext=""
~~~       tooltipformat="%DESCRIPTION%"
~~~       tablecaption=""
~~~       navnext=""
~~~       navprev=""
~~~       fontsize="12pt"
~~~       startdate="%CURWEEK%"
~~~  }%
</div>
</div>

<!-- For debugging
   * Current time = %CURTIME%
   * Curent year = %CURYEAR%
   * Previous year = %PREVYEARNAME%
   * Next Year = %NEXTYEARNAME%
   * Current month = %CURMONTH%
   * Previous month name = %PREVMONTHNAME%
   * Next month name = %NEXTMONTHNAME%
   * Current week = %CURWEEK%
   * Current day = %CURDAY%
-->

<div id="List_section" style="display:%IFDEFINED{"%URLPARAM{view}%" as="List" then="block" else="none" glue="off"}%;" >
---++ Calendar Event List

#EventsList
</div>

<div id="Post_section" style="display:%IFDEFINED{"%URLPARAM{view}%" as="Post" then="block" else="none" glue="off"}%;" >
%COMMENT{type="AddCalendarEvent" target="%BASETOPIC%#EventsList"}%
</div>