[rt-users] Calendar Widget?

[Myers, Adam]

Here is a more detailed way to add a calendar widget.

1) Download the files from http://www.dynarch.com/projects/calendar/.
There are a lot of files included such as different skins and languages,
etc. Place this folder in /share/html/NoAuth. The files I used are:

calendar-setup.js
calendar.js
lang/calendar-en.js
calendar-system.css (css "skin", there are many choices)

2) Since jscalendar is a javascript widget, you need to link RT to these
.js files. So add these lines to /Elements/Header near the other
javascript code.

--------/Elements/Header-----------
<link rel="stylesheet" href="<%$RT::WebPath%>/NoAuth/webrt.css"
type="text/css" media="all">

+ <link rel="stylesheet" type="text/css"
href="<%$RT::WebPath%>/NoAuth/jscalendar/calendar-system.css"
title="calendar-system">
+ <script language="javascript" type="text/javascript"
src="<%$RT::WebPath%>/NoAuth/jscalendar/calendar.js"></script>
+ <script language="javascript" type="text/javascript"
src="<%$RT::WebPath%>/NoAuth/jscalendar/lang/calendar-en.js"></script>
+ <script language="javascript" type="text/javascript"
src="<%$RT::WebPath%>/NoAuth/jscalendar/calendar-setup.js"></script>

<script type="text/javascript">
function hideshow(num) {
    var idstring = "element-" + num;
--------------------

3) Create a local copy of /share/html/Elements/SelectDate. Add this
javascript block to generate a widget next to each text box. When the
image is clicked, it will trigger this code and show a flat calendar.
When a date is selected, the textbox will be populated with the date. 

----------/Elements/SelectDate----------
- <INPUT NAME="<%$Name%>" VALUE="<%$Default%>" size=<%$Size%>> 
+ <INPUT NAME="<%$Name%>" VALUE="<%$Default%>" size=<%$Size%>
id="<%$ID%>"> 
+<img src="<%$RT::WebPath%>/NoAuth/jscalendar/img.gif"
id="<%$ID%>_trigger" title="Date selector" />

+ <script type="text/javascript">
+    Calendar.setup({
+        inputField     :    "<%$ID%>",      // id of the input field
+        ifFormat       :    "%Y-%m-%d %H:%M:%S",       // format of the
input field
+        showsTime      :    true,            // will display a time
selector
+        button         :    "<%$ID%>_trigger",   // trigger for the
calendar (button ID)
+        singleClick    :    false,           // double-click mode
+        step           :    1                // show all years in
drop-down boxes (instead of every other year as default)
+    });
+ </script>

$Size => 16
+ $ID => ''
</%args>
--------------------------

4) Now whenever you want the calendar widget to be used, like in
/Ticket/Elements/EditDates, add the 'ID' argument to the component call.
(I would use the same value as your 'Name' argument). Here is a couple
examples as this could be used anywhere: 

-----------/Ticket/Elements/EditDates----------
<TR>
  <TD class="label"><&|/l&>Starts</&>:</TD>
  <TD class="entry">
-    <& /Elements/SelectDate, menu_prefix => 'Starts', current => 0
&>(<% $TicketObj->StartsObj->AsString %>)
+    <& /Elements/SelectDate, menu_prefix => 'Starts', ID =>'starts',
current => 0 &>(<% $TicketObj->StartsObj->AsString %>)
  </TD>
</TR>
<TR>
  <TD class="label"><&|/l&>Due</&>:</TD>
  <TD class="entry">
-    <& /Elements/SelectDate, menu_prefix => 'Due', current => 0 &> (<%
$TicketObj->DueObj->AsString %>)
+    <& /Elements/SelectDate, menu_prefix => 'Due', ID => 'due', current
=> 0 &> (<% $TicketObj->DueObj->AsString %>)
  </TD>
</TR>
-----------------

For further reference on how to use jscalendar in other ways such as a
popup or button triggered, read the documentation provided with the
calendar.

Have fun!

Adam