Hey,
I've trawled through the tubes and the forum and couldn't find anything on what I'm trying to do.
My situation is I'm using an asset builder to create single calendar events (bookings). This works fine but I want more control over the job %details-F_start_end% does. I only want users to see hour blocks of time. A typical booking will be between 1 to 4 hours.
Any ideas/suggestions would be much appreciated.
Thanks!
You could use a javascript date/time widget to restrict the input, I suppose - if you customise the bodycopy for your form, you'd be able to replace the existing control with something that better suits you. You could also swap the interface slightly (again, using JS on the front end) to provide a start time, then a length, and dynamically generate the end time into a hidden field, which might suit your use case better?
Hey Matthew.
Yeah, either of those would be fine. The input I had in mind would go something like this:
<start time drop box> <end time drop box> <date>
Where the drop boxes would have 9am, 10am ...
But the issue I'm having is how to throw those inputs into the creation of the single calander event. Is it as simple as
stuff = %details-F_start_end%? I couldn't find any documentation for <start time>, <end time>, <start date>, <end date> which presumably makes up the calander event. Any ideas?
Thanks again.
I've not really used the asset builder for creating events, so I'm not sure on how to get the data in it, but in general, Squiz will accept data from suitably named fields, even if they aren't the type output by the default setup. That means you can see what %details-F_start_end% outputs, then recreate that with your fields, and it _should_ just work.
What I have done for events here is build a JS API based admin interface, which allows for even more control over the content. It uses some scripting to manipulate the date information to ensure it's presented as I want it, no matter how the user enters it. It's more powerful than the standard asset builder, but has other limitations, such as not being able to create images (I fall back to an asset builder for that).
My approach is similar to Matthew in that I have built a separate page using the javascript interface. I use the jquery ui datepicker and augmented that with a compatible timepicker addon too (there are several if you google - this is the one I went for in the end http://trentrichardson.com/examples/timepicker/ )
If you want to stick with the asset builder I'd recommend using firebug to observe what the the native asset builder interface sends back to the server and then you know you can play about with the actual controls / fields used as long as you structure it in such a way that the same stuff gets sent back over the wire.
Good luck!
Hey Guys,
Thanks Matt. You sent me on the right track :). After a few days of stuffing around and trial and error I've come up with exactly what I wanted. For those following along at home see the below.
This is the default matrix code:
<script type="text/javascript" src="http://www.lpi.nsw.gov.au/__data/asset_types/calendar_event/js/date_chooser.js"></script><!-- start --> <table border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 1ex"> <tr> <td class="sq-backend-data" style="vertical-align: bottom; white-space: nowrap">&nbsp;Occurs on&nbsp; <input class="sq-form-field" style="width: 5ex" type="text" name="calendar_event_single_0_start_day" id="calendar_event_single_0_start_day" size="2" value="12" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processStartDateBlur(oldField, \'calendar_event_single_0\')', 10);" /> <select class="sq-form-field" name="calendar_event_single_0_start_month" id="calendar_event_single_0_start_month" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processStartDateBlur(oldField, \'calendar_event_single_0\')', 10);"> <option value="1">Jan</option> <option value="2">Feb</option> <option selected="selected" value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sep</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option> </select> <input class="sq-form-field" type="text" name="calendar_event_single_0_start_year" id="calendar_event_single_0_start_year" size="5" value="2013" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processStartDateBlur(oldField, \'calendar_event_single_0\')', 10);" /> </td> <td class="sq-backend-data" style="white-space: nowrap"> &nbsp;&nbsp; <input class="sq-form-field" type="checkbox" value="1" name="calendar_event_single_0_start_time_enabled" id="calendar_event_single_0_start_time_enabled" onclick="if (this.checked) { enableTimeField('calendar_event_single_0_start'); } else { disableTimeField('calendar_event_single_0_start'); } if (isChecked('calendar_event_single_0_end_enabled')) { if (this.checked) enableTimeField('calendar_event_single_0_end'); else disableTimeField('calendar_event_single_0_end'); } else { if (this.checked) { checkBox('calendar_event_single_0_end_time_enabled'); } else { unCheckBox('calendar_event_single_0_end_time_enabled'); } } "" />at <input class="sq-form-field" style="width: 5ex" type="text" name="calendar_event_single_0_start_hours" id="calendar_event_single_0_start_hours" size="2" maxlength="2" value="7" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processStartDateBlur(oldField, \'calendar_event_single_0\')', 10);" disabled="disabled" /> : <input class="sq-form-field" style="width: 5ex" type="text" name="calendar_event_single_0_start_minutes" id="calendar_event_single_0_start_minutes" size="2" maxlength="2" value="50" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processStartDateBlur(oldField, \'calendar_event_single_0\')', 10);" disabled="disabled" /> <select class="sq-form-field" name="calendar_event_single_0_start_is_pm" id="calendar_event_single_0_start_is_pm" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processStartDateBlur(oldField, \'calendar_event_single_0\')', 10);" disabled="disabled" > <option value="0" selected="selected" >am</option> <option value="1" >pm</option> </select> </td> </tr> </table> <!-- end --> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="sq-backend-data" style="white-space: nowrap"> <input name="calendar_event_single_0_end_enabled" id="calendar_event_single_0_end_enabled" type="checkbox" onclick="processEndClick(this, 'calendar_event_single_0');"/>&nbsp;runs&nbsp; </td> <!-- duration --> <td class="sq-backend-data" style="white-space: nowrap"> <input type="radio" value="duration" id="calendar_event_single_0_duration_enabled" name="calendar_event_single_0_end_type" checked="checked" disabled="disabled" /> for </td> <td colspan="2" class="sq-backend-data" style="white-space: nowrap"> <input type="text" name="calendar_event_single_0_duration" value="" size="2" onclick="checkBox('calendar_event_single_0_duration_enabled'); checkBox('calendar_event_single_0_start_time_enabled'); enableTimeField('calendar_event_single_0_start');" onblur="updateDurationValuesByPrefix('calendar_event_single_0')" disabled="disabled" class="sq-form-field" id="calendar_event_single_0_duration" /><select name="calendar_event_single_0_duration_units" onclick="checkBox('calendar_event_single_0_duration_enabled'); checkBox('calendar_event_single_0_start_time_enabled'); enableTimeField('calendar_event_single_0_start');" onblur="updateDurationValuesByPrefix('calendar_event_single_0')" disabled="disabled" class="sq-form-field" id="calendar_event_single_0_duration_units"><option value="i" selected="selected">minutes</option><option value="h">hours</option><option value="d">days</option></select> </td> </tr> <tr> <td>&nbsp;</td> <!-- end date --> <td class="sq-backend-data" style="white-space: nowrap"> <input type="radio" value="date" id="calendar_event_single_0_end_date_enabled" name="calendar_event_single_0_end_type" disabled="disabled" /> until &nbsp; </td> <td class="sq-backend-data" style="white-space: nowrap"> <input class="sq-form-field" style="width: 5ex" type="text" name="calendar_event_single_0_end_day" id="calendar_event_single_0_end_day" size="2" value="12" onclick="checkBox('calendar_event_single_0_end_date_enabled');" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processEndDateBlur(oldField, \'calendar_event_single_0\')', 10);" disabled="disabled" /> <select class="sq-form-field" name="calendar_event_single_0_end_month" id="calendar_event_single_0_end_month" onclick="checkBox('calendar_event_single_0_end_date_enabled');" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processEndDateBlur(oldField, \'calendar_event_single_0\')', 10);" disabled="disabled"> <option value="1">Jan</option> <option value="2">Feb</option> <option selected="selected" value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sep</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option> </select> <input class="sq-form-field" type="text" name="calendar_event_single_0_end_year" id="calendar_event_single_0_end_year" size="5" value="2013" onclick="checkBox('calendar_event_single_0_end_date_enabled');" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processEndDateBlur(oldField, \'calendar_event_single_0\')', 10);" disabled="disabled" /> </td> <td class="sq-backend-data" style="white-space: nowrap"> &nbsp;&nbsp; <input class="sq-form-field" type="checkbox" value="1" name="calendar_event_single_0_end_time_enabled" id="calendar_event_single_0_end_time_enabled" onclick="if (this.checked) { enableTimeField('calendar_event_single_0_end'); } else { disableTimeField('calendar_event_single_0_end'); } if (this.checked) { checkBox('calendar_event_single_0_end_date_enabled'); enableTimeField('calendar_event_single_0_start'); } else disableTimeField('calendar_event_single_0_start');" disabled="disabled"" />at <input class="sq-form-field" style="width: 5ex" type="text" name="calendar_event_single_0_end_hours" id="calendar_event_single_0_end_hours" size="2" maxlength="2" value="7" onclick="checkBox('calendar_event_single_0_end_date_enabled');" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processEndDateBlur(oldField, \'calendar_event_single_0\')', 10);" disabled="disabled" /> : <input class="sq-form-field" style="width: 5ex" type="text" name="calendar_event_single_0_end_minutes" id="calendar_event_single_0_end_minutes" size="2" maxlength="2" value="50" onclick="checkBox('calendar_event_single_0_end_date_enabled');" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processEndDateBlur(oldField, \'calendar_event_single_0\')', 10);" disabled="disabled" /> <select class="sq-form-field" name="calendar_event_single_0_end_is_pm" id="calendar_event_single_0_end_is_pm" onclick="checkBox('calendar_event_single_0_end_date_enabled');" onkeypress="processKeyEvent(this)" onfocus="currentField=this" onblur="currentField=null; oldField=this; setTimeout('processEndDateBlur(oldField, \'calendar_event_single_0\')', 10);" disabled="disabled" > <option value="0" selected="selected" >am</option> <option value="1" >pm</option> </select> </td> </tr> </table> <input type="hidden" name="calendar_event_single_0_start_end_chooser_printed" value="1" class="sq-form-field" id="calendar_event_single_0_start_end_chooser_printed" />
And this is mine:
<tr> <th style="style:" id="_td1_0" align="left">Date</th> <td style="style:" id="_td1_1"><span class="field_kw"> <!-- start --><input class=“sq-form-field” style=“width: 5ex” type=“text” name=“calendar_event_single_0_start_day” id=“calendar_event_single_0_start_day” size=“2” value=“12” onkeypress=“processKeyEvent(this)” onfocus=“currentField=this” onblur=“currentField=null; oldField=this; setTimeout(‘processStartDateBlur(oldField, 'calendar_event_single_0')’, 10);” />
<select class=“sq-form-field” name=“calendar_event_single_0_start_month” id=“calendar_event_single_0_start_month” onkeypress=“processKeyEvent(this)” onfocus=“currentField=this” onblur=“currentField=null; oldField=this; setTimeout(‘processStartDateBlur(oldField, 'calendar_event_single_0')’, 10);”>
<option value=“1”>Jan</option>
<option value=“2”>Feb</option>
<option selected=“selected” value=“3”>Mar</option>
<option value=“4”>Apr</option>
<option value=“5”>May</option>
<option value=“6”>Jun</option>
<option value=“7”>Jul</option>
<option value=“8”>Aug</option>
<option value=“9”>Sep</option>
<option value=“10”>Oct</option>
<option value=“11”>Nov</option>
<option value=“12”>Dec</option>
</select><input class=“sq-form-field” type=“text” name=“calendar_event_single_0_start_year” id=“calendar_event_single_0_start_year” size=“5” value=“2013” onkeypress=“processKeyEvent(this)” onfocus=“currentField=this” onblur=“currentField=null; oldField=this; setTimeout(‘processStartDateBlur(oldField, 'calendar_event_single_0')’, 10);” />
<input class=“sq-form-field” type=“hidden” value=“1” name=“calendar_event_single_0_start_time_enabled” id=“calendar_event_single_0_start_time_enabled” /></span></td>
</tr>
<tr>
<th style=“style:” id=“_td2_0” align=“left”>Start Time</th><td style="style:" id="_td2_1"><span class="field_kw"><SELECT onchange=" var cboEndHour = document.getElementById('calendar_event_single_0_duration'); var intStartHour = new Number(document.getElementById('calendar_event_single_0_start_hours').value); while (cboEndHour.options.length > 0) { cboEndHour.remove(0); } for (var i = 0; i < 4; i++ ) { var intNewHour = new Number(intStartHour + i + 1); if (intNewHour <= 19){ if (intNewHour < 12) { var strMeridiem = new String('am'); } else { var strMeridiem = new String('pm'); if (intNewHour > 12) { intNewHour = intNewHour - 12; } } cboEndHour.options[i] = new Option(intNewHour + strMeridiem, (i+1)); } }" onblur=“currentField=null; oldField=this; setTimeout(‘processStartDateBlur(oldField, 'calendar_event_single_0')’, 10);” id=calendar_event_single_0_start_hours class=sq-form-field onfocus=currentField=this onkeypress=processKeyEvent(this) name=calendar_event_single_0_start_hours> <OPTION selected value=6>6am</OPTION> <OPTION value=7>7am</OPTION> <OPTION value=8>8am</OPTION> <OPTION value=9>9am</OPTION> <OPTION value=10>10am</OPTION> <OPTION value=11>11am</OPTION> <OPTION value=12>12pm</OPTION> <OPTION value=13>1pm</OPTION> <OPTION value=14>2pm</OPTION> <OPTION value=15>3pm</OPTION> <OPTION value=16>4pm</OPTION> <OPTION value=17>5pm</OPTION> <OPTION value=18>6pm</OPTION></SELECT>
<input type=“hidden” class=“sq-form-field” name=“calendar_event_single_0_start_minutes” id=“calendar_event_single_0_start_minutes” value=“0” />
<input type=“hidden” class=“sq-form-field” value=“0” id=“calendar_event_single_0_start_is_pm” name=“calendar_event_single_0_start_is_pm” /> </span></td>
</tr>
<tr>
<th style=“style:” id=“_td3_0” align=“left”>End Time</th><td style="style:" id="_td3_1"><span class="field_kw"> <!-- end --><input type=“hidden” name=“calendar_event_single_0_end_enabled” id=“calendar_event_single_0_end_enabled” value=“0” />
<!-- duration –>
<input type=“hidden” value=“duration” id=“calendar_event_single_0_duration_enabled” name=“calendar_event_single_0_end_type” value=“1” />
<SELECT onblur=“currentField=null; oldField=this; setTimeout(‘processStartDateBlur(oldField, 'calendar_event_single_0')’, 10);” id=calendar_event_single_0_duration class=sq-form-field onfocus=currentField=this onkeypress=processKeyEvent(this) name=calendar_event_single_0_duration> <OPTION value=7>7am</OPTION> <OPTION value=8>8am</OPTION> <OPTION value=9>9am</OPTION> <OPTION value=10>10am</OPTION> </SELECT>
<input type=“hidden” name=“calendar_event_single_0_duration_units” class=“sq-form-field” id=“calendar_event_single_0_duration_units” value=“h” /><input type=“hidden” name=“calendar_event_single_0_start_end_chooser_printed” value=“1” class=“sq-form-field” id=“calendar_event_single_0_start_end_chooser_printed” /></span></td>
</tr>
[attachment=603:untitled.JPG]
So now that I know how its not too painful replace the default matrix fields with your own as long as matrix is happy with what you give it. It was quite tricky in that some fields were mandatory and some were not. I presume this logic would be buried in the back end somewhere but I just got their through trial and error.
Happy customising,
Koax untitled.JPG (4.68 KB)
