鼠标悬停而非eventRender上的Fullcalendar Qtip

Fullcalendar Qtip on mouseover instead of eventRender

本文关键字:上的 Fullcalendar Qtip eventRender 悬停 鼠标      更新时间:2023-09-26

我在将Qtip附加到eventMousever事件而不是fullcalendar中的eventRender事件时遇到问题。

我之所以要这样做,是因为拥有数据的服务器在另一个国家/地区,延迟导致在加载日历之前预取所有qtip文本的时间过长(最多8秒)。我编写了返回所需qtip信息的ajax函数,但问题是eventRender函数在qtip信息出现之前运行。因此,在我看来,最合乎逻辑的解决方案是在eventMouseover事件中附加qtip(通过ajax发送qtip文本请求,然后将qtip附加到元素),但我找不到如何从eventMouseover事件中访问事件元素。(我已经尝试将qtip附加到mouseover事件的$(this),但什么也没发生(也没有错误)。

我也尝试了另一种方法。加载日历后,我在后台获取所有工具提示,然后尝试.fullCalendar("rerenderEvents"),但这并没有按预期工作->例如,除非您更改视图/更改月份,否则新的工具提示将不会出现,只有在那时,新工具提示(在后台获取)才会出现,所以我认为rerenderEvent不起作用。

关于我如何解决这个问题有什么建议吗?

事件渲染的代码(有效):

eventRender: function (event, element) {
  if (event.qtip_id) {
    element.qtip({    
      content: {    
        title: $('#' + event.qtip_title_id).html(),
        text: $('#' + event.qtip_id).html()
      },
      position: { 
        my: 'bottom center',
        at: 'top center',
        //target:  'mouse',
        adjust: { mouse: false },
        viewport: $(window),
      },
      style: {
        classes: 'bigger_font qtip-light qtip-shadow'
      },
      show:  {
        delay: 500
      },
      hide:  {
        fixed: true
      }
    });
  }

呈现日历后,在后台获取所有工具提示的代码:

for (i = 0; i<all_events.length; i++) {
  if (all_events[i].qtip_id) {
    //alert(all_events[i].title); 
    myevent = {
      title: all_events[i].title,
      url: all_events[i].url,
      color: all_events[i].color,
      form_id: all_events[i].form_id,
      priority: all_events[i].priority,
      qtip_id: all_events[i].qtip_id,
      qtip_title_id: all_events[i].qtip_title_id,
      qtip_dealer: all_events[i].qtip_dealer,
      qtip_country_id: all_events[i].qtip_country_id,
      qtip_customer_id: all_events[i].qtip_customer_id,
      qtip_customer_name: all_events[i].qtip_customer_name,
      qtip_id: all_events[i].qtip_id,
      qtip_id_id: all_events[i].qtip_id_id
    };
    $.ajax({
      type: 'POST',
      url: 'ajax/calendar_generate_qtip.php',
      data: myevent,
      dataType: 'html',
      success: function(data) {      
        $('#qtip_holder').html($('#qtip_holder').html() + data);
      }
    }).fail(function() {
    });
  }
}
$('#calendar').fullCalendar('rerenderEvents');

所以我的问题是:有可能在整个日历中的eventMouseover事件中创建和显示qtip吗?(由于eventMouseover无法访问事件的元素,至少我看不到它)。

感谢您的阅读。

附言:我为我蹩脚的英语道歉。

如果您想访问eventMouseover上的事件元素,这是可能的。

从FullCalendar文档中,它清楚地表明,在eventMouseover的回调函数中,"this"被设置为事件的<div>元素,$(this)提供了与您在eventRender的回调中获得的相同的元素对象。http://fullcalendar.io/docs/mouse/eventMouseover/

你提到

(我尝试将qtip附加到mouseover事件的$(this),但什么也没发生

但我相信这是正常的鼠标悬停事件,而不是回调。