如何自定义全日历事件的标题/工具提示？

Question

所以我找到了一些在悬停完整日历事件上显示标题的解决方案，但它看起来很丑。有什么办法可以定制吗？

这是我该部分的代码：

function initialize() {//.. 
        var $element = $('#calendar').fullCalendar({
eventRender: function(event, element, view) {
                element.find('span.fc-title').attr('data-toggle', 'tooltip');
                element.find('span.fc-title').attr('title', event.title);
            }}

但它只显示基本标题，我将插入它的图像。预先感谢您的任何建议，如果您需要更多代码，我可以提供。

Answer 1

eventMouseover: function(event, jsEvent) {
            var tooltip = '<div class="calendarTooltip" style="padding-left:10px; text-align: center;width:185px;height:35px;background:#126da2; border-radius: 8px; color: white;position:absolute;z-index:10001;">' + event.title + '</div>';
            var $tool = $(tooltip).appendTo('body');
            $(this).mouseover(function(e) {
                $(this).css('z-index', 10000);
                        $tool.fadeIn('1000');
                        $tool.fadeTo('10', 1.9);
            }).mousemove(function(e) {
                $tool.css('top', e.pageY + 10);
                $tool.css('left', e.pageX + 20);
            });
            },
            eventMouseout: function(event, jsEvent) {
            $(this).css('z-index', 8);
            $('.calendarTooltip').remove();
            },

这是我制作的工作解决方案，效果很好。谢谢大家

Answer 2

你可以尝试这样的事情 - element.find('span.fc-title').append(

"<img src = 'img link' />"

);

或者尝试- element.find('span.fc-title').innerHTML +=

"<img src = 'img link' />"

;

Answer 3

我有 fullcalendar v2 库，事件调用是 eventContent:function(arg)。

eventContent:function(arg){
 let arrayOfDomNodes = [];

let colorEvent = document.createElement('div');
      colorEvent.style.cssText  = 'border-color:'+arg.borderColor+';';
      colorEvent.classList = "fc-daygrid-event-dot";

      let imgEventWrap = document.createElement('div');
      if(arg.event.extendedProps.isConference==1)
      {
        let imgEvent = '<i class="fas fa-microphone-lines"></i>';
        imgEventWrap.classList = "fc-event-img";
        imgEventWrap.innerHTML = imgEvent;
      }
      let timeEvent = document.createElement('div');
      timeEvent.innerHTML = arg.timeText;
      timeEvent.classList = "fc-event-time";

      // title event
      let titleEvent = document.createElement('div');
      titleEvent.innerHTML = arg.event.title;
      titleEvent.setAttribute('data-toggle','tooltip');
      titleEvent.setAttribute('title',arg.timeText+' '+arg.event.title);
      titleEvent.setAttribute('data-placement','right');
      titleEvent.classList = "fc-event-title";

      arrayOfDomNodes = [colorEvent,imgEventWrap,timeEvent,titleEvent];

      return { domNodes: arrayOfDomNodes }
}

这是我制作的工作解决方案，效果很好。谢谢大家