FullCalendar使用踩坑之popover

FullCalendar是一个强大的jquery日历插件，可以实现很多的常用的日历功能。不过虽然英文文档很强大，也有很多热心的大神将英文文档翻译成了中文文档，但是文档中还是有一些遗漏的地方。

这里就分享一下我使用FullCalendar日历popover所学到的东西。由于event事件标签太小，所以需要用到hover显示更多的信息，最开始使用了eventHover和eventMouseOut方法，后来发现有更好的popover方法。如图所示：

代码也很简单：

  $('#calendar').fullCalendar({
    defaultView: 'month',
    defaultDate: '2018-04-12',

    eventRender: function(eventObj, $el) {
      $el.popover({
        title: eventObj.title,
        content: eventObj.description,
        trigger: 'hover',
        placement: 'top',
        container: 'body'
      });
    },

然后我有了下一个需求，我希望popover能插入html，这样我就可以通过popover里面的按钮来实现修改和删除event事件。

但是目前的popover一旦鼠标移开event就消失，而且content也只能插入文本。

所以第一步，肯定就是修改container了，将container的“body”改为$el,然后看效果，咦，怎么title和content都看不见了？看了半天发现原来由于更改了父元素导致title和content的颜色融入背景色了。。。。设置css中.popover颜色为black!important就可以了。

然后是第二步，如何插入html呢？官网也没有找到相关的资料，不过stackoverflow上又找到了，通过设置html为true,然后就可以在content中放置html了。代码如下：

$el.popover({
    title: eventObj.title,
    html:true,
    content:$('
test
'),
    trigger: 'hover',
    placement: 'top',
    container: $el,
});

效果图：

嗯，很完美。

转载于:https://www.cnblogs.com/xianxiaobo/p/9223351.html