NextJS - Fullcalendar is experiencing issues with loading its style completely

I'm currently working on integrating FullCalendar into a Next.js 13 project (T3 Stack) and facing an issue where the style fails to load properly upon navigating back to the page containing my FullCalendar component for the second time.

What I've observed is that upon the initial visit to the page, the FullCalendar component loads with all its associated style perfectly intact. See here: Fully loaded Fullcalendar However, upon navigating to another page (such as the index page) and returning to the calendar page, only a partial style is loaded, specifically the header. See here: Partially loaded Fullcalendar.

I've experimented with various approaches, including loading FullCalendar as a dynamic component with SSR disabled (resulting in full loading only on the first visit to the page), as a normal component (which fully loads only upon a full browser refresh of the page containing the calendar), and as a dynamic component with SSR enabled (yielding similar results as SSR disabled). Unfortunately, the style consistently fails to load completely.

cssnext.jsfullcalendar

Answer №1

Have you made sure to import the fullcalendar script properly?

For detailed instructions, check out the documentation: https://fullcalendar.io/docs/initialize-globals

If you haven't imported the script yet, make sure to include the following code:

<script src='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c6d5ccccc3c1ccc5cec4c1d2e0968e918e95">[email protected]</a>/index.global.min.js'></script>

Without the script, your styling may not function as expected.

Answer №2

I encountered a similar issue when using the Fullcalendar package in conjunction with Next.js.

Software versions:

Next.js - 13.5.4 Fullcalendar - 6.1.9

The fix involves adding the following style tag to the Head component within the _app file.

<style data-fullcalendar></style>

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

The default theme has not been specified in Tailwind CSS

During my recent project, I utilized React, Next.js in combination with Tailwind CSS. In this project, I delved into styling customization by implementing react-slick for a specialized slider. To achieve the desired aesthetic, I made modifications to the r ...

javascriptcssreactjstailwind-cssreact-slick

I'm experiencing an issue with my Bootstrap Navbar Toggle not toggling

Struggling for weeks now to figure out what's wrong with this code. It works perfectly until I resize the browser, then the menu stays open no matter how many times I click the toggle. I want it to be closed by default and only open when the toggle is ...

jqueryhtmlcsstwitter-bootstrapmaterial-design

Saving the output of an AngularJS expression in an input field

Looking at the calculations below, I am currently evaluating an expression, {{ annualIncome * 4.5 }}, in one input and then re-evaluating the same expression in another input. Instead of saving the result and transferring it to the other input, I am repeat ...

javascriptcssangularjs

Disable the smooth scroll animation when transitioning between pages using the Link component in NextJS

Not sure if this is a new feature of Next.js, as I didn't encounter this issue in my previous Next.js project. When I reach the bottom of a page and try to navigate to another page, a scroll-to-top animation appears on the destination page. I want to ...

javascriptreactjsnext.js

Excessive content - letter "y" disrupts the row layout on mobile devices

I have created a custom CSS class called "custom-class" and applied it to the col div. This column contains dynamic images, so I have added a vertical scrollbar property to handle the overflow. While everything looks fine on a desktop, the layout breaks o ...

htmlcssbootstrap-4

Navigating on a stationary object: CSS Styling

I have a main div with another nested div inside. The nested div contains cards, but I am unable to scroll through them due to the fixed positioning of the main div. I need a way to enable scrolling for the cards within the nested div. Note that the presen ...

htmlcssreactjs

Centered CSS Box with Pointing Arrow

I'm looking for a way to create a unique div design that includes an arrow pointing downwards attached to the bottom. After some exploration, I was able to achieve this look through this process: http://jsfiddle.net/hyH48/. However, my challenge lies ...

css

Sass error: Unable to locate the stylesheet for import while trying to import bootstrap

I am currently working on integrating bootstrap into my project directory using npm. Below is an overview of my file structure: https://i.sstatic.net/HjExY.png Within my style.scss file, I am utilizing the @import feature to include Bootstrap as follows: ...

cssimportsassbootstrap-5

Enhance D3 Version 6 Stacked Bar Chart with Spacing and Interactive Features

My bar chart lacks the spacing between bars that I intended to achieve, and the interactive tooltip doesn't show up when hovering over the bars. I could use some assistance with this. The purpose is to display the value of a specific color when hoveri ...

javascripthtmlcssd3.js

The animation isn't loading

I discovered a handy script that displays a waiting message when my form is submitted. I implemented jquery-ui to showcase this message in a dialog box, and it was successful. However, upon customizing the text and adding an animated gif background using C ...

javascriptjquerycss

Positioning an image so that it is perfectly aligned on top of another image that is centered

http://jsfiddle.net/Weach/1/ The issue at hand involves a background image created using CSS. This image has been center aligned both horizontally and starting from the top, as visible in the provided JSFiddle link. Specifically, there is another image t ...

htmlcss

The Bootstrap container is extending beyond the boundaries of the page view

Since I'm not a CSS enthusiast, I opted to incorporate Bootstrap into my small project. However, I've encountered an issue where one of the containers is extending beyond the page view, and I can't seem to figure out why. <!-- STYLE ...

htmlcsstwitter-bootstrapbootstrap-5

Unable to attach a tooltip to a list item

As an Angular developer, I am working on a list element that displays all the cars and I am looking to add a tooltip to enhance its visual appeal. Here is what I have attempted so far: I created a span tag with the class "tooltip" to wrap around the ul el ...

htmlcssangular

Switch out a visual element for Dropzone.js

During my recent project, I utilized Dropzone.js for image uploads. However, I am now interested in transforming the dropzone area into an actual image. For instance, if there is a "featured image" attached to an article, users should be able to drag and ...

javascriptimagecssimage-uploadingdropzone.js

Is there a way to eliminate the shadow effect on a specific part of a material-ui AppBar?

I want to remove the shadow that appears on the navbar when it overlaps with the sidebar. https://i.sstatic.net/eHh0u.png Currently, I am using Material-UI's AppBar component for my NavBar. export default function NavBar() { return ( <div&g ...

cssreactjsmaterial-uijsx

What is the best way to display text outside of the current div container?

When I include the "Y" in the code snippet below, $title1 and $title2 are positioned outside of the div and centered against the width of the page. However, without the "Y", the text shifts up and aligns with the address class instead. It's puzzling w ...

csshtml

Tips for adjusting the font size within the MUI TextField Label

I'm looking to adjust the label fontSize in the material ui TextField component. I've discovered the InputLabelProps property which has been helpful, but as shown in the image below, the label appears too cramped when focused. https://i.sstatic. ...

cssreactjsmaterial-uilabel

Error encountered in Next.js route handler where the condition `RLS auth.uid() = user_id` is not satisfied for Supab

In my Next.js application, I'm encountering a problem when attempting to fetch data through a route handler. The users table in my database contains an ID named user_id that corresponds to the authenticated user's UID, and an aps_id which is used ...

reactjsnext.jsrouteshandlersupabase

What is the best way to make a selected link stand out with a highlight?

I'm having an issue with the code below that is supposed to keep the selected link highlighted, but it only flashes the green color on click. Can someone help me figure out what's going wrong here? #sidebarContent a:active{ background-colo ...

javascriptjqueryhtmlcss

The jQuery click function triggers immediately upon the loading of the page

Despite my best efforts to resolve this issue independently and conduct extensive research on Google, I am still unable to identify the root of the problem. It seems that the click function continues to activate upon page load. Kindly elucidate the under ...

javascriptjqueryhtmlcss