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

我想在悬停事件时显示完整日历事件的下拉列表。有人能帮我吗

这是我目前正在拍摄的屏幕截图

我想把下拉列表放在我尝试过的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>

目前，它只显示在事件的顶部和当天的单元格内，您希望它显示在该单元格的顶部

---

提前谢谢

到2020年，我找到了解决办法

下拉菜单位于下一行（周）下，因为下一行的z索引较高。如果设置下拉菜单的z索引，这不会影响下拉，因为下拉列表是行的嵌套

下面是在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', '');
        });
    },

eventRender:函数（信息）{
let元素=$（info.el）；
元素.find（'.fc content'）.attr（“数据切换”，“下拉列表”）；
元素。追加（'\
\
\
\
\
\
');
元素.on（'show.bs.dropdown'，function（）{
元素.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.css（'z-index'，'60'）；
});
元素.on（'hide.bs.dropdown'，function（）{
元素.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.css（'z-index'，''）；
});
},

---

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

我也有同样的问题，我也想这样做

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', '');
        });
    },