fullcalendar + qTip2 display event details

fullcalendar is a very good calendar plugin. qTip2 is a powerful tool tips. Before talking about the following features, we need some understanding of fullcalendar and qTip2 can click directly posted two addresses below:

fullcalendar

qTip2

I now need to implement the function of the mouse is put up events, showcase event details, we can make use of fullcalendar of eventRender methods and qTips2 achieve this effect.

The effect is as follows:

Specific implementation steps:

1. Create a div, for release event details;

<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 assignment, and shows the floating layer:

var calendar = new FullCalendar.Calendar(calendarEl, {

/ *** 
* here, skip the configuration calendar

 */

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') // To prompt the content is above the that created a floating layer 
        }, 
        position: { 
            My: 'Top left', // position of the arrow 
            AT: 'Top right', // position the prompt box 
        }, 
        show: { 
            Solo: to true  // ensure only displays a prompt 
        }, 
        hide: { 
            Fixed: to true , // operable balloon 
            Delay: 600, //How long after hide balloon 
            Event: 'MouseLeave' , 
        }, 
        style: { 
            classes: 'qTip-Event-Detail' // elastic layer style custom 
        } 
    }); 
},

});

Description:

$ .AddZero method is my own definition, here is not expanded, the 0 is filled;
eventTitleArray = eventTitle.split ( ','); according to the actual situation changes, I project which is based on data "," separate.

3. Write-style blanket, please write according to your own situation.

.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;
}

Reference documents:

bootstrap-popover-get-stuck-in-fullcalendar

fullcalendar + qTip2 display event details

Guess you like