The Fullcalendar display is distorted due to the CSS being loaded after the calculations for the layout

I am utilizing the FullCalendar jQuery plugin within a web application framework plugin.

Additional CSS files such as fullcalendar.css are dynamically loaded in JavaScript:

$("<link rel='stylesheet' type='text/css' href='fullcalendar.css' />").appendTo("head");

When the fullcalendar.js renders and positions calendar events, there is an issue where the positions are calculated incorrectly if the fullcalendar.css file has not been loaded at that moment. This causes the events to be "moved" offscreen after the CSS loads.

To see a demonstration, visit this jsfiddle Demo.

How can I prevent this from happening? Could this be a problem with the FullCalendar plugin?

Edit: After some investigation, I discovered the $(window).load() event. It appears that moving the JS call to initialize FullCalendar within this event resolves the issue. Is this a viable solution?

jquerycssfullcalendar

Answer №1

Make sure to delay the loading of your fullCalendar script until after the CSS file has been added to the head tag:

Check out the demo here

$(document).on("ready", function() {

    $("<link rel='stylesheet' type='text/css' href='fullcalendar.css' />").appendTo("head");

    $(window).on("load", function() {

        $('#calendar').fullCalendar({
            defaultDate: '2022-05-20',
            events: [
                {
                    title: 'Event on May 15th!',
                    start: '2022-05-15'
                },
            ]
        });        
    });    
});

By ensuring that the CSS file is added when the DOM is ready and the script runs after the DOM is fully loaded, you prevent any issues with rendering.

Another approach is to utilize jQuery's holdReady() method specifically designed for handling script loading sequence:

Learn more about holdReady(); here

$.holdReady( true );

// Perform necessary actions...

$.holdReady( false );

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

What is the best way to make my sidebar stick to the top while scrolling?

Seeking assistance: I have a sidebar on my webpage that is currently offset at the top by 91px to make room for the navbar header. When scrolling, the sidebar moves along with the page. However, I would like it to snap to the top once I have scrolled past ...

phphtmlcsswordpresstwitter-bootstrap

What can I do to prevent object.style.backgroundColor in my JavaScript file from overriding my class:hover effect in my CSS file?

I am looking to enhance my user experience by allowing them to either hover over an option to highlight it or press a number key to highlight the corresponding option. However, I am facing an issue where the object.style.backgroundColor function overrides ...

javascripthtmlcsshoverbackground-color

Vue is actively eliminating a background image through the use of the style attribute

There appears to be an issue where Vue is removing both the style attribute and the background image from this tag. <section style="background: url(images/banners/profiles/profile-banner-1.png);" class="profile-banner flex items-end md:items-end md:j ...

htmlcssvue.js

What is the process for retrieving the information sent from the client application to the jsreport server?

I want to create a downloadable pdf report through my angular application using jsreport. The client app makes a POST request passing sample data to the report server in this manner. $http.post('http://localhost:5488/api/report', { ' ...

javascriptjqueryangularjspostjsreport

Is it possible to manipulate the content inside a div tag using JavaScript in HTML?

What is the most efficient way to dynamically adjust a data offset value within an HTML tag using JavaScript? For example: <div class="box" data-offset="2s"></div> I am looking to update the value within the data-offset attribute based on s ...

javascripthtmlcssmedia-queriesaddition

How to target a nested element with jQuery: selecting a div

I'm attempting to make it so that only the div that is clicked on triggers an alert, instead of the div clicked on as well as the container divs. When the third div is clicked, I want it to only display "third" in the alert. Thank you for any assistan ...

jquery

What is the best way to iterate through all JSON data and dynamically add it to my HTML?

I am looking to inject the Json data into my file.php in a structured manner, where each group is enclosed within its own div with consistent styling. It seems like my current approach may not be the most efficient. Any recommendations for better solution ...

phpjqueryjson

A centered Bootstrap navigation bar on a WordPress site

My Bootstrap navbar is floating in the center on WordPress and I'm not sure why. Can anyone help me with this issue? Could it be related to WordPress or my stylesheet problems? (Will update my code here if you need) https://i.sstatic.net/vxVv4.jpg ST ...

phphtmlcsswordpresstwitter-bootstrap

Ensuring Smooth Alignment of CSS Divs

I am facing challenges with the compatibility of my CSS code for HTML checkboxes. In certain versions of Internet Explorer and when I insert the live HTML into my PowerPoint presentation, the center div overlaps with the left div causing the entire page to ...

htmlcsscss-floatcenter

Enhance every ajax post request using jQuery

I want to include a csrf token from cookies in all my ajax posts. I've attempted the following: $.ajaxPrefilter(function(options, originalOptions, jqXHR) { if(options.type.toUpperCase() === "POST") options.data = options.data || {}; ...

javascriptjqueryajax

Tips for securely saving a collection of objects in a cookie with json.stringify?

I'm encountering an issue while attempting to save an array of objects in a cookie using JSON.stringify. When I try to parse the cookie and add a new object to the array before stringifying it again, I receive an error stating that comments.push is no ...

javascriptjqueryjsonparsingstringify

Ways to transfer JavaScript arguments to CSS style

Currently, I am developing a web service using Angular and Spring Boot. In this project, I have implemented cdkDrag functionality to allow users to place images in specific locations within the workspace. My goal is to maintain the placement of these image ...

htmlcssangulartypescript

What is the best way to minify and concatenate multiple CSS files only after converting SCSS to CSS with Gulp?

When attempting to convert my scss files to css files using gulp, I encountered an issue. After writing the scss code, it is easily converted to css. However, I wanted to minify this css and save it in a different folder called 'min'. Within the ...

javascripthtmlcsssassgulp

Error: The javascript function is unable to execute because undefined is not recognized as a function

I've been struggling with an error in my "bubble sort" function that I wrote to organize a list of images. Whenever I run the function, I keep getting the message "Uncaught TypeError: undefined is not a function". Can anyone provide some guidance? $j ...

javascriptjquerytypeerror

Enigmatic jPlayer 2.0.0 glitch puzzling Firefox users

One of my clients has a music page that can be found here: . The page features multiple songs, each with its own player powered by jPlayer 2.0.0. Interestingly, the players work perfectly fine in Safari and Chrome, but not in Firefox which requires Flash t ...

javascriptjqueryfirefoxjplayer

Toggle between resizing a set of boxes and fading in/out their images

I have a series of clickable boxes that I want to expand and hide the image when clicked. Additionally, I need to be able to close any previously opened box by returning it to its original height and width while fading back in its image content. The .info ...

javascriptjqueryjquery-masonryjquery-isotope

Issue in Internet Explorer where SVG and jQuery mouse events fail to trigger

We are utilizing an SVG map with multiple areas on which a unique jQuery action is triggered upon hovering. Unfortunately, this functionality fails to work in IE (specifically tested in IE11). To illustrate the issue in a simplified manner, a demo has bee ...

javascriptjqueryhtmlinternet-explorersvg

Consistent Gaps Among Any Number of Buttons

I have a scenario where I have multiple buttons arranged in different lines. Currently, when a button doesn't fit on a line, it moves to the next line leaving blank space behind. What I want is to evenly space out the buttons that manage to be on the ...

htmlcssbootstrap-5

Troubleshooting my CSS navigation bar - What am I missing?

I've been developing a navigation bar using a combination of HTML, CSS, and JavaScript. After writing the code and setting the display of the bar to fixed, I encountered an issue where the content of the page was overlapping the nav bar. Below you&ap ...

javascripthtmlcssnavigationbar

Utilize a JavaScript function to select a checkbox

Is there a way to toggle the checkbox between checked and unchecked based on the value sent to a Javascript function? For more information, please visit this link for details on how to call the showModalPopup function. Below is a snippet of code showing a ...

javascriptjqueryhtmlcheckbox