Interactive calendar feature displaying events upon hovering over a date

I need some assistance with displaying a drop-down list on full calendar events when hovering over the events. Can someone provide guidance?

Here is a glimpse of what I currently have:

https://i.sstatic.net/fZXMH.png

I've attempted setting the z-index, but I can't seem to get the drop-down list to appear on top.

I'm not interested in using a tooltip; I specifically want a drop-down list to show up when the event is hovered over.

This is the code snippet where I tried adjusting the Full Calendar options:

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() generates the drop-down list as a ul element, shown below:

<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>
... additional list items go here ...
</ul>

Additionally, here is the CSS style modification for the Full Calendar hover effect:

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

As of now, the drop-down list only appears on top of the event and within the cell of the day. I want it to be positioned above that specific cell.

Thank you in advance.

javascriptcssfullcalendarfullcalendar-3

Answer №1

By the year 2020, a solution was finally discovered.

The reason why the dropdown menu appears under the next row (week) is due to the higher z-index of that row. Adjusting the z-index of the dropdown menu itself will not have any effect because it is nested within the row.

Here is an example of how to create a dropdown menu 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', '');
        });
    },

It is recommended to use the "show.bs.dropdown" event for the dropdown instead of the click event on the element. This helps avoid conflicts with the click event of the dropdown, ensuring that the element's click event fires correctly each time.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript Error: Unable to determine the value of a null property

Is there a way to validate the user's input in real-time on an HTML form? Take a look at the following HTML code: <div class="col-md-2"> <input class="form-control" name="nbequipement" id="nbequipement" placeholder="" type="text"> ...

javascripthtmlgetelementbyid

send another response following the completion of the request.end()

I am facing challenges with writing the correct callback function. The situation involves a user making a request to "/city", which then triggers the server to make a request to a third-party service for data retrieval using http.request(). I successfully ...

javascriptnode.jshttpexpress

Customizing ExtJS 4's CSS reset specifically for tailored HTML inside components

I am currently in the process of upgrading an existing application from Ext 3.x to 4. I have successfully enabled Ext's scoped reset CSS option to prevent Ext from applying its CSS reset to my entire application. However, I am now facing a new issue. ...

cssextjsextjs4overridingcss-reset

What is the process for uploading an HTML input file in segments?

Is it possible to upload the whole file at once like this: myInput.onchange = ({ target }) => { const file = target.files[0]; const formData = new FormData(); formData.append("fileData", file); // ...then I post "formData" ...

javascripthtmlformsfile-upload

Serialization of forms consistently yields an empty string

In my view, I have a dropdown menu that triggers the insertion of a partial view into a designated div when an option is selected. The following code snippet demonstrates what the view looks like: <div class="container"> <div class="row"> ...

javascriptjqueryajaxasp.net-mvcserialization

Vue.js: Utilizing async/await in Vue.js results in an observer being returned

Currently, I'm attempting to retrieve data from an API and store it in an array. The issue arises when I try to log the response data from the API - the data is displayed just fine. I assign the value of a variable to the data obtained from awaiting t ...

javascriptvue.jsasync-await

extract data from text node using selenium

Currently, I am working on a web application and testing it with Selenium. Within my code, there is a specific node that I am trying to extract data from. <span>Profile Run <span class="current">23</span> of 29</span> My main obje ...

javascriptseleniumxpathbrowser-automation

Display the country code according to the option chosen by the user in the dropdown menu

To enhance user experience, I am implementing a feature where the user can select their country from a drop-down list and then have the corresponding country code displayed in a text field for easy entry of their phone number. Below is the list of countri ...

javascriptphphtmlcountry-codes

I am struggling to successfully upload a video in Laravel

In this section, the Ajax functionality is used to add a video URL to the database. The values for the Video title and description are successfully being saved in the database, but there seems to be an issue with retrieving the URL. <div class="m ...

javascripthtmljqueryajaxlaravel

Visual Studio Code unable to locate source maps for typescript debugging

Looking for some help debugging a basic Hello World TypeScript file. Whenever I try to set a breakpoint, it seems like VS Code is having trouble locating the source map, even though it's saved in the same directory. I'm using Chrome as my browser ...

javascripttypescriptvisual-studio-code

Is there a more efficient method to tally specific elements in a sparse array?

Review the TypeScript code snippet below: const myArray: Array<string> = new Array(); myArray[5] = 'hello'; myArray[7] = 'world'; const len = myArray.length; let totalLen = 0; myArray.forEach( arr => totalLen++); console.log(& ...

javascriptarraystypescript

What about CSS block elements that have a width relative to their parent container

My goal is to create a layout where each h3 and p element is wrapped in a box. The current issue I'm facing is that the blocks extend to full width due to h3 and p being block level elements. The desired outcome is for the width of the boxes to adjus ...

cssblock

Issue encountered when attempting to batch delete documents within a subcollection: Error message displays "TypeError: n.indexOf is not a

When attempting to batch delete a document within a subcollection, I encounter some issues. There are scenarios where I may need to remove the same product document ID along with various history document IDs, or multiple product document IDs with differen ...

javascriptreactjsfirebasegoogle-cloud-firestore

Improving React Components with Material-UI Integration

Is it possible to export a class extended from React.Component while using React and Material-UI? I need to access React variables like state within the class. If exporting the extended class is not an option, how can I still utilize state? Here is a samp ...

javascriptreactjsmaterial-ui

What is the best approach in JavaScript to compare and modify properties in two arrays of objects with efficiency?

Here's a method I have written in an Ecma 6 component (Salesforce Lightning Web Components for anyone interested). I am sharing it here because this is more focused on JavaScript rather than LWC. Do you think this is the optimal approach to solve this ...

javascriptarraysjavascript-objects

Why isn't my li:hover responding the way it should?

Check out this Fiddle When the mouse hovers over the element, an opaque "cloud" appears and I want to completely hide the underline that is normally displayed. The underline is created by using a border-bottom on the parent div. .element_style{ width ...

css

Why styled-components namespace problem in React Rollup build?

I designed a "UI Library" to be utilized in various projects using ReactJS + TypeScript + styled-components and Rollup. However, I am currently encountering issues with conflicting classNames. I am aware that styled-components offers a plugin for creating ...

javascriptreactjstypescriptstyled-componentsrollupjs

The child process is arriving empty, which is causing a requirement

Every time I try to use var childprocess = require('child_process'); I keep getting a blank result. When I attempt var childProcess1 = require('child_process').spawn; it returns as undefined, and, var childProcess2 = require(&a ...

javascriptnode.jsnpm

Create a customized HTML popup featuring various packages

I am struggling to create an HTML popup within a React component due to some errors Here is the code snippet: <div> <button class="toggle">Button</button> <div id="link-box"> <ul> ...

htmlcssreactjs

How do I get my navbar to change color using a JavaScript scroll function?

I've been struggling with changing the color of my navbar when it's scrolled. I have some JavaScript code at the bottom that should handle this, but for some reason, it's not working as expected. I've double-checked that my bootstrap CD ...

htmljquerycssscrollnavbar