Hi Team,
I am having around 120+ events on Month tab and its taking too much time to load into safari & IE browser.
Could you please help me out on this issue?
Thanks a lot in advance!
Hello,
Just tested it locally with more than 200 events. Takes ~150ms to load and display them.
As I understand it takes much more in your case?
Is loading faster in FF and Chrome?
Can you please provide your scheduler.init code (configuration and so on)?
Best regards,
Ilya
Yes, it seems working ok in FF but its taking too much time to load the event data in IE & Safari browser.
Below is my code:
public function schedulerInit($usertype, $locale, $url, $loader_url) {
$url = $this->replaceHostInURL($url);
$loader_url = $this->replaceHostInURL($loader_url);
$settings = $this->settings;
if ($this->joomla == true) {
$user_postfix = '_j';
} else {
$user_postfix = '';
}
if (!isset($settings["access_".$usertype."View".$user_postfix])) {
$settings["access_".$usertype."View".$user_postfix] = "true";
$settings["access_".$usertype."Add".$user_postfix] = "false";
$settings["access_".$usertype."Edit".$user_postfix] = "false";
}
if ($this->settings['settings_debug'] == 'true') {
$query = "SELECT `".$this->fieldValue."` FROM ".$this->prefix.$this->table." WHERE `".$this->fieldName."`='scheduler_xml'";
$res = mysql_query($query, $this->connection);
$xml = mysql_result($res, 0, $this->fieldValue);
$this->addToLog($xml, $usertype);
}
if ($settings["access_".$usertype."View".$user_postfix] != 'true') {
return '';
}
/**
* Get all holidays data
*/
$scheduler = "<script type=\"text/javascript\" charset=\"utf-8\"> var holidays = new Array(); </script>";
$query = "SELECT * FROM jos_holidays";
$res = mysql_query($query, $this->connection);
while ($data = mysql_fetch_assoc($res)) {
$scheduler .= "<script type=\"text/javascript\" charset=\"utf-8\"> holidays.push(new Array('".$data['title']."', '".date("Y-m-d", strtotime($data['hdate']))."')); </script>";
}
/**
* Get all team members
*/
$scheduler .= "<script type=\"text/javascript\" charset=\"utf-8\"> var team_members_name = new Array(); </script>";
$query = "SELECT * FROM jos_team_members ORDER BY team_id";
$res = mysql_query($query, $this->connection);
while ($data = mysql_fetch_assoc($res)) {
$scheduler .= "<script type=\"text/javascript\" charset=\"utf-8\"> team_members_name.push(new Array('".$data['team_id']."','".$data['member_name']."')); </script>";
}
$scheduler .= "<script src=\"".$url."dhtmlxscheduler.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
$scheduler .= "<link rel=\"stylesheet\" href=\"".$url."dhtmlxscheduler_wp.css\" type=\"text/css\" title=\"no title\" charset=\"utf-8\">";
$scheduler .= "<link rel=\"stylesheet\" href=\"".$url."dhtmlxscheduler.css\" type=\"text/css\" title=\"no title\" charset=\"utf-8\">";
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_url.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
if (count($settings['units']) > 0) {
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_units.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
}
if (count($settings['timelines']) > 0) {
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_timeline.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
}
if (($settings["settings_posts"] == 'true')||(($settings["access_".$usertype."Add".$user_postfix] != 'true')&&($settings["access_".$usertype."Edit".$user_postfix] != 'true'))) {
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_readonly.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
$scheduler .= "<script type=\"text/javascript\" charset=\"utf-8\">var read_only_settings = true;</script>";
} else {
$scheduler .= "<script type=\"text/javascript\" charset=\"utf-8\">var read_only_settings = false;</script>";
}
if ($settings['settings_repeat'] == 'true') {
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_recurring.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
$scheduler .= "<link rel=\"stylesheet\" href=\"".$url."ext/dhtmlxscheduler_recurring.css\" type=\"text/css\" title=\"no title\" charset=\"utf-8\">";
}
if ($settings['settings_year'] == 'true') {
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_year_view.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
}
if ($settings['settings_agenda'] == 'true') {
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_agenda_view.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
}
if ($settings['settings_expand'] == 'true') {
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_expand.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
}
if ($settings['settings_collision'] == 'true') {
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_collision.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
}
if ($settings['settings_print'] == 'true') {
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_pdf.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
}
if ($settings['settings_minical'] == 'true') {
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_minical.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
}
//Add javascript for radio button
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_editors.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
/*$scheduler .= "<link rel=\"stylesheet\" href=\"ext/dhtmlxscheduler_ext.css\" type=\"text/css\" title=\"no title\" charset=\"utf-8\">";*/
//Add javascript for multiselect checkbox
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_multiselect.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
//Add javascript for my editor
$scheduler .= "<script src=\"".$url."ext/dhtmlxform.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
$scheduler .= "<script src=\"".$url."ext/dhtmlxscheduler_myeditor.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
//Jquery
$scheduler .= "<script src=\"".$url."ext/jquery.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
$scheduler .= "<script type=\"text/javascript\" charset=\"utf-8\">jQuery.noConflict();</script>";
//Add Tooltip files
$scheduler .= "<link rel=\"stylesheet\" href=\"".$url."tooltip.css\" type=\"text/css\" title=\"no title\" charset=\"utf-8\">";
if (strlen($locale) > 0) {
$scheduler .= "<script src=\"".$url."sources/locale_".$locale.".js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
if ($settings['settings_repeat'] == 'true') {
$scheduler .= "<script src=\"".$url."sources/locale_recurring_".$locale.".js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
}
}
$scheduler .= "<style>".$settings['customfieldsCSS']."</style>";
$scheduler .= "<script type=\"text/javascript\" charset=\"utf-8\">";
$scheduler .= "scheduler.config.details_on_create=true;";
$scheduler .= "scheduler.config.details_on_dblclick=true;";
$scheduler .= "scheduler.config.full_day = true;";
$scheduler .= "scheduler.config.default_date = \"".$settings['templates_defaultdate']."\";";
$scheduler .= "scheduler.config.month_date = \"".$settings['templates_monthdate']."\";";
$scheduler .= "scheduler.config.week_date = \"".$settings['templates_weekdate']."\";";
$scheduler .= "scheduler.config.day_date = \"".$settings['templates_daydate']."\";";
$scheduler .= "scheduler.config.hour_date = \"".$settings['templates_hourdate']."\";";
$scheduler .= "scheduler.config.month_day = \"".$settings['templates_monthday']."\";";
$scheduler .= "scheduler.config.api_date = \"%Y-%m-%d %H:%i:%s\";";
$scheduler .= "scheduler.config.xml_date = \"%Y-%m-%d %H:%i:%s\";";
$scheduler .= "scheduler.config.time_step = ".$settings['templates_minmin'].";";
$scheduler .= "scheduler.config.hour_size_px = ".$settings['templates_hourheight'].";";
$scheduler .= "scheduler.config.first_hour = ".$settings['templates_starthour'].";";
$scheduler .= "scheduler.config.last_hour = ".$settings['templates_endhour'].";";
$scheduler .= "scheduler.config.agenda_start = new Date();";
$scheduler .= "scheduler.config.agenda_end = scheduler.date.add(new Date(), ".$settings['templates_agendatime'].", \"day\");";
$scheduler .= "scheduler.templates.event_text=function(start,end,event){ ".htmlspecialchars_decode($settings['templates_eventtext'])." };";
$scheduler .= "scheduler.templates.event_header=function(start,end,event){ ".htmlspecialchars_decode($settings['templates_eventheader'])." };";
$scheduler .= "scheduler.templates.event_bar_text=function(start,end,event){ ".htmlspecialchars_decode($settings['templates_eventbartext'])." };";
if ($settings['settings_firstday'] == 'true') {
$scheduler .= "scheduler.config.start_on_monday = false;";
} else {
$scheduler .= "scheduler.config.start_on_monday = true;";
}
if ($settings['settings_multiday'] == 'true') {
$scheduler .= "scheduler.config.multi_day = true;";
} else {
$scheduler .= "scheduler.config.multi_day = false;";
}
if ($settings['settings_singleclick'] == 'true') {
$scheduler .= "(function(){
var old = scheduler._click.dhx_cal_data;
scheduler._click.dhx_cal_data=function(e){
var trg = e?e.target:event.srcElement;
var id = scheduler._locate_event(trg);
if (!id && !scheduler._lightbox_id) {
scheduler._on_dbl_click(e||event);
} else {
old.call(scheduler, e)
}
}
})();\n";
}
if ($settings["settings_posts"] == 'true'){
$scheduler .= "scheduler.config.dblclick_create = false;
scheduler.config.drag_create= false;
scheduler.config.readonly_form = true;
scheduler.locale.labels.confirm_recurring = '';
scheduler.attachEvent('onClick',function(id){ scheduler.showLightbox(id); return false; });
scheduler.attachEvent('onBeforeDrag',function(){return false;});";
} else {
if ($settings["access_".$usertype."Add".$user_postfix] != 'true') {
$scheduler .= "scheduler.config.dblclick_create = false;
scheduler.config.drag_create= false;";
}
if ($settings["access_".$usertype."Edit".$user_postfix] != 'true') {
$scheduler .= "scheduler.attachEvent('onClick',function(){return false;});
scheduler.attachEvent('onDblClick',function(){return false;});
scheduler.attachEvent('onBeforeDrag',function(a){ if (a == null) { return true; } else { return false;}});";
}
if (($settings["access_".$usertype."Add".$user_postfix] != 'true')&&($settings["access_".$usertype."Edit".$user_postfix] != 'true')) {
$scheduler .= "scheduler.config.readonly_form = true;
scheduler.locale.labels.confirm_recurring = '';
scheduler.config.drag_create = false;
scheduler.config.dblclick_create = false;
scheduler.attachEvent('onClick',function(id){ scheduler.showLightbox(id); return false; });
scheduler.attachEvent('onBeforeDrag',function(){return false;});";
}
}
$scheduler .= $settings['customfieldsNames'];
$scheduler .= $settings['customfields'];
$scheduler .= $settings['customfieldsTemplate'];
$defaultmode = $settings['settings_defaultmode'];
$cfs = Array();
foreach ($settings['units'] as $k => $v) {
$scheduler .= $v;
$kl = strtolower($k);
$settings['settings_'.$kl] = 'true';
$cfs[] = $kl;
}
foreach ($settings['timelines'] as $k => $v) {
$scheduler .= $v;
$kl = strtolower($k);
$settings['settings_'.$kl] = 'true';
$cfs[] = $kl;
}
$modesNum = false;
if ($settings['settings_'.$defaultmode] == 'false') {
$modes = Array('day', 'week', 'month', 'agenda', 'view');
foreach ($cfs as $v) {
$modes[] = $v;
}
for ($i = 0; $i < count($modes); $i++) {
if ($settings['settings_'.$modes[$i]] == 'true') {
$defaultmode = $modes[$i];
$modesNum = true;
break;
}
}
if ($modesNum == false) {
return '';
}
}
@$include_content = file_get_contents($url.$this->scheduler_include_file);
if ($include_content) {
$scheduler .= "</script>";
$scheduler .= $include_content;
$scheduler .= "<script type=\"text/javascript\" charset=\"utf-8\">";
}
$scheduler .= "window.onload = function init() {";
$scheduler .= "
scheduler.init(\"scheduler_here\",null,\"".$defaultmode."\");
scheduler.load(\"".$loader_url."\"+scheduler.uid());
var dp = new dataProcessor(\"".$loader_url."\"+scheduler.uid());
dp.init(scheduler);";
/**
* Validation code for event name
*/
$scheduler .= "scheduler.attachEvent(\"onEventSave\",function(id,data){
if (!data.text || data.text == 'New event') {
alert(\"Please mention event name!\");
return false;
}
return true;
});";
if ($settings["privatemode"] == "ext") {
$scheduler .= "scheduler.attachEvent('onClick', check_user);";
$scheduler .= "scheduler.attachEvent('onDblClick', check_user);";
$scheduler .= "scheduler.attachEvent('onBeforeDrag', check_user);";
$scheduler .= "function check_user(event_id, native_event_object){
if (event_id == null) {
return true;
}
var event = scheduler.getEvent(event_id);
if (event.user == '".$this->userid."') {
return true;
} else {
return false;
}
}";
}
$scheduler .= "dp.attachEvent('onAfterUpdate', after_update);";
$scheduler .= "function after_update(sid, action, tid, xml_node) {
var userid = xml_node.getAttribute('user');
if (action != 'deleted') {
var event = scheduler.getEvent(sid);
event.user = userid;
}
}";
/**
* code to set event color
*/
$query = 'SELECT * FROM jos_event_color';
$records = mysql_query($query);
$data = array();
if (mysql_num_rows($records)) {
while ($row = mysql_fetch_array($records)) {
$colors = $this->rgb2hex2rgb($row['color_code']);
$row['r'] = $colors['r'];
$row['g'] = $colors['g'];
$row['b'] = $colors['b'];
$data[$row['catid']] = $row;
}
}
$scheduler .= "var data = new Array(".count($data).");";
foreach ($data as $key => $val) {
list($first, $second) = explode('_', $key);
$scheduler .= "data[".$second."] = new Array();";
$scheduler .= "data[".$second."][0] = \"". $val['r'] .", ".$val['g'] .", ". $val['b'] ."\";";
$scheduler .= "data[".$second."][1] = \"". $val['text_color'] ."\";";
}
$scheduler .= "scheduler.attachEvent(\"onEventLoading\", add_color);";
$scheduler .= "function add_color(ev){
ev.color = Math.floor(Math.random()*16777216);
var rule = \".dhx_cal_event.color_\"+ev.color+\" div\";
var rule_multiday = \".dhx_cal_event_line.color_\"+ev.color+\" \";
var rule_fixedtime = \".dhx_cal_event_clear.color_\"+ev.color+\" \";
if (ev.category != '') {
var cat_name = ev.category;
cval = cat_name.split('_');
var rule_text = \"background-color:rgb(\"+data[cval[1]][0]+\") !important; color:\"+data[cval[1]][1]+\" !important; \";
}
if (_isIE) {
document.styleSheets[0].addRule(rule, rule_text);
document.styleSheets[0].addRule(rule_multiday, rule_text);
document.styleSheets[0].addRule(rule_fixedtime, rule_text);
} else {
document.styleSheets[0].insertRule(rule+\" { \"+rule_text+\" } \", 0);
document.styleSheets[0].insertRule(rule_multiday+\" { \"+rule_text+\" } \", 0);
document.styleSheets[0].insertRule(rule_fixedtime+\" { \"+rule_text+\" } \", 0);
}
return true;
}
scheduler.templates.event_class = function(start,end,event){
return \"color_\"+event.color;
};";
if ($settings['settings_debug'] == 'true') {
$scheduler .= "dhtmlxError.catchError(\"LoadXML\",function(a,b,c){
var html = \"The text below, contains details about of server side problem.<hr><pre style=\\\"font-size: 8pt;\\\">\"+ c[0].responseText + \"</pre>\";
document.body.innerHTML = html;
})";
}
$scheduler .= "};";
if ($settings['settings_minical'] == 'true') {
$scheduler .= "function show_minical(){
if (scheduler.isCalendarVisible())
scheduler.destroyCalendar();
else
scheduler.renderCalendar({
position:\"dhx_minical_icon\",
date:scheduler._date,
navigation:true,
handler:function(date,calendar){
scheduler.setCurrentView(date);
scheduler.destroyCalendar()
}
});
}";
}
$scheduler .= "</script>
<div style='font-family:Arial,Helvetica,sans-serif; margin-bottom:5px; margin-top:5px; color:black;'>
If you are having any issues creating multiple events on the 'month' tab just switch to the 'week' or 'day' view tab!
</div>
<div id=\"scheduler_here\" class=\"dhx_cal_container\" style='width:".$settings['settings_width']."; height:".$settings['settings_height'].";'>
<div class=\"dhx_cal_navline\">
<div class=\"dhx_cal_prev_button\"> </div>
<div class=\"dhx_cal_next_button\"> </div>
<div class=\"dhx_cal_today_button\"></div>
<div class=\"dhx_cal_date\"></div>";
if ($settings['settings_minical'] == 'true') {
$scheduler .= "<div class=\"dhx_minical_icon\" id=\"dhx_minical_icon\" onclick=\"show_minical()\"> </div>";
}
$modes = array('settings_day', 'settings_week', 'settings_month', 'settings_year', 'settings_agenda');
foreach ($settings['units'] as $k => $v) {
$modes[] = 'settings_'.$k;
$settings['settings_'.$k] = 'true';
}
foreach ($settings['timelines'] as $k => $v) {
$modes[] = 'settings_'.$k;
$settings['settings_'.$k] = 'true';
}
$modesNumber = 0;
for ($i = 0; $i < count($modes); $i++) {
if ($settings[$modes[$i]] == 'true') {
$modesNumber++;
}
}
for ($i = 0; $i < count($modes); $i++) {
if ($settings[$modes[$i]] == 'true') {
$modesNumber--;
$name = substr($modes[$i], 9);
$scheduler .= "<div class=\"dhx_cal_tab\" name=\"".$name."_tab\" style=\"right:".(20 + 64*$modesNumber)."px;\"></div>";
}
}
$scheduler .= "
</div>
<div class=\"dhx_cal_header\">
</div>
<div class=\"dhx_cal_data\">
</div>
<div id=\"dhtmltooltip\"></div>
</div>";
$scheduler .= "<script src=\"".$url."tooltip.js\" type=\"text/javascript\" charset=\"utf-8\"></script>";
return $scheduler;
}Hello,
For the test purposes try commenting out following line
$scheduler .= "scheduler.attachEvent(\"onEventLoading\", add_color);";So no function will be called for each and every event, does it improve loading time for IE and Safari?
Best regards,
Ilya
Yes, its affect the speed. now getting the event data quite fast comparatively but i need to implement he color code as well.
Do you have any idea to implement the color code and my event data also should get loaded fast?
Thanks a lot for your support!!!
Hello,
Can you please simply describe what are you trying to do with the colors? What is defining colors for events (some type or category), how many different colors there will be?
Right now _every event is creating new CSS class even if (most likely) it actually has the same color as another event and could use it’s CSS class.
So you need to generate CSS declaration beforehand (and preferably not using add/insert rule but as simple text with color as a variable) and then in ‘add_color’ function according to some logic (on event types or categories) assign property ‘color’ for later use in ‘event_class’ template.
Best regards,
Ilya
Actually, there are category list and i have implemented the colors according to category items.
So can you please give me some idea about implementation about what are you taking?
Hello,
Let’s say you have 3 categories: math (id=1), science (id=2), literature (id=3).
You need to add (simply echo or add to the $scheduler variable in your case) 3 CSS classes for those categories:
.category_1 {
color: green;
}
.category_2 {
color: red;
}
.category_3 {
color: blue;
}
Now you don’t event need to do anything in the onEventLoad event, only configure event_class template:
scheduler.templates.event_class = function(start, end, event){
if(event.category)
return ("category_"+event.category); // category_1, category_2 and so on
return ""; // default, there was no category_id
}
Best regards,
Ilya
Thanks a lot for your help.
In my case category color also are coming from DB dynamically. That’s why i have implemented it on onload event but i am also feeling that we can reduce the number of calling to function.
Hello,
That’s fine, you can loop through some array with categories id and colors:
.category_{$categories[$i]['category_id']} \{
color: {$categories[$i]['category_color']};
\}
which will result in the same
.category_1 {
color: green;
}
Best regards,
Ilya