Power Calendar

Code

CalendarPlugin / TimeTablePlugin Integration

If you want to install your own copy of the calendar
  1. Create two new pages
    • one for the calendar
    • one for the events
  2. Copy the code below and paste it into your calendar page
    Your "events" page should be empty to begin.
  3. Optional If you want to customize the "Add Event" form for your calendar
    see WikiTutCalendarAddEventTemplate for instructions.

1. Create Two Pages

Create two new pages:
  1. A calendar page, e.g. FooCalendar
    • use the (code) shown below in step #2
  2. An events page, e.g. FooCalendarEvents

The names don't matter except that the events page must have the same name as the calendar page, with the additional suffix Events.

Note that there is a link to the Events page at the end of the calendar code (below). After you create your calendar page, click this link to create the Events page quickly.

Set the Parent of the Events Page

Be sure to set the parent of the events page to the calendar page. (You won't need to do this if you created the Events page from the link at the bottom of the calendar page.)

IMPORTANT - If you add events to the Events page by hand, keep in mind that the Wiki uses 3-letter abbreviations for months. It understands Jan, Feb, Mar... It does not understand January, February, March...

2. Copy The Code Below into your Calendar page

Copy everything below this line. Do not edit this page or open it in "Raw View". Just select and copy the code below. Paste this into your Calendar page and save.

Note: Nothing is copied to the new Events page.



<!--
   * Set various TimeTable defaults
      * Set EVENTBGCOLOR = #99CCFF
      * Set WEEKENDBGCOLOR = LightGray
      * Set NOWBGCOLOR = Cyan
      * Set DAYSTOSHOW = 8
-->

<!--
%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="Post" id="Post" value="Post New Event" onclick="toggle(this.name)"  >
<input type="button" name="List" id="List" value="View Event List" onclick="toggle(this.name)" >
</form>
</div>

<!-- Month View -->
<div id="Month_section" style="display:%IFDEFINED{"%URLPARAM{"view" default="Month"}%" as="Month" then="block" else="none" glue="off"}%;" >
  <div style="float: left;">
    <div style="float: left; padding: 1em 1.5em;">
      [[%SCRIPTURLPATH{"view"}%/%WEB%/%INCLUDINGTOPIC%?time=%PREVYEAR%][%ICON{"go_fb"}% %PREVYEARNAME%]]
    </div>
    <div style="float: left; padding: 1em 1.5em;">
      [[%SCRIPTURLPATH{"view"}%/%WEB%/%INCLUDINGTOPIC%?time=%PREVMONTH%][%ICON{"go_back"}% %PREVMONTHNAME%]]
    </div>
  </div>
  <div style="float: right;">
    <div style="float: left; padding: 1em 1.5em;">
      [[%SCRIPTURLPATH{"view"}%/%WEB%/%INCLUDINGTOPIC%?time=%NEXTMONTH%][%NEXTMONTHNAME% %ICON{"go_forward"}%]]</span>
    </div>
    <div style="float: left; padding: 1em 1.5em;">
      [[%SCRIPTURLPATH{"view"}%/%WEB%/%INCLUDINGTOPIC%?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="%INCLUDINGTOPIC%Events" 
~~~      width="100%" 
~~~      cellheight="100" 
~~~      vcellalignment="top" 
~~~      cellalignment="left"
~~~      showweekdayheaders="1" 
~~~      weekstartsonmonday="1"
~~~      year="%CURYEAR%" 
~~~      month="%CURMONTH%"
~~~      gmtoffset="-08"
~~~   }%
  </div>
</div>   <!-- Month_section -->

<!-- Week View -->
<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%/%INCLUDINGTOPIC%?view=Week&time=%PREVWEEK%][%ICON{"go_fb"}% Previous Week]]
</div>
<div style="float: right; padding: 1em 1.5em;">
[[%SCRIPTURLPATH{"view"}%/%WEB%/%INCLUDINGTOPIC%?view=Week&time=%NEXTWEEK%][Following Week %ICON{"go_ff"}%]]
</div>
  <div style="text-align: center; padding: 1em 1.5em;">
    [[%SCRIPTURL{view}%/%WEB%/%INCLUDINGTOPIC%?view=Week][Today]]
</div>
<div style="clear: both; width: 100%;"></div>
%~~  TIMETABLE{
~~~       topic="%INCLUDINGTOPIC%Events" 
~~~       compatmode="1"
~~~       days="%DAYSTOSHOW%"
~~~       tablewidth="100%"
~~~       timeinterval="30"
~~~       timeformat="24"
~~~       tablecolumnwidth="100px"
~~~       nowbgcolor="%NOWBGCOLOR%" 
~~~       weekendbgcolor="%WEEKENDBGCOLOR%"
~~~       todaybgcolor="%TODAYBGCOLOR%"
~~~       eventbgcolor="%EVENTBGCOLOR%"
~~~       eventfgcolor="Black"
~~~       monthheaderformat="<font size=\"+2\">%B</font>"
~~~       monthheaderbgcolor="%WEBBGCOLOR%"
~~~       tableborder="1"
~~~       tablecellspacing="0"
~~~       wholetimerow="1"
~~~       wholetimerowtext=""
~~~       tablecaption=""
~~~       navnext=""
~~~       navprev=""
~~~       fontsize="10pt"
~~~       startdate="%CURWEEK%"
~~~       starttime="06:00"  
~~~       workingstarttime="07:00"  
~~~       endtime="23:30"  
~~~       workingendtime="19:00"
~~~       cmheaderformat="<font title=\"%A - %d %b %Y\" size=\"-1\"> %A <br/> %b <br/> %e </font>"
~~~       textwrapper="plugin"
~~~       descrlimit="15"
~~~       tooltipformat="%LONGDESCRIPTION%"
~~~       tooltipfixtop="-50"
~~~       clicktooltip="off"
~~~  }%
</div>  <!-- Week_section -->


<!-- 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%
-->

<!-- List Events -->
<div id="List_section" style="display:%IFDEFINED{"%URLPARAM{view}%" as="List" then="block" else="none" glue="off"}%;" >
---++ View Event List
%GRAY% 
*The list below is for viewing purposes only.* %BR%
*Edit or delete events at [[%TOPIC%Events]]* (using the Wiki editor)
%ENDCOLOR%

%INCLUDE{"%TOPIC%Events" warn="off"}%
-------------------
%GRAY% 
*The list above is for viewing purposes only.* %BR%
*Edit or delete events at [[%TOPIC%Events]]* (using the Wiki editor)
%ENDCOLOR%




</div>

<!-- Create Events -->
<!-- This section uses a COMMENT template. -->
<!-- Be sure to change the templatetopic value, below, if you copy the calendar for your own use -->

<div id="Post_section" style="display:%IFDEFINED{"%URLPARAM{view}%" as="Post" then="block" else="none" glue="off"}%;" >

%COMMENT{type="AddCalendarEvent" target="%TOPIC%Events"}%

<!--
If you want to modify the "Add Event" form for your calendar
  * Open %SCRIPTURL{"edit"}%/Help/WikiTutCalendarAddEventTemplate?raw=on
  * Copy the content to a page in your web, named CalendarAddEventTemplate
  * edit the COMMENT line above
  * insert the following text before target="...
        templatetopic="CalendarAddEventTemplate" 
the "Add Event" page will then use the handy form in your  CalendarAddEventTemplate page
which you can modify as you choose.
-->

</div>

</div>


-------------------------

Edit events at [[%TOPIC%Events]].

3. OPTIONAL: Customize the AddEvent form

If you want to customize the "Add Event" form for your calendar, see WikiTutCalendarAddEventTemplate for instructions.

Topic revision: r18 - 14 Oct 2010, vlb
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email