Question

我想在悬停事件上显示完整日历事件的下拉列表。有人可以帮我吗？

这是我目前的屏幕截图

我希望下拉列表位于我尝试过的z-index上的所有其他内容的顶部，但无法置于顶部。

我不想要工具提示，我只想要一个悬停事件的下拉列表。

我尝试将完整日历选项设置为的代码：

eventRender: function (eventObj, $element) {            
        //$element.popover({                
        //    title: eventObj.title,                
        //    content: function () {                                       
        //        return $scope.getToolTipData("","");
        //    },
        //    trigger: 'hover',
        //    placement: 'bottom',
        //    container: 'body'
        //});
        $element.addClass('dropdown');
        $element.append($scope.getToolTipData("","",eventObj.id));
    },
    eventMouseover: function (calEvent, jsEvent) {
        console.log(calEvent);
        $(this).css('z-index', 10000);            
    },
    eventMouseout: function (calEvent, jsEvent) {            
    }

函数getToolTipData（）返回下拉列表作为ul元素，它是：

<ul class="dropdown-menu tooltipevent" id="eventDropdown">
<li>
    <a href="#">
        <div class="media">
            <div class="media-left">
                <span class="icon icon-github icon-2x icon-fw"></span>
            </div>
            <div class="media-body">
                GitHub<br>
                <small>Clone with an SSH key from your GitHub settings.</small>
            </div>
        </div>
    </a>
</li>
<li>
    <a href="#">
        <div class="media">
            <div class="media-left">
                <span class="icon icon-bitbucket icon-2x icon-fw"></span>
            </div>
            <div class="media-body">
                Bitbucket<br>
                <small>Clone with an SSH key from your Bitbucket settings.</small>
            </div>
        </div>
    </a>
</li>
<li>
    <a href="#">
        <div class="media">
            <div class="media-left">
                <span class="icon icon-bitbucket icon-2x icon-fw"></span>
            </div>
            <div class="media-body">
                Bitbucket<br>
                <small>Clone with an SSH key from your Bitbucket settings.</small>
            </div>
        </div>
    </a>
</li>
</ul>

这是完整日历的样式更改，我如何将其悬停

.fc-event:hover .tooltipevent {                
    z-index: 10001 !important;
    display:block !important;               
}

当前，它仅显示在事件的顶部，而在当天的该单元格中仅显示在该单元格的顶部。

先谢谢了。

Answer 1

到2020年，我找到了解决方案。

下拉菜单位于下一行（周）下，因为下一行具有较高的z-index。如果您设置下拉菜单的z-index，则对下拉菜单不会造成影响，因为下拉菜单是行的嵌套。

以下是在eventRender中创建下拉列表的示例：

eventRender: function(info) {
        let element = $(info.el);

        element.find('.fc-content').attr("data-toggle", "dropdown");
        element.append('\
            <div class="dropdown-menu mt-2 mb-2">\
                <a class="dropdown-item" href="#"><i class="la la-bell"></i> Action</a>\
                <a class="dropdown-item" href="#"><i class="la la-cloud-upload"></i> Another action</a>\
                <a class="dropdown-item" href="#"><i class="la la-cog"></i> Something else</a>\
            </div>\
        ');

        element.on('show.bs.dropdown', function() {
            element.parent().parent().parent().parent().parent().parent().css('z-index', '60');
        });
        element.on('hide.bs.dropdown', function() {
            element.parent().parent().parent().parent().parent().parent().css('z-index', '');
        });
    },

仅使用下拉列表的“ show.bs.dropdown”事件，而不使用元素的click事件。因为此事件与下拉的点击事件发生冲突（导致元素点击事件仅触发一次）。

事件悬停时的完整日历下拉列表

1 个答案: