如何在 DHTMLX 事件日历上使鼠标悬停？

Question

我已将 DHTMLX 事件日历集成到我的 Java 项目中。我想显示有关鼠标悬停事件的事件详细信息。我试过调用 dhtmlxscheduler_tooltip.js 但它不起作用。

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);
};

Answer 1

在页面 dhtmlxscheudler.js 之后添加 ext/dhtmlxscheduler_tooltip.js 扩展应该足以显示工具提示事件。检查此代码段：

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>

如何在 DHTMLX 事件日历上使鼠标悬停？

How to make onmouse over on DHTMLX event calendar?

dhtmlx

dhtmlx-scheduler