fullcalendar + qTip2显示事件详情

fullcalendar 是一个很优秀的日历插件。qTip2 是一个强大的提示工具。在讲下面的功能以前，须要对fullcalendar 和 qTip2 有些了解，可直接点击下面贴出的2个地址：

fullcalendar

qTip2

我如今须要实现的功能就是鼠标放到事件上去，展现事件详情，咱们能够借助 fullcalendar的 eventRender 方法 和 qTips2 实现这个效果。

效果图以下：

 

 

具体实现步骤：

1.建立一个div，用于放事件详情；

<div class="event-detail-wrap" id="event-detail">
    <div class="detail-info-list">
        <div class="js_event_detail_time"></div>
        <div class="js_event_detail_team"></div>
        <div class="js_event_detail_subject"></div>
        <div class="js_event_detail_teacher"></div>
    </div>

    <div class="action-group">
        <a href="#">日程详情</a>
        <a href="#">复制</a>
        <a href="#">编辑</a>
        <a href="#">删除</a>
    </div>
</div>

 

2.经过eventRender + qTip赋值，并显示浮层：

var calendar = new FullCalendar.Calendar(calendarEl, {

/***
 *这里略过日历的相关配置

 */

eventRender: function (info) {

var eventStart = $.addZero(new Date(info.event.start).getHours())+':'+ $.addZero(new Date(info.event.start).getMinutes()), eventEnd =  $.addZero(new Date(info.event.end).getHours())+':'+  $.addZero(new Date(info.event.end).getMinutes()), eventTitle = info.event.title, eventTitleArray = eventTitle.split('，'); $(".js_event_detail_time").text("时间：" +eventStart +"-" + eventEnd) $(".js_event_detail_team").text(eventTitleArray[0]) $(".js_event_detail_subject").text(eventTitleArray[1]) $(".js_event_detail_teacher").text(eventTitleArray[2]) $(info.el).qtip({ content: { text: $('#event-detail') //要提示的内容，就是上面建立的那个浮层
 }, position: { my: 'left top', //箭头的位置
            at: 'top right',//提示框的位置
 }, show: { solo: true //保证每次只显示一个提示框
 }, hide: { fixed: true, //可以操做提示框
            delay: 600,//多久以后隐藏提示框
            event:' mouseleave', }, style: { classes: 'qtip-event-detail' //自定义的弹层样式
 } }); },

});

说明：

• $.addZero 是我本身定义的方法，这里就不展开的，就是把0补齐；

• eventTitleArray = eventTitle.split('，');请根据实际状况修改，我项目里面的数据是以“，”分开的。

 

3.写浮层的样式，请根据你本身的状况来写。

.qtip-event-detail {
    width: 255px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    border-top:3px solid #2878f0;
    padding:2px;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
}
.qtip-event-detail .qtip-tip{
    top: 6px !important;
}
.event-detail-wrap{
    display: none;
    font-size: 14px;
    line-height: 26px;
    color: #666
}
.detail-info-list{
    color: #999;
}
.event-detail-wrap .action-group{
    border-top:1px solid #e0e0e0;
    padding-top:8px;
    margin-top: 8px;
    text-align: right;
}
.event-detail-wrap .action-group a{
    color: #2878f0;
    text-decoration: none;
    display: inline-block;
    margin-left: 6px;
}

 

参考文档：

bootstrap-popover-get-stuck-in-fullcalendar