Create new record with touch on List View

Discontinued products Scheduler for Mobile and Touch devices
#1

Hi,

I’d like to be able to new record form by touching a particular time slot on the ‘List’ view. Is there an event that I can use with attachEvent() and have that bring up the new record form with the timeslot and day pre-set?

Regards,
Cam

#2

Hi,

the issue is not clear. Could you describe it in detail ? Possibly a picture will help …

#3

Hi!

OK, in the mobile scheduler app, click on “Day”, see empty time slot, touch/click it. I would like to write code that now loads the “Add” screen, with the date and time of the touched time slot pre-loaded in the form.

Thanks!

#4

You can try the following:

[code]// attach event listener for dayList container
dhx.event($$(“scheduler”).$$(“dayList”).$view,“click”,function(e){
e=e||event;
var target = e.target||e.srcElement;
while(target!=this){
//search for scale element
if(target.className.indexOf(“dhx_dayevents_scale_item”)!=-1){
// get index of scale element and pass it into a custom function
for(var i =0; i < target.parentNode.childNodes.length; i++){
if(target.parentNode.childNodes[i] == target)
return openAdd(i-1);
}
}
target = target.parentNode;
}
});
// an example of the function

function openAdd(i){
// redefine default dates for form
var temp = scheduler.templates.new_event_data;
scheduler.templates.new_event_data = function(){
var hours = (dhx.Date.add(new Date(),1,“hour”)).getHours();
var start = dhx.Date.copy(this.coreData.getValue());
start.setHours(i);
var end = dhx.Date.add(start,1,“hour”);
return {start_date:start,end_date:end};
}
// trigget onItemClick event for “add” button
$$(“scheduler”).callEvent(“onItemClick”,[$$(“scheduler”).$$(“add”).config.id] );
// restore default template
scheduler.templates.new_event_data = temp;
}[/code]

#5

Great, thanks very much for this. I’ll have a go at integrating it and let you know how it goes.

#6

One remark… You should use “click” event instead of touchstart due to possible scrolling problems - scrolling handlers listen to touchstart event.

//var eventName = dhx.env.touch?“touchstart”:“click”;
var eventName = “click”;

#7

I ended up extending the code to be able to handle when the starting hour isn’t midnight, and also for when the half hour slot was chosen. Here’s the amended code below:

			// Attach event listener for dayList container:
			dhx.event($$("scheduler").$$("dayList").$view,"click",function(e){
				e=e||event;
				var target = e.target||e.srcElement;
				var extraMinutes = 0;
				while(target!=this){

					// Check if it was the first or second half-hour that was chosen:
					if(target.className.indexOf("dhx_dayevents_scale_bottom")!=-1){
						extraMinutes = 30;
					}

					//search for scale element
					if(target.className.indexOf("dhx_dayevents_scale_item")!=-1){
						// get index of scale element and pass it into a custom function
						for(var i =0; i < target.parentNode.childNodes.length; i++){      
							if(target.parentNode.childNodes[i] == target)
								return openAdd(i-1, extraMinutes);
						}
					}
					target = target.parentNode;
				}
			});

		function openAdd(i, minutes){

			var firstHour = $$("scheduler").$$("dayList")._settings.firstHour;
			var chosenHour = firstHour + i;

			// redefine default dates for form
			var temp = scheduler.templates.new_event_data;

			scheduler.templates.new_event_data = function(){
				var hours = (dhx.Date.add(new Date(),1,"hour")).getHours();
				var start = dhx.Date.copy(this.coreData.getValue());
				start.setHours(chosenHour, minutes, 0);
				var end = dhx.Date.add(start,1,"hour");
				return {start_date:start,end_date:end};
			}

			// trigget onItemClick event for "add" button
			$$("scheduler").callEvent("onItemClick",[$$("scheduler").$$("add").config.id] );

			// restore default template
			scheduler.templates.new_event_data = temp;
		}
#8

In that previous code sample, change the line that says:

var firstHour = $$("scheduler").$$("dayList")._settings.firstHour;

with this:

var firstHour = $$("scheduler").$$("dayList").config.firstHour;

Reason: “_settings” is deemed private and doesn’t exist (gets renamed) in the non-debug version of the js file. :exclamation: