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:$('<div>test</div>'), trigger: 'hover', placement: 'top', container: $el, });

效果图：

嗯，很完美。