Custom Fields in Lightbox - Reminder with options

Hi there.

I am trying to get get a number of custom fields to work within a new section I called ‘action’ (essentially a reminder). How do I save the info from that section?

I am really struggling and used some advice I found in another post. I think the critical bit is around the set_value and get_value function (I know the copied bit is unlikely to work, but I don’t know how to adapt it).

Any help is appreciated!

Code below:

function initcal() {
	null,"week"
	scheduler.config.multi_day = true;
	
	scheduler.config.xml_date="%Y-%m-%d %H:%i";
	scheduler.init('scheduler',null,"month");
	scheduler.load("test.xml");
	scheduler.config.full_day = true; // enable parameter to get full day event option on the lightbox form
	
	scheduler.locale.labels.map_tab = "Map";
	scheduler.locale.labels.section_location = "Location";
	scheduler.locale.labels.section_action = "Action";

	scheduler.config.wide_form = true;
	scheduler.locale.labels.section_custom="Details";
	
	scheduler.config.agenda_end = scheduler.date.add(new Date(), 12, "month"); //12 month from a current date
	scheduler.config.map_end = scheduler.date.add(new Date(), 12, "month"); //12 month from a current date
			
	//scheduler.templates.agenda_text = function(event){
	//   return event.text+" : "+event.custom;
	//};
	
	scheduler.form_blocks["actionbox"]={
          render:function(sns){
              return "<? $text= "
			  	
				<div index='3' id='action_button' onclick='action_show()' class='dhx_custom_button'><div class='dhx_custom_button_recurring'></div><div>Disabled</div></div>
				
			  	<div id='action_form' class='dhx_cal_ltext' style='display:none; height:20px;'>
					<table cellpadding=0 cellspacing=0 border=0><tr>
			  			<td>When:&nbsp;</td>
						<td><select onload='action_time_change()' id='action_time' onchange='action_time_change()' style='padding:0px;' class='input content-small ui-corner-left' id='action_when'>
								<option value=''>no action</option>
								<option value='time_event'>at time of event</option>
								<option value='15'>15 min prior to event</option>
								<option value='30'>30 min prior to event</option>
								<option value='60'>1 hour prior to event</option>
								<option value='120'>2 hours prior to event</option>
								<option value='1440'>1 day prior to event</option>
								<option value='2880'>2 days prior to event</option>
								<option value='10080'>1 week prior to event</option>
								<option value='20160'>2 weeks prior to event</option>
							</select>&nbsp;
						</td>
						<td>&nbsp;&nbsp;Action:&nbsp;</td>
						<td>
							<select id='action_kind' style='padding:0px;' class='input content-small ui-corner-left' >
								<option value='email_reminder'>standard reminder</option>
								<option value='text_email'>custom text email</option>
							</select>
						</td>
						<td>&nbsp;&nbsp;&nbsp;To:&nbsp;</td>
						<td>
							<select id='action_to' style='padding:0px;' class='input content-small ui-corner-left' >
								<option value='myself'>myself</option>
								<option value='specific'>specific address</option>
								<option value='group'>newsletter group</option>
							</select>
						</td>
						<td>&nbsp;&nbsp;&nbsp;Add:&nbsp;</td>
						<td>
							<input type='text' style='width:80px; padding:0px;' class='input content-small ui-corner-all'>
						</td>
						<td>&nbsp;&nbsp;&nbsp;<u>Edit Text</u>&nbsp;
							<input type='hidden' value='Reminder'>
						</td>
					</tr></table>
				</div>"; echo str_replace("\n", '', $text); ?>";
          },
			
	      set_value:function(node,value,ev){
	          var sel = node.getElementsByTagName("SELECT");
	          sel[0].value=value||"";
	          sel[1].value=ev.action||"";
	      },
	      get_value:function(node,ev){
	          var sel = node.getElementsByTagName("SELECT");
	          ev.action = sel[0].value;
	          return sel[1].value
	      },
	      focus:function(node){
	          var sel = node.getElementsByTagName("SELECT");
	          sel[0].focus();
	      }
     }
	
	scheduler.config.lightbox.sections=[
		{ name:"description", height:40, map_to:"text", type:"textarea", focus:true },
		{ name:"location", height:20, map_to:"event_location", type:"textarea"  },
		{ name:"custom", height:20, map_to:"details", type:"textarea"},
		{ name:"action", height:20, map_to:"action", type:"actionbox"},
		{ name:"time", height:72, type:"calendar_time", map_to:"auto"},
		{ name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"},	
	]

}

Hello,

Is your section rendered correctly?

Let me describe logic of sections in detail. They have 3 main functions: render, set_value, get_value. First of all each section is mapped to a single event property and later on uses it to save and read data. In your case it’s ‘action’.
render - used to form section itself. Html returned from the function will be directly inserted in the lightbox and later on displayed to the user. Please note your section includes 2 selects.
set_value - this function is called each time when lightbox is opened. For example we have text field, lightbox is opened - what value and where exactly should we put? In this function you can read event properties, mapped to property, find necessary element (input or select and so on) and assign a value.
get_value - this function is called each time you are saving lightbox. It’s function is to fetch current values form the appropriate elements (inputs/selects and so on) and return it. So later on this value would be saved to event property.

In your case for the get value you need to ask your selects what value do they hold, form final value based on this information and return it.

I suggest checking how existing sections are defined - lightbox.js (look for “sections = {” part), ext_editors.js (all of it) files.

Kind regards,
Ilya