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