CalendarApplication Usage

To Add the calendar application to any topic, you can use the following TML:

  • %INCLUDE{"System.CalendarApplication"}%

items can be filtered using the QuerySearch syntax, change the INCLUDE to

  • %INCLUDE{ "System.CalendarApplication" FILTER="fields[name='Date'].value = ''" DATEFIELD="Date" SUMMARYFIELD="Summary" WEB="FoswikiApplicationData" TOPICS="TodoApplication*" CALENDAROPTIONS="" }%
    • (Show anything containing a Date Form Field)

Calendar Themes:

default - coloured - iCal - small

show month as list

urlparams

Dependancies:

this Application uses the CalendarPlugin.

TODOs

  1. make a small, medium and large widget
    • small uses summary as a tooltip
    • large == 100% width?

Application defaults

PAGER FROM NewsApplication
March 2010
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
 
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
      

Date Time Period Message
10 Mar 2009 12:00am once test uweb-bo
19 Mar 2009 12:00am once test uweb-bo
*


*

Application definition 

%STARTSECTION{calendar}%
<div class="calendarPager foswikiRight">
PAGER FROM NewsApplication
</div>
<style>
.testcalendar {border-collapse:collapse;width:700px;}
.testcalendar td { background-color: transparent } 
.testcalendar td th, 
.testcalendar td td { background-color: transparent; float: left; padding:2px; margin: 0; width: 13%; overflow: hidden; font-weight: normal; }  
.testcalendar .weekend, .testcalendar .weekday {padding-right: 3px; text-align: center; }
.testcalendar .day {border:1px solid darkgray; border-collapse:collapse;} 
.testcalendar .calendarHeader { width: auto; align:center; } 
.testcalendar .day { background:transparent; text-align: left; vertical-align:top; height: 7em; overflow: hidden; } 
.testcalendar .Sat, .testcalendar .Sun { background:transparent; } 
.testcalendar .today { background:#F0F0F0; color:#07A6DA; font-weight:normal; } 
.testcalendar .today .calendarDay:before { NOcontent: 'today  ';}
.testcalendar .calendarDate {padding-bottom: 2px;}
.testcalendar .calendarDay {color:darkgray; font-size:1em; padding:0; text-align:right;}
.testcalendar .today .calendarDay {color: black;}
.testcalendar .calenderDescription {font-size: x-small;padding-left: 3px;color: saddleBrown;}
.smallcalendar {border-collapse:collapse;width:auto;}
.smallcalendar td { background-color: transparent } 
.smallcalendar td th, 
.smallcalendar td td { background-color: transparent; float: left; padding:2px; margin: 0; width: 20px; overflow: hidden; font-weight: normal; }  
.smallcalendar .weekend, .smallcalendar .weekday {padding-right: 4px; text-align: center; }
.smallcalendar .day {border:1px solid darkgray; border-collapse:collapse;} 
.smallcalendar .calendarHeader { width: auto; align:center; } 
.smallcalendar .day { background:transparent; text-align: left; vertical-align:top; height: 20px; overflow: hidden; } 
.smallcalendar .Sat, .testcalendar .Sun { background:transparent; } 
.smallcalendar .today { background:#F0F0F0; color:#07A6DA; font-weight:normal; } 
.smallcalendar .today .calendarDay:before { NOcontent: 'today  ';}
.smallcalendar .calendarDate {padding-bottom: 2px;}
.smallcalendar .calendarDay {color:darkgray; font-size:1em; padding:0; text-align:right;}
.smallcalendar .today .calendarDay {color: black;}
.smallcalendar .calenderDescription {display:none;font-size: x-small;padding-left: 3px;color: saddleBrown;}
.simpleCalendarCss {
width: 64em;
}
.simpleCalendarCss td {
background-color: transparent
}
.simpleCalendarCss td td,
.simpleCalendarCss td th {
background-color: transparent;
float: left;
padding:2px;
margin: 2px;
width: 6em;
}
.simpleCalendarCss .calendarHeader {
width: auto;
}
.simpleCalendarCss .day {
background:transparent url(%ATTACHURL%/day-bg.png) no-repeat scroll bottom right;
text-align: left;
vertical-align:top;
height: 6em;
overflow: hidden;
}
.simpleCalendarCss .calenderDescription {
font-size: x-small;
}
.simpleCalendarCss .today {
background:transparent url(%ATTACHURL%/day-bg.png) no-repeat scroll top center;
}
.bottomCalendar {
width: 650px;
clear: both;
}
.bottomCalendar td {
background-color: transparent
}
.bottomCalendar td td,
.bottomCalendar td th {
background-color: transparent;
float: left;
padding:0;
margin: 0;
width: 100px;
}
.bottomCalendar .weekday,
.bottomCalendar .weekend {
margin-right: -13px;
margin-left: 5px;
margin-bottom: 3px;
}
.bottomCalendar .calendarHeader {
width: auto;
float:right;
}
.bottomCalendar .day {
background:transparent url(%ATTACHURL%/calandericons.png) no-repeat scroll top left;
text-align: left;
vertical-align:top;
height: 100px;
overflow: hidden;
margin: -4px;
}
.bottomCalendar .Sat,
.bottomCalendar .Sun {
background:transparent url(%ATTACHURL%/calandericons.png) no-repeat scroll 0 -100px;
}
.bottomCalendar .today {
background:transparent url(%ATTACHURL%/calandericons.png) no-repeat scroll -100px -100px;
color:darkred;
font-weight:bold;
}
.bottomCalendar .today .calenderDescription:after {
content: 'today';
}
.bottomCalendar .Sat .today,
.bottomCalendar .Sun .today {
background:transparent url(%ATTACHURL%/calandericons.png) no-repeat scroll -100px 0;
}
.bottomCalendar .calendarDate {
padding: 10px;
}
.bottomCalendar .calendarDay {
color:darkred;
font-size:large;
padding:12px;
}
.bottomCalendar .today .calendarDay {
color: black;
}
.bottomCalendar .calenderDescription {
font-size: x-small;
padding: 0 12px;
color: saddleBrown;
line-height: 1em;
}
</style>
%CALENDAR{%CALENDAROPTIONS%}%

<!--
%SEARCH{
    web="%DATEWEB%"
    topic="%TOPICS%"
    "%FILTER%"
    type="query"
    Nnonoise="on"
    order="formfield(%DATEFIELD%)"
    format="   * $formfield(%DATEFIELD%) - $formfield(%SUMMARYFIELD%)"
}%
-->

<style>
    .formPluginTitle { width:200px; }
    .NOTformValue { position:absolute;left:220px; }
    #patternTopBar, #patternClearHeaderCenter, #patternClearHeaderLeft, #patternClearHeaderRight, #patternTopBarContentsOuter, #patternTopBarContents {
        height:130px;
        overflow:hidden;
    }
</style>

%TABLE{tablewidth="99%"  }%
| *Date* | *Time* | *Period* | *Message*  | ** |
%SEARCH{
    web="%DATEWEB%"
    topic="%TOPIC%*"
    "form.name~'%WEB%.%TOPIC%' AND 
    fields[name='Category'].value ~ '%URLPARAM{"category" default="%CATEGORY%"}%' AND
    fields[name='State'].value ~ '%URLPARAM{"state" default="*"}%'
    "
    type="query"
    nonoise="on"
    order="formfield(Date)"
    format="$percntINCLUDE{
            $quot%WEB%.%TOPIC%$quot
            nosection=$quotview_item$quot
            ITEM=$quot$web.$topic$quot
            section=$quot$percntIF{$quot'$web.$topic' = $item$quot then=$quotedit_item$quot else=$quotview_item$quot}$percnt$quot
            }$percnt"
}%%INCLUDE{
   "%WEB%.%TOPIC%"
   section="%IF{"defined 'item'" then="nothing" else="edit_item"}%"
   warn="off"
}%
%ENDSECTION{"calendar"}%

view item format 

%STARTSECTION{"view_item"}%|\
    %FORMFIELD{"Date" topic="%ITEM%"}%    | \
    %FORMFIELD{"Time" topic="%ITEM%"}%    | \
    %FORMFIELD{"Period" topic="%ITEM%"}%    | \
    %FORMFIELD{"Message" topic="%ITEM%"}%    | \
     [[%SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC%?item=%ITEM%;state=%URLPARAM{"state" default="*"}%][%ICON{uweb-bo}%]]  |%ENDSECTION{"view_item"}%

edit item format 

%STARTSECTION{"edit_item"}%| %STARTFORM{
    name="%TOPIC%%BASETOPIC%%CATEGORY%"
    action="save"
    topic="%IF{"defined 'ITEM'" then="%ITEM%" else="FoswikiApplicationData.%TOPIC%AUTOINC0000"}%"
    method="POST"
    redirectto="%BASEWEB%.%BASETOPIC%"
    sep=" "
    showerrors="off"
}% %FORMERROR{"%TOPIC%%BASETOPIC%%CATEGORY%"}% %FORMELEMENT{
    name="Date"
    mandatory="on"
    format="<span class='formValue'>  $e $m $h </span>"
    default="%FORMFIELD{"Date" topic="%ITEM%" alttext="%DISPLAYTIME{"$day $month $year"}%"}%"
    type="date"
    dateformat="%e %b %Y"
    title="Date"
    size="8"
}% | %FORMELEMENT{
    name="Time"
    format="<span class='formValue'>  $e $m $h </span>%BR%"
    default="%FORMFIELD{"Time" topic="%ITEM%" alttext="12:00am"}%"
    type="text"
    title="Time"
    size="8"
}% | %FORMELEMENT{
    name="Period"
    format="<span class='formValue'>  $e $m $h </span>%BR%"
    default="%FORMFIELD{"Period" topic="%ITEM%" alttext=""}%"
    type="select"
    options="once,daily, weekly, monthly, yearly"
    title="Period"
    size="1"
}% | %FORMELEMENT{
    name="Message"
    mandatory="on"
    format="<span class='formValue'>  $e $m $h </span>%BR%"
    default="%FORMFIELD{"Message" topic="%ITEM%" alttext=""}%"
    type="text"
    title="Message"
    size="70"
}% \
%FORMELEMENT{type="hidden" name="Show" default="%FORMFIELD{"Show" topic="%ITEM%" alttext="show"}%"}% \
%FORMELEMENT{type="hidden" name="Category" default="%FORMFIELD{"Category" topic="%ITEM%" alttext="%CATEGORY%"}%"}% \
%FORMELEMENT{type="hidden" name="formtemplate" default="%WEB%.%TOPIC%"}% \
%FORMELEMENT{type="hidden" name="topicparent" default="%BASEWEB%.%BASETOPIC%"}% \
%FORMELEMENT{type="hidden" name="%IF{"defined 'ITEM'" then="item" else="nothingtoseehere"}%" default="%ITEM%"}% \
 | %FORMELEMENT{
    name="%TOPIC%%BASETOPIC%%CATEGORY%_submit"
    type="submit"
    buttonlabel="Submit"
}% %IF{"defined 'ITEM'" then="<a class='foswikiButton foswikiCancelButton' href='%SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC%'>Cancel</a>" else=""}% %ENDFORM% |%ENDSECTION{"edit_item"}%

DataForm? definition

Name Type Size Values Tooltip message Attributes
Date date 16   21 Mar 2010 m
Time time 16      
Period select 1 daily, weekly, monthly, yearly   m
Message text 64     m
Category text 64    

Defaults for this topic only

  • Set CATEGORY=*

Edit • Attach • Print version • History: r3 < r2 < r1 • Backlinks • Raw View • Raw edit • More topic actions

Search

Foswiki Webs

Subscribe

You need to log in to subscribe to a topic

System

create a WebLeftBar?
powered by the community. 28th October 2008.