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||" ")+"</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");
});
}