2017-08-18 3 views
0

J'ai intégré le calendrier des événements DHTMLX à mon projet Java. Je souhaite afficher les détails de l'événement sur l'événement mouseover. J'ai essayé d'appeler dhtmlxscheduler_tooltip.js mais ça ne fonctionne pas.Comment rendre onmouse sur le calendrier des événements DHTMLX?

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

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

 
/* 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) { 
 
\t 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); 
 
};

Répondre

0

Ajout ext/dhtmlxscheduler_tooltip.js extension à la page après dhtmlxscheudler.js devrait être suffisant pour afficher les info-bulles sur les événements. Vérifiez cet extrait:

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

 
scheduler.templates.tooltip_text = function(start, end, event) { 
 
\t 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([ 
 
\t { start_date: "2017-04-03 01:00", end_date: "2017-04-03 18:00", text: "Task A-12458" }, 
 
\t { 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;'> 
 
\t <div class="dhx_cal_navline"> 
 
\t \t <div class="dhx_cal_prev_button">&nbsp;</div> 
 
\t \t <div class="dhx_cal_next_button">&nbsp;</div> 
 
\t \t <div class="dhx_cal_today_button"></div> 
 
\t \t <div class="dhx_cal_date"></div> 
 
\t \t <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div> 
 
\t \t <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div> 
 
\t \t <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div> 
 
\t </div> 
 
\t <div class="dhx_cal_header"> 
 
\t </div> 
 
\t <div class="dhx_cal_data"> 
 
\t </div> 
 
</div>