How to make onmouse over on DHTMLX event calendar?

Question

I have integrated the DHTMLX event calendar to my Java project. I want to show event details on mouseover event. I have tried calling dhtmlxscheduler_tooltip.js but it's not working.

scheduler.attachEvent("onMouseMove", function(event_id, e){ // (scheduler event_id, browser event)
 var ev = e||window.event;
 var target = ev.target||ev.srcElement;

 if (event_id || dhtmlXTooltip.isTooltip(target)) { // if we are over event or tooltip
  var event = scheduler.getEvent(event_id) || scheduler.getEvent(dhtmlXTooltip.tooltip.event_id);
  dhtmlXTooltip.tooltip.event_id = event.id;
  var text = scheduler.templates.tooltip_text(event.start_date, event.end_date, event);
  
  if (_isIE) { //make a copy of event, will be used in timed call
   var evt = document.createEventObject(ev);
  }
  
  dhtmlXTooltip.delay(dhtmlXTooltip.show, dhtmlXTooltip, [evt||ev, text]); // showing tooltip
 } else {
  dhtmlXTooltip.delay(dhtmlXTooltip.hide, dhtmlXTooltip, []);
 }
});

/* Could be redifined */
scheduler.templates.tooltip_date_format=scheduler.date.date_to_str("%Y-%m-%d %H:%i"); 

scheduler.templates.tooltip_text = function(start,end,event) {
 return "<b>Event:</b> "+event.text+"<br/><b>Start date:</b> "+scheduler.templates.tooltip_date_format(start)+"<br/><b>End date:</b> "+scheduler.templates.tooltip_date_format(end);
};

score 1 · Accepted Answer · answered Aug 25 '17 at 08:55

1

Adding ext/dhtmlxscheduler_tooltip.js extension to the page after dhtmlxscheudler.js should be enough to display tooltips on events. Check this snippet:

scheduler.config.xml_date = "%Y-%m-%d %H:%i";

scheduler.templates.tooltip_text = function(start, end, event) {
 return "<b>Event:</b> " + 
    event.text + 
    "<br/><b>Start date:</b> " + 
    scheduler.templates.tooltip_date_format(start) + 
    "<br/><b>End date:</b> " + 
    scheduler.templates.tooltip_date_format(end);
};

scheduler.init('scheduler_here', new Date(2017, 3, 3), "week");

scheduler.parse([
 { start_date: "2017-04-03 01:00", end_date: "2017-04-03 18:00", text: "Task A-12458" },
 { start_date: "2017-04-04 01:00", end_date: "2017-04-04 12:00", text: "Task A-89411" }
], "json");

<script src="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js"></script>
<script src="https://cdn.dhtmlx.com/scheduler/edge/ext/dhtmlxscheduler_tooltip.js"></script>
<link rel="stylesheet" href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.css">

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100vh;'>
 <div class="dhx_cal_navline">
  <div class="dhx_cal_prev_button">&nbsp;</div>
  <div class="dhx_cal_next_button">&nbsp;</div>
  <div class="dhx_cal_today_button"></div>
  <div class="dhx_cal_date"></div>
  <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
  <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
  <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
 </div>
 <div class="dhx_cal_header">
 </div>
 <div class="dhx_cal_data">
 </div>
</div>

answered Aug 25 '17 at 08:55

Alex Klimenkov

956
1
5
8

I am using dhtmlx-scheduler with React, and i want to show an icon or image(png, jpg, any format) in tool-tip..any pointers will he helpful – sk215 Jun 09 '20 at 05:21
@sk215 Content of the tooltip is defined by the template function https://docs.dhtmlx.com/scheduler/api__scheduler_tooltip_text_template.html You can redefine the template and put any HTML in there, including img tags or divs with background images. – Alex Klimenkov Jun 09 '20 at 09:29
Hi Alex, Thanks for your response I tried as below scheduler.templates.tooltip_text=(start, end, ev)=>{ return "type: "+ " } but, it does not show the image. I also tried various image formats(gif, jpg, icon,) but none worked. I also tried with including import {FaGavel} from 'react-icons/fa' and giivng FaGavel in the tooltip text, this also didnt work for me I want somehow to show an image, but so far the otions are tried didnt work. I also tried as "onMouseMove" event, there too the image does not appear on the tooltip – sk215 Jun 10 '20 at 01:52
Hi! I'd suspect the incorrect image path. Can you see the image if you enter the image url directly in the browser? If yes - try copying the complete img url from the browser (including `http://..`) and use it for ` – Alex Klimenkov Jun 11 '20 at 12:53
If not, you'll need to inspect the tooltip element in order to find what's wrong with it, maybe the img tag is malformed. In order to prevent the tooltip from disappearing when you move the mouse into the 'Elements' tab of dev tools, you can do a small trick: hover the mouse until a tooltip appears, right-click to open a context menu, move the mouse over the menu into the dev tools panel: https://recordit.co/YIvateoaQ6 . Then you could check the DOM structure and styles of the tooltip and the img element, this should give a clue on what's wrong – Alex Klimenkov Jun 11 '20 at 12:54
Hi Alex, I am able to show the icon on tooltip. I was giving wrong image path(enclosed the path in quotes). Is there a way to show an html element in the tooltip, for example as below scheduler.templates.tooltip_text=(start, end, ev)=>{ const tooltipText=(hello); return tooltipText; } When i do as above, i get the following in the tooltip [object Object]. Thanks a lot for your reply.. – sk215 Jun 15 '20 at 00:20
Hi! there are no restrictions for html in templates. It looks like your template function returns an object instead of string. You can put 'debugger;' statement into your template and open the browser console (F12). It will stop the code execution at the 'debugger' and you'll be able to trace code execution step by step and see the output values. E.g. scheduler.templates.tooltip_text = (start, end, ev)=>{ debugger; const tooltipText=('hello'); return tooltipText; } – Alex Klimenkov Jun 17 '20 at 17:41

How to make onmouse over on DHTMLX event calendar?

1 Answers1