dhtmlx mobile scheduler, jquery mobile and event loops

I’m using the mobile scheduler which is embedded into a jquery mobile data role page. I’m having issues with getting the templates to fire off, docs are located here:

docs.dhtmlx.com/doku.php?id=dhtm … :templates

I am calling the templates before dhx.ready as the docs suggest. I know the templates work on some level as this template fires off ok:

scheduler.templates.day_event

However other templates like scheduler.templates.selected_event do not fire off and it may be a conflict with jqm.

Also the event_class template supports a type parameter, please see this for more information:

docs.dhtmlx.com/touch/doku.php?i … stack_type

This type parameter can be used to set custom css classes but I don’t see where I can set this parameter? Does anyone have good working examples that integrate these templates well into jquery mobile.

However other templates like scheduler.templates.selected_event do not fire off and it may be a conflict with jqm.

Could you attach an example that reproduces the issue ?

I can’t attach a full example. In the jqm framework that I’m using there is a global js file that triggers events according to what page you are visiting. I have a schedule page that the user visits after traversing a couple of links. I’m using document.on and pageshow in jqm when the person hits the schedule page ( this is where the dhtmlx mobile scheduler gets loaded ).

$(document).on(‘pageshow’, ‘#schedule’, function () {

// I do some checks then I call a function that loads the dhtmlx scheduler.
callScheduler();
}

Here is an excerpt of the function. Things to note:

  • scheduler.templates.day_event template below fires off correctly everytime I go to the day view. This is the only template I can get to fire off correctly.

  • scheduler.templates.event_class - this template only fires off in the code below when I click on the day view. However it should be firing off when the default List view loads also. There is some kind of code execution conflict as I can try setting the scheduler.templates.event_class in the index.html file ( obviously outside of the global js file ) and the event_class will fire off when the scheduler loads ( default List view ).

  • scheduler.templates.calendar_event and any other templates you see below are not firing off

function callScheduler(){

  // set current date by passing local Year,month,day
  var dateObj = new Date();
  var month = dateObj.getMonth();
  var day = dateObj.getDate();
  var year = dateObj.getFullYear();
  var currentDate = new Date(year,month,day);
  // if needed, disable cache
  //scheduler.PreventCache();
  
  //alert( '--- ' + currentDate );
  //scheduler.config.init_date = new Date(2013,8,12);
  
  //scheduler.EnableDataprocessor = true;
  
  scheduler.config.init_date = currentDate;
  // setting to false to see if templates will render
  //scheduler.config.readonly = false;
  scheduler.config.readonly = true;
  
  /*the format of the date in a list*/
  scheduler.config.item_date = "%M %d, %y";
  scheduler.config.hour_date = "%h:%i %A"; 
  scheduler.config.header_date = "%M %d, %Y";
  /*the height of the list item*/
  scheduler.xy.list_height = "auto";

scheduler.config.selected_toolbar = [
{view:'button', inputWidth:scheduler.xy.icon_back, id:"back", align:"left",  label:scheduler.locale.labels.icon_back, css:"cancel"},
{ view:"button",css:"add",id:"add", align:"right",label:" + ",inputWidth:42,width:50},
];

scheduler.templates.event_class = function (start, end, event) {
console.log(‘event class’);
/*
return ‘list_meetings_item’;
return ‘meetings_item’;

		if (event.type == 'manager') return "manager_event";
			return "employee_event"; 
		*/			

};

// template reference
// docs.dhtmlx.com/doku.php?id=dhtm … :templates

scheduler.templates.selected_event = function(obj){
console.log(‘selected event’);
var html = “”, fts="", fte="";
var start = obj.start_date;
var end = obj.end_date;

 if(!start) return html;
 html += "<div  class='selected_event "+scheduler.templates.event_class(obj)+"' style='"+(obj.color?"background-color:"+obj.color+";":"")+(obj.fontColor||obj.textColor?"color:"+(obj.fontColor||obj.textColor):"")+"'>";
 html += "<div class='event_title'>"+obj.text+"</div>";

 if(dhx.Date.datePart(start).valueOf()==dhx.Date.datePart(end).valueOf()){
     var fd = dhx.i18n.dateFormatStr(start);
     fts = dhx.i18n.timeFormatStr(start);
     fte = dhx.i18n.timeFormatStr(end);
     html += "<div class='event_text'>"+fd+"</div>";
     html += "<div class='event_text'>"+scheduler.locale.labels.label_from+" "+fts+" "+scheduler.locale.labels.label_to+" "+fte+"</div>";
 }
 else{
     var fds = dhx.i18n.longDateFormatStr(start);
     var fde = dhx.i18n.longDateFormatStr(end);
     /*if not "all-day" event*/
     if(!(dhx.Date.datePart(start).valueOf()==start.valueOf()&&dhx.Date.datePart(end).valueOf()==end.valueOf())){
         fts = dhx.i18n.timeFormatStr(start)+" ";
         fte = dhx.i18n.timeFormatStr(end)+" ";
     }
     html += "<div class='event_text'>"+scheduler.locale.labels.label_from+" "+fts+fds+"</div>";
     html += "<div class='event_text'>"+scheduler.locale.labels.label_to+" "+fte+fde+"</div>";
 }
 if(obj.details&&obj.details!==""){
     html += "<div class='event_title'>"+scheduler.locale.labels.label_details+"</div>";
     html += "<div class='event_text'>"+obj.details+"</div>";
 }
 html += "</div>";
 return html;

};

	/*
	 * The template for events in Day view
	 */
	scheduler.templates.day_event = function(obj,type){
			var typeClass = setTypeClass(obj.type);
			//console.log('type 2nd parameter' + type);
			//console.log('type 2nd parameter' + type);
			var html = '<div style="background-color:' + typeClass +';">' + typeClass + '</div>';
			//var html = '<div style="padding:2px; background-color: ' + typeClass + '";><div class=''>'+obj.text+'</div>';
			if(obj.details){
				html += "<div class='my_day_event_details'>"+obj.details+"</div>";
			}
			html += "</div>";
			return html;
	};
		

	/*template for the list items in a 'List' view*/
	var previousDate;	
	scheduler.templates.event_title = function(obj,type){
			console.log('event title test');
			var html ="";
			var date = dhx.Date.datePart(obj.start_date);
			if(!previousDate||previousDate.valueOf()!=date.valueOf()){
				previousDate = date;
				html += "<div class='my_event_date"+((date.valueOf()==dhx.Date.datePart(new Date).valueOf())?" current":"")+"'><div>"+scheduler.templates.event_date(obj)+"</div></div>";
			}
			
			var time = scheduler.templates.event_time(obj);
			html += "<div style='height:35px;width:100%'><div class='my_event_time'>"+time+"</div>";
			html += "<div class='my_event_text'>"+(obj.text||"&nbsp;")+"</div></div>";
			return html;
	}
		



	/*template for calendar days in Month view*/
	scheduler.templates.calendar_event = function(date){
	console.log('month view');
	return "<div class='day_with_events'>"+date+"</div>"+"<div class='day_with_events_marker'></div>";
	};
		
 dhx.ready(function(){
	  //dhx.ui.fullScreen();
	  dhx.Touch.limit(true);
	
	  dhx.ui({
		  //xml_date:"%Y-%m-%d %H:%i",
		  container: "schedulerDiv", 
		  view: "scheduler",
		  id: "scheduler"
	  });
	  $$("scheduler").load("../my-api/event/?id=" + id, "json");
	
});

}

As I already wrote - we need a complete demo.

If there are conflicts with JQMobile that can not be solved, you can create scheduler in a separate page. When some button in page with JQMobile is clicked, you can navigate to the page with scheduler.

There page with scheduler may have additional toolbar with “back” button:

[code]dhx.ui({
rows: [
{view: “toolbar”, elements: [
{view: “button”, value: “Back”, width: 70, id: “scheduler_back”},
{}
]},
{
cols: [
{view: “scheduler”, id: “scheduler”}
]
}
]
});

$$(“scheduler_back”).attachEvent(“onItemClick”, function(){
// your code here to return to the jqMobile page
})[/code]