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