fullcalendar 是一个很优秀的日历插件。qTip2 是一个强大的提示工具。在讲下面的功能之前,需要对fullcalendar 和 qTip2 有些了解,可直接点击下面贴出的2个地址:
我现在需要实现的功能就是鼠标放到事件上去,展示事件详情,我们可以借助 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; }
参考文档: