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) {

 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