Free Custom Fields with Calendar Control

[gussd]

Did anyone previously create custom fields for a ticket with calendar control attached to it? (Date Picker)

(And want to share there experience or custom code for this)

Regards
Guss

[craigbrass]

I don't think anything like this has ever been created but it would be handy for some circumstances. Feel free to suggest it in the feature requests board.

[gussd]

If there is enough people here interested, I can post my tempalte here...
After a bit of sleep, I've approach the problem with a "now-do-it-yourself" attitude and this is the result. (I'm lazy by nature, so I always see if someone else didn't do it before)



The two dates are also linked, departure to be >= to arrival. You will see from the inline DHTML popup 2, that the dates < arrival is disabled in departure widget.

The only disadvantage of this route I took is that I included some js files (customfields template), which is maybe not needed if a pure Kayako soluitions was created (becaus ethey already have all the js's in there source to build a control. (Based on Zapatec Calendar, the commercial version of Mishoo JSCalendar which is the open-source/LGPL version)

Regards
Guss

[craigbrass]

Thats some pretty fine coding Guss! I bet many people would appriciate this being released as a modification.

Can this be moved to the development board as it will likely get more exposure there to the people who need it.

[gussd]

No problem, you may move it to any forum you wish. (I assume you have to move it?)

Will post the code a bit later (my day-job boss is on my back with a meeting :-)

Regards
Guss

[craigbrass]

When I said move it, that was aimed at one of the Moderators or Jamie who have the ability to do so. I am not one so can't.

[gussd]

The part is red, is the additional code.
First I have create to custom fields. Date From and Date To. This is neither the id of name of the custom field, its the description. So just adding the fields and then looking at the source code, I see there names (its a db id)

No that I have the control's names, I added the parts in red.

First, I've linked to the css and js files of the Zapatec Calendar.
Second, I said that if my field title contains the word "date", I know it is the correct control. I give it a name and id (id is important because the calendar control need to refer back to it)
I also added a button after it, the button that launch the calendar widget.
The buttons name is "button_"+nameOfControl

And lastly I've added my Zapatec calendar configuration setting and some functions to control that the departure date should be >= to the arrival date.
The variable "doCalendar" is there to prevent the js to run if my date fields is not there (because I use templates and the date fields are only applicable when you log a ticket for the reservation department)

<link rel="stylesheet" href="includes/zapatec/zpcal/themes/system.css" />
<link rel="stylesheet" href="includes/zapatec/zpcal/themes/layouts/tiny.css" />
<script type="text/javascript" src="includes/zapatec/utils/zapatec.js"></script>
<script type="text/javascript" src="includes/zapatec/zpcal/src/calendar.js"></script>
<script type="text/javascript" src="includes/zapatec/zpcal/lang/calendar-en.js"></script>
<script type="text/javascript">var doCalender = false;</script>
<{foreach key=key value=cfgroup from=$cfrender}>
 <fieldset class="swiftfieldset">
 <legend><{$cfgroup[value]}></legend>
 <table width="100%"  border="0" cellspacing="1" cellpadding="2">
 <{foreach key=fieldkey value=field from=$cfgroup[fields]}>
 <{if $field[type] == "text"}>
   <tr>
  <td width="30%" align="left" valign="top" class="row2"><span class="<{if $posterror == true && $field[isrequired] == 1 && $field[value] == ""}>redtext<{else}>smalltext<{/if}>"><{$field[title]}>:<{if $field[isrequired] == "1"}><span class="redtext">&nbsp;*</span><{/if}><br/><{$field[description]}> </span></td>
  <td width="70%"><input id="<{$field[name]}>" name="<{$field[name]}>" type="text" size="25" class="swifttext" value="<{$field[value]}>">
<{if strpos($field[title], "Date")!== false}>
 <script type="text/javascript">doCalender = true;</script>
 <input style="font-size:10px" type="reset" value="..." id='button_<{$field[name]}>'>
<{/if}>
</td>
   </tr>
 <{elseif $field[type] == "password"}>
   <tr>
  <td width="30%" align="left" valign="top" class="row2"><span class="<{if $posterror == true && $field[isrequired] == 1 && $field[value] == ""}>redtext<{else}>smalltext<{/if}>"><{$field[title]}>:<{if $field[isrequired] == "1"}><span class="redtext">&nbsp;*</span><{/if}><br/><{$field[description]}> </span></td>
  <td width="70%"><input name="<{$field[name]}>" type="password" size="20" class="swifttext" value="<{$field[value]}>"></td>
   </tr>
 <{elseif $field[type] == "textarea"}>
   <tr>
  <td width="30%" align="left" valign="top" class="row2"><span class="<{if $posterror == true && $field[isrequired] == 1 && $field[value] == ""}>redtext<{else}>smalltext<{/if}>"><{$field[title]}>:<{if $field[isrequired] == "1"}><span class="redtext">&nbsp;*</span><{/if}><br/><{$field[description]}> </span></td>
  <td width="70%"><textarea name="<{$field[name]}>" cols="50" rows="5" class="swifttextarea"><{$field[value]}></textarea></td>
   </tr>
 <{elseif $field[type] == "select"}>
   <tr>
  <td width="30%" align="left" valign="top" class="row2"><span class="<{if $posterror == true && $field[isrequired] == 1 && $field[value] == ""}>redtext<{else}>smalltext<{/if}>"><{$field[title]}>:<{if $field[isrequired] == "1"}><span class="redtext">&nbsp;*</span><{/if}><br/><{$field[description]}> </span></td>
  <td width="70%"><select name="<{$field[name]}>" class="swiftselect">
   <{foreach key=optionkey value=option from=$field[value]}>
   <option value="<{$option[value]}>"<{if $option[selected] == 1}> selected<{/if}>><{$option[title]}></option>
   <{/foreach}>
   </select></td>
   </tr>
 <{elseif $field[type] == "selectmultiple"}>
   <tr>
  <td width="30%" align="left" valign="top" class="row2"><span class="<{if $posterror == true && $field[isrequired] == 1 && $field[value] == ""}>redtext<{else}>smalltext<{/if}>"><{$field[title]}>:<{if $field[isrequired] == "1"}><span class="redtext">&nbsp;*</span><{/if}><br/><{$field[description]}> </span></td>
  <td width="70%"><select name="<{$field[name]}>[]" size="5" style="width:160px;" class="swiftselect" multiple>
   <{foreach key=optionkey value=option from=$field[value]}>
   <option value="<{$option[value]}>"<{if $option[selected] == 1}> selected<{/if}>><{$option[title]}></option>
   <{/foreach}>
   </select></td>
   </tr>
 <{elseif $field[type] == "radio"}>
   <tr>
  <td width="30%" align="left" valign="top" class="row2"><span class="<{if $posterror == true && $field[isrequired] == 1 && $field[value] == ""}>redtext<{else}>smalltext<{/if}>"><{$field[title]}>:<{if $field[isrequired] == "1"}><span class="redtext">&nbsp;*</span><{/if}><br/><{$field[description]}> </span></td>
  <td width="70%">
   <{foreach key=optionkey value=option from=$field[value]}>
   <label for="<{$field[name]}>[<{$optionkey}>]"><input type="radio" id="<{$field[name]}>[<{$optionkey}>]" name="<{$field[name]}>" value="<{$option[value]}>"<{if $option[checked] == 1}> checked<{/if}> /> <span class="smalltext"><{$option[value]}></span><BR />
   <{/foreach}>
  </td>
   </tr>
 <{elseif $field[type] == "hidden"}>
  <input type="hidden" name="<{$field[name]}>" value="<{$field[value]}>" />
 <{elseif $field[type] == "plaintext"}>
   <tr>
  <td width="30%" align="left" valign="top" class="row2"><span class="smalltext"><b><{$field[title]}>:<{if $field[isrequired] == "1"}><span class="redtext">&nbsp;*</span></b><br/><{$field[description]}> </span><{/if}></td>
  <td width="70%"><span class="smalltext"><{$field[value]}></span></td>
   </tr>
 <{elseif $field[type] == "checkbox"}>
   <tr>
  <td width="30%" align="left" valign="top" class="row2"><span class="<{if $posterror == true && $field[isrequired] == 1 && $field[value] == ""}>redtext<{else}>smalltext<{/if}>"><{$field[title]}>:<{if $field[isrequired] == "1"}><span class="redtext">&nbsp;*</span><{/if}><br/><{$field[description]}> </span></td>
  <td width="70%">
   <{foreach key=optionkey value=option from=$field[value]}>
   <label for="<{$field[name]}>[<{$optionkey}>]"><input type="checkbox" id="<{$field[name]}>[<{$optionkey}>]" name="<{$field[name]}>[<{$optionkey}>]" value="<{$option[value]}>"<{if $option[checked] == 1}> checked<{/if}> /> <span class="smalltext"><{$option[value]}></span><BR />
   <{/foreach}>
  </td>
   </tr>
   <{/if}>
 <{/foreach}>
 </table>
 </fieldset>
 <{/foreach}>
<script type="text/javascript">
<!--  to hide script contents from old browsers
var startDate; var endDate;
function resetDates() {startDate = endDate = null;}
function filterDates1(cal) {
startDate = new Date(cal.date)
startDate.setHours(0,0,0,0)
if (endDate == null) { 
 Zapatec.Calendar.setup({
  inputField     :    "5f4b712635",
  button         :    "button_5f4b712635",                      ifFormat       :    "%Y-%m-%d",
  date           :     cal.date,
  showsTime      :     false,
  dateStatusFunc :    disallowDateBefore, 
  onUpdate       :    filterDates2,
                              noHelp         :    true
               });
}
}
function filterDates2(cal) {
var date = cal.date;
endDate = new Date(cal.date)
endDate.setHours(0,0,0,0)
}
function disallowDateBefore(dateCheckOut) {
dateCheckOut.setHours(0,0,0,0)
if ((startDate != null) && startDate > dateCheckOut)
 return true; 
var now = new Date()
now.setHours(0,0,0,0)
if (dateCheckOut < now) 
 return true;
return false;
}
function disallowDateAfter(dateCheckIn) {
dateCheckIn.setHours(0,0,0,0)
if ((endDate != null) && dateCheckIn > endDate)
 return true;
var now = new Date()
now.setHours(0,0,0,0)
if (dateCheckIn < now)
 return true;
return false;
}
     // end hiding contents from old browsers  -->
</script>
<script type="text/javascript">
if (doCalender) {
     var cal = new Zapatec.Calendar.setup({
          inputField     :    "69873f6168",   
          button         :    "button_69873f6168",  
          ifFormat       :    "%Y-%m-%d", 
          showsTime      :     false, 
          dateStatusFunc :    disallowDateAfter, 
          onUpdate       :    filterDates1,
          noHelp         :    true
     });
     Zapatec.Calendar.setup({
          inputField     :    "5f4b712635",
          button         :    "button_5f4b712635",  
          ifFormat       :    "%Y-%m-%d",
          showsTime      :     false, 
          dateStatusFunc :    disallowDateBefore, 
          onUpdate       :    filterDates2,
          noHelp         :    true
     });
}
</script>  

Craig, with 2000+ post ... you may as well be staff !
Regards
Guss

[craigbrass]

Thanks for sharing! I'll give that a test out later.

Craig, with 2000+ post ... you may as well be staff !

Glad to know my efforts are appriciated!

[Giray]

This seems great, but a little too much for some of us
Any way to provide a really simple one field + one calendar concept. Some of us just need to be able to create a field, for example "Deadline" with one calendar and no range. Possible?

[ysert]

Hi,

Dewak has Date-Time Custom Fields modification on their site for free. I got it and implemented, they are helpful to fix couple issues. We have left a minor issue that we may inquire their service but so far I can tell you that it may worthed to take a look.

YSERT

[Dewak]

Hi everyone, the date time custom field is available for free to the Kayako community. Please visit our site at Kayako Products for mor information.

PS: thanks Yalcin.