How do i make AllDaySlot not overlap my popup? How do i make AllDaySlot not overlap my popup?

i made a div popup that appears when you want to make an event. The popup works great on the "Month" view of fullcalendar,but on the "Week" and "Day" view,the allDaySlot overlap the div and make it impossible to click on the "X" span I don't know why it's only the AllDaySlot that have a problem with that since everything else works Any idea? Here is the most important part of the code of my div popup(sorry if the code can be not very optimized,i'm still learning)

<div id="popupjs" class="popup">
        <div class="contenu-popup" id="contenupopup">
            <span class="close">&times;</span>

            ...a lot of content...

        </div>
    </div> 

.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.contenu-popup {
    background-color: white;
    margin: 10% auto;
    height: 60%;
    border: 1px solid #888;
    border-radius: 10px;
    width: 30%;
    overflow: auto;
}
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

select: function(info) {
            ...i removed some codes so you can focus on the essentials...
            var popup = document.getElementById("popupjs");
            var contenupopup = document.getElementById("contenupopup");
            var span = document.getElementsByClassName("close")[1];
            var body = document.getElementById("body");
            if (calendar.view.type === "dayGridMonth") {
                var allDays = true;
            } else
                {
                    var allDays = false;
                }


            popup.style.display = "block";
            contenupopup.style.height = "34%";
            body.style.overflow = "hidden";

            calendar.unselect();


            span.onclick = function() {
                popup.style.display = "none";
                body.style.overflow = "auto";
            }

Thanks.



from Stackoverflow

Comments

Post a Comment

Popular posts from this blog

\\u0000 cannot be converted to text error \\u0000 cannot be converted to text error

I am using NextJS and supabase to insert some data into PostgreSQL database. Data is array of objects. The error is like this \\u0000 cannot be converted to text. unsupported Unicode escape sequence . There is no unicode character like \\u0000 in my data. There is a error response but I cant see which keys value is causing the error. Is there any way to resolve this issue? const Data = async (req, res) => { try { const { data, error } = await supabase.from('db').insert([]) return res.status(200).json({ data: data, error: error, }); } catch (error) { console.log(error); } } from Stackoverflow
Read more

How to create @click on select menu in VueJS How to create @click on select menu in VueJS

I wanna create @click in my select menu which is empty by default. I tried to create it in select , option and even div , but it doesn't to seem work. So, I have this code in my template : <div style="float: right; padding-right: 13px"> <span> Sort by: </span> <select v-model="sort"> <option v-for="item in items" :key="item.id" :value="item" @click="sortBy" v-text="item.title" ></option> </select> </div> This in data : items: [ { id: 1, title: 'Price: Low to High', sort: 1 }, { id: 2, title: 'Price: High to Low', sort: 2 }, { id: 3, title: 'Newest first', sort: 3 }, { id: 4, title: 'Oldest first', sort: 4...
Read more

Using Ts-Standard linting, JSDoc comment at beginning of file triggers "This rule requires the `strictNullChecks` compiler option" error Using Ts-Standard linting, JSDoc comment at beginning of file triggers "This rule requires the `strictNullChecks` compiler option" error

I'm using Typescript and the TS-standard version of StandardJS's ESlint plugin and extension for VSCode. I have been using JSDoc-style comment blocks ( /** Some text */ ) at the beginning of javascript and now typescript files to indicate things like author and give a general overview of the contents of the file. I was using the standardJS eslint plugin already, but it generally didn't work properly on my code library, never figured out why. Recently I started upgrading my codebase to Typescript, and now I'm getting this error on all of these comment blocks: This rule requires the `strictNullChecks` compiler option to be turned on to function correctly. (@typescript-eslint/strict-boolean-expressions)ts-standard(@typescript-eslint/strict-boolean-expressions) I tried turning on the strictNullChecks option, and it did indeed clear that error, but is also a nightmare for certain places where I know values aren't going to be null if the object exists at all (and using...
Read more