Post Event
%TMPL:DEF{PROMPT:PostEvent}%
<link type="text/css" rel="stylesheet" href="%PUBURL%/%TWIKIWEB%/JSCalendarContrib/calendar-system.css" />
<style>.calendar {z-index:2000;}</style>
<!-- start of the form elements -->
<fieldset><legend><strong> Create an Event </strong></legend>
<table>
<tr>
<td align="right">Subject:</td>
<td><input type="text" id="appt_subject" name="appt_subject" value="" \
size="60" />
</td>
</tr>
<tr>
<td align="right">Details:</td>
<td><textarea type="textarea" id="appt_details" name="appt_details" value="" \
cols="60" 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><input type="text" id="appt_start_time" name="appt_start_time" value="" \
size="20" readonly="1" />
</td>
</tr>
<tr>
<td align="right">End time:</td>
<td><input type="text" id="appt_end_time" name="appt_end_time" value="" \
size="20" readonly="1" />
</td>
</tr>
<tr>
<td colspan="2">
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="aquamarine" >Aquamarine</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> Recurrence pattern </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> Range of recurrence </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_hidden_details" name="appt_hidden_details" />
<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 = '';
/* testing ********************************************************************************* */
// changeObjectVisibility("appt_form_daily", "visible");
// var nfield = document.getElementById("appt_daily_nth_n");
// nfield.value = "4";
// changeObjectVisibility("appt_daily_nth_n", "visible");
// nfield.focus();
// nfield.select();
// alert(nfield.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, """);
// deal with less than signs
re = /([<])/g;
cleanText = cleanText.replace(re, "<");
// deal with greater than signs
re = /([>])/g;
cleanText = cleanText.replace(re, ">");
// deal with ampersands
re = /([&])/g;
cleanText = cleanText.replace(re, "&");
// deal with carriage returns
re = /([\n])/g;
cleanText = cleanText.replace(re, "<br //>");
// deal with paragraphs
re = /([\n{2,}])/g;
cleanText = cleanText.replace(re, "<p //>");
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("%l:%M %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,
});
Calendar.setup({
inputField : "appt_start_time",
ifFormat : "%l:%M %P",
showsTime : true,
time24 : false,
onUpdate : updateApptStartTime,
});
Calendar.setup({
inputField : "appt_end_time",
ifFormat : "%l:%M %P",
showsTime : true,
time24 : false,
onUpdate : updateApptStartTime,
});
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_time = document.getElementById("appt_start_time").value;
var end_time = document.getElementById("appt_end_time").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 subject = document.getElementById("appt_subject").value;
creation += ' - ' + start_time + ' ' + end_time + ' ' + subject;
var calendar_entry = document.getElementById("appt_calendar_entry");
calendar_entry.value = creation;
}
</script>
<!-- </pre> -->
<!-- end of the associated javascript -->
%TMPL:END%
%TMPL:DEF{OUTPUT:PostEvent}%
%POS:BEFORE% * %URLPARAM{appt_calendar_entry}%
%TMPL:END%
Log In
Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors. 
TWiki Web
Index
Search
BettyWalls