Full calendar drop down list on event hover

Question

I want to display drop down list on full calendar events on hovering the events. can anyone help me out?

here is the screen shot that i am having currently

I want the drop down list on top of everything else i have tried z-index but not able to get on top.

i don't want tooltip i just want a dropdown list on hovering the event.

the code that i have tried setting the full calendar options as:

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) {            
    }

The function getToolTipData() returns the dropdown list as ul element and here it is:

<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>

and here is style change of full calendar how i am getting it on hover

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

Currently it is showing only on the top of event and inside that cell of the day on want it on top of that cell.

Thanks in advance.

i am also having same issue i also wanted to do that – Jay Patel Sep 13 '18 at 09:53 — Jay Patel, Sep 13 '18 at 09:53

score 2 · Answer 1 · answered Aug 12 '20 at 15:34

Till 2020, I found the solution.

The dropdown menu is under the next row (week) because the next row has the higher z-index. If you set the z-index of the dropdown menu, this does not affect to dropdown because the dropdown is the nest of row.

Below is the example of creating a dropdown in 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', '');
        });
    },

Just use "show.bs.dropdown" event of the dropdown, don't use the click event of the element. Because this conflict with click event of dropdown (this leads to the click event of element fire just one time).

Full calendar drop down list on event hover

1 Answers1