-------
---+++ Add Calendar Event

<verbatim>
%TMPL:DEF{PROMPT:AddCalendarEvent}%
<link type="text/css" rel="stylesheet" href="%PUBURL%/%TWIKIWEB%/JSCalendarContrib/calendar-system.css" />
<style>.calendar {z-index:2000;}</style>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/JSCalendarContrib/calendar.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/JSCalendarContrib/lang/calendar-en.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/JSCalendarContrib/calendar-setup.js"></script>
<!-- start of the form elements -->
<fieldset style="width:75%"><legend><strong> &nbsp;Post an event&nbsp; </strong></legend>
<table>
  <tr>
    <td align="right">Subject:</td>
    <td><input type="text" id="appt_subject" name="appt_subject" value="" \
               size="50" />
    </td>
  </tr>
  <tr>
    <td align="right">Details:</td>
    <td><textarea type="textarea" id="appt_details" name="appt_details" value="" \
               cols="46" rows="4" onChange="cleanDetails()" /></textarea>
    </td>
  </tr>
  <tr>
    <td>Start date:</td>

    <td><input type="text" id="appt_start_date" name="appt_start_date" value="" \
               size="20" readonly="1" />
    </td>
  </tr>
  <tr>
    <td align="right">End date:</td>
    <td><input type="text" id="appt_end_date" name="appt_end_date" value=""   \
               size="20" readonly="1" />
    </td>
  </tr>
  <tr>
    <td align="right">Start time:</td>
    <td><select id="appt_start_hour" name="appt_start_hour" >
                   <option value=""></option>
                   <option value="12">12</option>
                   <option value="01">01</option>
                   <option value="02">02</option>
                   <option value="03">03</option>
                   <option value="04">04</option>
                   <option value="05">05</option>
                   <option value="06">06</option>
                   <option value="07">07</option>
                   <option value="08">08</option>
                   <option value="09">09</option>
                   <option value="10">10</option>
                   <option value="11">11</option>
       </select>
       <select id="appt_start_min" name="appt_start_min" >
                   <option value=""></option>
                   <option value="00">00</option>
                   <option value="05">05</option>
                   <option value="10">10</option>
                   <option value="15">15</option>
                   <option value="20">20</option>
                   <option value="25">25</option>
                   <option value="30">30</option>
                   <option value="35">35</option>
                   <option value="40">40</option>
                   <option value="45">45</option>
                   <option value="50">50</option>
                   <option value="55">55</option>
       </select>
       <select id="appt_start_per" name="appt_start_per" >
                   <option value=""></option>
                   <option value="am">am</option>
                   <option value="pm">pm</option>
        </select>
    </td>
  </tr>
  <tr>
      <td align="right">End time:</td>
    <td><select id="appt_end_hour" name="appt_end_hour" >
                   <option value=""></option>
                   <option value="12">12</option>
                   <option value="01">01</option>
                   <option value="02">02</option>
                   <option value="03">03</option>
                   <option value="04">04</option>
                   <option value="05">05</option>
                   <option value="06">06</option>
                   <option value="07">07</option>
                   <option value="08">08</option>
                   <option value="09">09</option>
                   <option value="10">10</option>
                   <option value="11">11</option>
       </select>
       <select id="appt_end_min" name="appt_end_min" >
                   <option value=""></option>
                   <option value="00">00</option>
                   <option value="05">05</option>
                   <option value="10">10</option>
                   <option value="15">15</option>
                   <option value="20">20</option>
                   <option value="25">25</option>
                   <option value="30">30</option>
                   <option value="35">35</option>
                   <option value="40">40</option>
                   <option value="45">45</option>
                   <option value="50">50</option>
                   <option value="55">55</option>
       </select>
       <select id="appt_end_per" name="appt_end_per" >
                   <option value=""></option>
                   <option value="am">am</option>
                   <option value="pm">pm</option>
        </select> Color: <select id="appt_color" name="appt_color">
                   <option value="green">Green</option>
                   <option value="YELLOW" >Yellow</option>
                   <option value="ORANGE" >Orange</option>
                   <option value="RED" >Red</option>
                   <option value="PINK" >Pink</option>
                   <option value="PURPLE" >Purple</option>
                   <option value="TEAL" >Teal</option>
                   <option value="BLUE" >Blue</option>
                   <option value="AQUA" >Aqua</option>
                   <option value="LIME" >Lime</option>
                   <option value="OLIVE" >Olive</option>
                   <option value="MAROON" >Maroon</option>
                  <option value="GRAY" >Gray</option>
                   <option value="SILVER" >Silver</option>
        </select>
    </td>
</tr>
  <tr>
    <td colspan="2"><input type="checkbox" name="appt_recur" value="true" \
               id="appt_recur" onClick="toggleRecurForm(this);" />
        <label for="appt_recur">Recurring event?</label>
    </td>
  </tr>
</table>

<fieldset id="appt_recur_pattern_fieldset" style="display:none"><legend><strong> &nbsp;Recurrence pattern&nbsp; </strong></legend>
<table width="100%">
  <tr valign="top">
  <td width="20%">
    <input type="radio" name="appt_recur_type"                \
           value="appt_recur_daily" id="appt_recur_daily"     \
           onClick="switchRecurForm('appt_form_daily');"      \
           CHECKED />
    <label for="appt_recur_daily">Daily</label> <br>
    <input type="radio" name="appt_recur_type"                \
           value="appt_recur_weekly" id="appt_recur_weekly"   \
           onClick="switchRecurForm('appt_form_weekly');" />    
    <label for="appt_recur_weekly">Weekly</label> <br>
    <input type="radio" name="appt_recur_type"                \
           value="appt_recur_monthly" id="appt_recur_monthly" \
           onClick="switchRecurForm('appt_form_monthly');" />
    <label for="appt_recur_monthly">Monthly</label> <br>
    <input type="radio" name="appt_recur_type"                \
           value="appt_recur_yearly" id="appt_recur_yearly"   \
           onClick="switchRecurForm('appt_form_yearly');" />
    <label for="appt_recur_yearly">Yearly</label> <br>
  </td>

  <td width="80%" style="border-left:1px solid gray; padding-left:2em;">
  <div style="position:relative">
    <div id="appt_form_daily" style="position:absolute; top:0; left:0;">
      Every <input type="textbox" id="appt_daily_nth_n" name="appt_daily_nth_n" size="3" /> day(s)
    </div>
    <div id="appt_form_weekly" style="position:absolute; top:0; left:0; visibility: hidden;">
      Recur every week on: <br>
      <table width="100%"><tr>
      <td>
      <input type="radio" name="appt_weekly_days" \
             value="appt_weekly_sun" id="appt_weekly_sun"/> 
      <label for="appt_weekly_sun">Sunday</label>
      </td><td>
      <input type="radio" name="appt_weekly_days" \
             value="appt_weekly_mon" id="appt_weekly_mon"/>
      <label for="appt_weekly_mon">Monday</label>
      </td><td>
      <input type="radio" name="appt_weekly_days" \
             value="appt_weekly_tue" id="appt_weekly_tue"/>
      <label for="appt_weekly_tue">Tueday</label>
      </td><td>
      <input type="radio" name="appt_weekly_days" \
             value="appt_weekly_wed" id="appt_weekly_wed"/>
      <label for="appt_weekly_wed">Wednesday</label>
      </td></tr>
      <tr><td>
      <input type="radio" name="appt_weekly_days" \
             value="appt_weekly_thu" id="appt_weekly_thu"/>
      <label for="appt_weekly_thu">Thursday</label>
      </td><td>
      <input type="radio" name="appt_weekly_days" \
             value="appt_weekly_fri" id="appt_weekly_fri"/>
      <label for="appt_weekly_fri">Friday</label>
      </td><td>
      <input type="radio" name="appt_weekly_days" \
             value="appt_weekly_sat" id="appt_weekly_sat"/>
      <label for="appt_weekly_sat">Saturday</label>
      </td>
      <td></td>
      </tr></table>
    </div>
    <div id="appt_form_monthly" style="position:absolute; top:0; left:0; visibility: hidden;">

      <input type="radio" name="appt_monthly"   \
             value="appt_monthly_nth" id="appt_monthly_nth" />
        <label for="appt_monthly_nth">Day</label>
        <input type="textbox" id="appt_monthly_nth_n" name="appt_monthly_nth_n" size="3" /> 
        of every month

      <input type="radio" name="appt_monthly"   \
             value="appt_monthly_day" id="appt_monthly_day" />
        <label for="appt_monthly_day">The</label>
        <select name="appt_monthly_day_n" id="appt_monthly_day_n">
          <option value="1" selected>First</option>
          <option value="2">Second</option>
          <option value="3">Third</option>
          <option value="4">Fourth</option>
          <option value="L">Last</option>
        </select>
        <select name="appt_monthly_day_d" id="appt_monthly_day_d">
          <option value="Sun" selected>Sunday</option>
          <option value="Mon">Monday</option>
          <option value="Tue">Tuesday</option>
          <option value="Wed">Wednesday</option>
          <option value="Thu">Thursday</option>
          <option value="Fri">Friday</option>
          <option value="Sat">Saturday</option>
        </select>
        of every month
    </div>
    <div id="appt_form_yearly" style="position:absolute; top:0; left:0; visibility: hidden;">

      <input type="radio" name="appt_yearly"   \
             value="appt_yearly_date" id="appt_yearly_date" />
        <label for="appt_yearly_date">Every</label>
        <select name="appt_yearly_date_m" id="appt_yearly_date_m">
          <option value="Jan">January</option>
          <option value="Feb">February</option>
          <option value="Mar">March</option>
          <option value="Apr">April</option>
          <option value="May">May</option>
          <option value="Jun">June</option>
          <option value="Jul">July</option>
          <option value="Aug">August</option>
          <option value="Sep">September</option>
          <option value="Oct">October</option>
          <option value="Nov">November</option>
          <option value="Dec">December</option>
        </select>
        <input type="textbox" name="appt_yearly_date_n" size="3"  id="appt_yearly_date_n" /> 

      <input type="radio" name="appt_yearly"   \
             value="appt_yearly_day" id="appt_yearly_day" />
        <label for="appt_yearly_day">The</label>
        <select name="appt_yearly_day_n" id="appt_yearly_day_n">
          <option value="1">First</option>
          <option value="2">Second</option>
          <option value="3">Third</option>
          <option value="4">Fourth</option>
          <option value="L">Last</option>
        </select>
        <select name="appt_yearly_day_d" id="appt_yearly_day_d">
          <option value="Sun">Sunday</option>
          <option value="Mon">Monday</option>
          <option value="Tue">Tuesday</option>
          <option value="Wed">Wednesday</option>
          <option value="Thu">Thursday</option>
          <option value="Fri">Friday</option>
          <option value="Sat">Saturday</option>
        </select> of
        <select name="appt_yearly_day_m" id="appt_yearly_day_m">
          <option value="Jan">January</option>
          <option value="Feb">February</option>
          <option value="Mar">March</option>
          <option value="Apr">April</option>
          <option value="May">May</option>
          <option value="Jun">June</option>
          <option value="Jul">July</option>
          <option value="Aug">August</option>
          <option value="Sep">September</option>
          <option value="Oct">October</option>
          <option value="Nov">November</option>
          <option value="Dec">December</option>
        </select>
    </div>
</div></td></tr>
</table>
</fieldset>

<fieldset id="appt_recur_range_fieldset" style="display:none"><legend><strong> &nbsp;Range of recurrence&nbsp; </strong></legend>

  <input type="radio" name="appt_range"               \
         value="appt_range_none" id="appt_range_none" \
         CHECKED />
    <label for="appt_range_none">No end date</label>

  <input type="radio" name="appt_range"               \
         value="appt_range_by" id="appt_range_by" /> 
    <label for="appt_range_by">End by</label>
      <input type="text" id="appt_range_date" name="appt_range_date" value="" \
             size="20" id="appt_range_date" readonly="1" />
</fieldset>
<input type="hidden" id="appt_calendar_entry" name="appt_calendar_entry" />
<input type="hidden" id="appt_time_entry" name="appt_time_entry" />
<input type="hidden" id="appt_hidden_details" name="appt_hidden_details" />
<input type="hidden" name="timecode_start" id="timecode_start"/>
<input type="hidden" name="timecode_end" id="timecode_end"/>
<input type="submit" value="Submit" onClick="createHiddenCalendarEntry();" />
</fieldset>
<!-- end of the form elements -->

<!-- start of the associated javascript -->
<!-- <pre> -->

<script type="text/javascript">
function switchRecurForm(div_id)
{
    changeObjectVisibility("appt_form_daily",   "hidden");
    changeObjectVisibility("appt_form_weekly",  "hidden");
    changeObjectVisibility("appt_form_monthly", "hidden");
    changeObjectVisibility("appt_form_yearly",  "hidden");

    changeObjectVisibility(div_id, "visible");
}
function changeObjectVisibility(objectId, newVisibility) {
    var obj = document.getElementById(objectId);
    if (obj) { obj.style.visibility = newVisibility; }
}
function toggleRecurForm(object) {
    var fieldsetObj;
    var display = (object.checked == true) ? "block" : "none";
    fieldsetObj = document.getElementById("appt_recur_range_fieldset");
    fieldsetObj.style.display = display;
    fieldsetObj = document.getElementById("appt_recur_pattern_fieldset");
    fieldsetObj.style.display = display;
    if (object.checked == true) {
        var field = document.getElementById("appt_end_date");
        field.value = '';
    }
}

function cleanDetails() {
    var apptDetails = document.getElementById("appt_details");
    var apptHiddenDetails = document.getElementById("appt_hidden_details");

    // deal with single quotes
    var re = /(['])/g;
    var str = apptDetails.value;
    var cleanText = str.replace(re, "\\$1");

    // deal with double quotes
    re = /(["])/g;
    cleanText = cleanText.replace(re, "&quot;");

    // deal with less than signs
    re = /([<])/g;
    cleanText = cleanText.replace(re, "&lt;");

    // deal with greater than signs
    re = /([>])/g;
    cleanText = cleanText.replace(re, "&gt;");

    // deal with ampersands
    re = /([&])/g;
    cleanText = cleanText.replace(re, "&amp;");

    // deal with carriage returns
    re = /([\n])/g;
    cleanText = cleanText.replace(re, "&lt;br //&gt;");

    // deal with paragraphs
    re = /([\n{2,}])/g;
    cleanText = cleanText.replace(re, "&lt;p //&gt;");

    apptHiddenDetails.value = cleanText;
}
    
var apptStartDate;
var apptEndDate; 
function updateApptStartEnd(cal) {
    var field = document.getElementById("appt_start_date");
    if (field == cal.params.inputField) {
        /* updating appointment start date */
        apptStartDate = cal.date.getTime();
        if (apptEndDate == null || apptStartDate > apptEndDate) {
            field = document.getElementById("appt_end_date");
            field.value = cal.date.print("%d %b %Y");
        }
    }
    else {
        /* updating appointment end date */
        apptEndDate = cal.date.getTime();
    }
}

var apptStartTime; 
var apptEndTime; 
function updateApptStartTime(cal) {
    var field = document.getElementById("appt_start_time");
    if (field == cal.params.inputField) {
        /* updating appointment start date */
        apptStartTime = cal.date.getTime();
        if (apptEndTime == null || apptStartTime > apptEndTime) {
            field = document.getElementById("appt_end_time");
            field.value = cal.date.print("%I:%M<nop>%p");
        }
    }
    else {
        /* updating appointment end time */
        apptEndTime = cal.date.getTime();
    }
}

function setDisabledEndDates(date, y, m, d) {
    var field = document.getElementById("appt_start_date");
    /* appointment end date */
    return (date.getTime() < (apptStartDate - 3600*24*999));
}

Calendar.setup({
    inputField     :    "appt_start_date",
    ifFormat       :    "%d %b %Y",
    showsTime      :    false,
    onUpdate       :    updateApptStartEnd
});
Calendar.setup({
    inputField     :    "appt_end_date",
    ifFormat       :    "%d %b %Y",
    showsTime      :    false,
    onUpdate       :    updateApptStartEnd,
    dateStatusFunc :    setDisabledEndDates
});
Calendar.setup({
    inputField     :    "appt_range_date",
    ifFormat       :    "%d %b %Y",
    showsTime      :    false
});

function createHiddenCalendarEntry () {
    var creation = '';

    var start_date = document.getElementById("appt_start_date").value;
    var end_date = document.getElementById("appt_end_date").value;
    var range_date = document.getElementById("appt_range_date").value;
    var recur = document.getElementById("appt_recur").checked;
    var recur_daily = document.getElementById("appt_recur_daily").checked;
    var recur_weekly = document.getElementById("appt_recur_weekly").checked;
    var recur_monthly = document.getElementById("appt_recur_monthly").checked;
    var recur_yearly = document.getElementById("appt_recur_yearly").checked;
    var range_by = document.getElementById("appt_range_by").checked;
    var range_none = document.getElementById("appt_range_none").checked;
    var daily_nth_n = document.getElementById("appt_daily_nth_n").value;
    var weekly_sun = document.getElementById("appt_weekly_sun").checked;
    var weekly_mon = document.getElementById("appt_weekly_mon").checked;
    var weekly_tue = document.getElementById("appt_weekly_tue").checked;
    var weekly_wed = document.getElementById("appt_weekly_wed").checked;
    var weekly_thu = document.getElementById("appt_weekly_thu").checked;
    var weekly_fri = document.getElementById("appt_weekly_fri").checked;
    var weekly_sat = document.getElementById("appt_weekly_sat").checked;
    var monthly_nth = document.getElementById("appt_monthly_nth").checked;
    var monthly_nth_n = document.getElementById("appt_monthly_nth_n").value;
    var monthly_day = document.getElementById("appt_monthly_day").checked;
    var monthly_day_n_selected = document.getElementById("appt_monthly_day_n").selectedIndex;
    var monthly_day_n = document.getElementById("appt_monthly_day_n").options[monthly_day_n_selected].value;
    var monthly_day_d_selected = document.getElementById("appt_monthly_day_d").selectedIndex;
    var monthly_day_d = document.getElementById("appt_monthly_day_d").options[monthly_day_d_selected].value;
    var yearly_date = document.getElementById("appt_yearly_date").checked;
    var yearly_date_m_selected = document.getElementById("appt_yearly_date_m").selectedIndex;
    var yearly_date_m = document.getElementById("appt_yearly_date_m").options[yearly_date_m_selected].value;
    var yearly_date_n = document.getElementById("appt_yearly_date_n").value;
    var yearly_day = document.getElementById("appt_yearly_day").checked;
    var yearly_day_n_selected = document.getElementById("appt_yearly_day_n").selectedIndex;
    var yearly_day_n = document.getElementById("appt_yearly_day_n").options[yearly_day_n_selected].value;
    var yearly_day_d_selected = document.getElementById("appt_yearly_day_d").selectedIndex;
    var yearly_day_d = document.getElementById("appt_yearly_day_d").options[yearly_day_d_selected].value;
    var yearly_day_m_selected = document.getElementById("appt_yearly_day_m").selectedIndex;
    var yearly_day_m = document.getElementById("appt_yearly_day_m").options[yearly_day_m_selected].value;
    var start_hour_selected = document.getElementById("appt_start_hour").selectedIndex;
    var start_hour = document.getElementById("appt_start_hour").options[start_hour_selected].value;
    var start_min_selected = document.getElementById("appt_start_min").selectedIndex;
    var start_min = document.getElementById("appt_start_min").options[start_min_selected].value;
    var start_per_selected = document.getElementById("appt_start_per").selectedIndex;
    var start_per = document.getElementById("appt_start_per").options[start_per_selected].value;
    var end_hour_selected = document.getElementById("appt_end_hour").selectedIndex;
    var end_hour = document.getElementById("appt_end_hour").options[end_hour_selected].value;
    var end_min_selected = document.getElementById("appt_end_min").selectedIndex;
    var end_min = document.getElementById("appt_end_min").options[end_min_selected].value;
    var end_per_selected = document.getElementById("appt_end_per").selectedIndex;
    var end_per = document.getElementById("appt_end_per").options[end_per_selected].value;
    var color_selected = document.getElementById("appt_color").selectedIndex;
    var color = document.getElementById("appt_color").options[color_selected].value;

    if (!recur) { // non-recurring
        creation += start_date;
        if (start_date != end_date) {
            creation += ' - ' + end_date;
        }
    } else { // recurring
        if (recur_daily) {
            if (daily_nth_n.length == 0) {
                daily_nth_n = '1';
            }
            creation += 'E' + daily_nth_n + ' ' + start_date;
        } else if (recur_weekly) {
            if (weekly_sun) {
                creation += 'E Sun';
            } else if (weekly_mon) {
                creation += 'E Mon';
            } else if (weekly_tue) {
                creation += 'E Tue';
            } else if (weekly_wed) {
                creation += 'E Wed';
            } else if (weekly_thu) {
                creation += 'E Thu';
            } else if (weekly_fri) {
                creation += 'E Fri';
            } else if (weekly_sat) {
                creation += 'E Sat';
            }

        } else if (recur_monthly) {
            if (monthly_nth) {
                creation += monthy_nth_n;
            } else if (monthly_day) {
                creation += monthly_day_n  + ' ' + monthly_day_d;
            }
        } else if (recur_yearly) {
            if (yearly_date) {
                creation += yearly_date_n + ' ' + yearly_date_m;
            } else if (yearly_day) {
                creation += yearly_day_n + ' ' + yearly_day_d + ' ' + yearly_day_m;
            }
        } else {
            creation += 'BUG';
        }

        if (range_none) {
            /* nothing to do */
        } else if (range_by) {
            creation += ' - ' + range_date;
        } else {
            creation += 'BUG';
        }
    }

    var time = document.getElementById("appt_time_entry");
    var time = document.getElementById("timecode_start");
    var time = document.getElementById("timecode_end");
    var time_span = start_hour + ':' + start_min + start_per + '-' + end_hour + ':' + end_min + end_per + ',' + color + "}%";
    if (time_span.substring(0,3) == ":-:") {
       timecode_start.value = "";
       timecode_end.value = "";
       time.value = "";
    }else{
       timecode_start.value = "%TT%NOP%CM{";
       timecode_end.value = "}%";
       time.value = time_span;
    }

    var calendar_entry = document.getElementById("appt_calendar_entry");
    calendar_entry.value = creation;
}
</script>
<!-- </pre> -->
<!-- end of the associated javascript -->
%TMPL:END%
</verbatim>
<verbatim>
%TMPL:DEF{OUTPUT:AddCalendarEvent}%%POS:BEFORE%   * %URLPARAM{appt_calendar_entry}% - %URLPARAM{"timecode_start"}%%URLPARAM{appt_time_entry}%%URLPARAM{"timecode_end"}% %URLPARAM{appt_subject}% %TOOLTIP{TEXT="%URLPARAM{appt_hidden_details}%" TITLE="%URLPARAM{appt_subject}%" STICKY="true" WIDTH="200" ABOVE="true"}% ...more %TOOLTIP{END}%%TMPL:END%
</verbatim>
--------