• 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

  • 相关阅读:
    L1->排列组合和古典概型
    HIT2019秋计算机网络->传输层一些总结
    HIT2019秋计算机网络->TCP连接3次握手
    HIT2019春软件构造->大文件读写方法NIO
    HIT2019春软件构造->重写hashCode()方法
    HIT2019春软件构造->正则表达式语法
    HIT2019春软件构造->Git&Github学习笔记
    YII2视图间共享数据
    Yii2 选择布局
    Yii2视图 使用$this->context获取当前的Module、Controller(控制器)、Action等
  • 原文地址:https://www.cnblogs.com/sese/p/11414106.html
Copyright © 2020-2023  润新知