Calendar CSS not loading sometimes error on Next.js #7284

reymon359 · 2023-04-16T07:46:14Z

Reduced Test Case

STILL NEEDED

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

I understand

Which connector are you using (React/Angular/etc)?

React

Bug Description

Hey there 👋🏽

Sometimes, when the calendar loads, there are some issues with the CSS and the styles do not load properly:

Here is an example of how it loads

And now how it should load. This is how it loads most of the time:

I don't know why it happens. It happens from time to time, and reloading the window fixes it.

Do you know how to fix it forever?
Do you know what may be causing it?

Thanks a lot in advance!

Btw the reduced test case is the example one because I don't know how to reproduce it

reymon359 · 2023-04-17T03:38:18Z

Looks like other people are experiencing the same issue

I am using the same stack as the author of that stack overflow

https://stackoverflow.com/questions/75920011/nextjs-fullcalendar-only-loading-partly-the-style

hadhaz · 2023-04-17T16:21:11Z

I got some problems:

You can just add

<Script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.5/index.global.min.js" />

Where

import Script from 'next/script';

This is my full code implementation

import { useEffect, useRef, useState } from 'react';
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import googleCalendarPlugin from '@fullcalendar/google-calendar';
import Script from 'next/script';

export default function MyCalendar() {
	const calendarRef = useRef<HTMLDivElement>(null);
	const [calendar, setCalendar] = useState<any>(null);

	useEffect(() => {
		if (calendarRef.current && !calendar) {
			const newCalendar = new Calendar(calendarRef.current, {
				plugins: [googleCalendarPlugin, dayGridPlugin],
				googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
				events: {
					googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID,
				},
			});

			newCalendar.render();
			setCalendar(newCalendar);
		}
	}, [calendar, calendarRef]);

	return (
		<div ref={calendarRef}>
			<Script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.5/index.global.min.js" />
		</div>
	);
}

After add Script:

reymon359 · 2023-04-17T23:52:51Z

Hey @hadhaz thanks for the feedback.

I will give it a try to your solution, however, why are you not using the "@fullcalendar/react" library?

Where you using it before? and then to fix the issue you moved to using the core one?

hadhaz · 2023-04-18T00:37:46Z

Hey @hadhaz thanks for the feedback.

I will give it a try to your solution, however, why are you not using the "@fullcalendar/react" library?

Where you using it before? and then to fix the issue you moved to using the core one?

I'm struggling to connect google calendar API with fullcalendar, fullcalendar documentation just provides how to connect without @fullcalendar/react

I'm happy if you have a solution to connect google calendar api with @fullcalendar/react

reymon359 · 2023-04-18T04:42:39Z

Sorry @hadhaz I am not using google calendar in my project

jocovass · 2023-04-22T11:59:04Z

@reymon359 Did you find a solution to this problem? I am facing the same issue

reymon359 · 2023-04-23T10:49:45Z

hey @jocovass, not the best solution but it is working until some library maintainer answers with a proper solution.

I created this component

export const CalendarStyleSheets = () => (
  <>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" />
    <style>{`.fc .fc-timeline-body{min-height:100%;position:relative;z-index:1}.fc .fc-timeline-slots{bottom:0;position:absolute;top:0;z-index:1}.fc .fc-timeline-slots>table{height:100%}.fc .fc-timeline-slot-minor{border-style:dotted}.fc .fc-timeline-slot-frame{align-items:center;display:flex;justify-content:center}.fc .fc-timeline-header-row-chrono .fc-timeline-slot-frame{justify-content:flex-start}.fc .fc-timeline-header-row:last-child .fc-timeline-slot-frame{overflow:hidden}.fc .fc-timeline-slot-cushion{padding:4px 5px;white-space:nowrap}.fc-direction-ltr .fc-timeline-slot{border-right:0!important}.fc-direction-rtl .fc-timeline-slot{border-left:0!important}.fc .fc-timeline-now-indicator-container{bottom:0;left:0;position:absolute;right:0;top:0;width:0;z-index:4}.fc .fc-timeline-now-indicator-arrow,.fc .fc-timeline-now-indicator-line{border-color:var(--fc-now-indicator-color);border-style:solid;position:absolute;top:0}.fc .fc-timeline-now-indicator-arrow{border-left-color:transparent;border-right-color:transparent;border-width:6px 5px 0;margin:0 -6px}.fc .fc-timeline-now-indicator-line{border-width:0 0 0 1px;bottom:0;margin:0 -1px}.fc .fc-timeline-events{position:relative;width:0;z-index:3}.fc .fc-timeline-event-harness,.fc .fc-timeline-more-link{position:absolute;top:0}.fc-timeline-event{z-index:1}.fc-timeline-event.fc-event-mirror{z-index:2}.fc-timeline-event{align-items:center;border-radius:0;display:flex;font-size:var(--fc-small-font-size);margin-bottom:1px;padding:2px 1px;position:relative}.fc-timeline-event .fc-event-main{flex-grow:1;flex-shrink:1;min-width:0}.fc-timeline-event .fc-event-time{font-weight:700}.fc-timeline-event .fc-event-time,.fc-timeline-event .fc-event-title{padding:0 2px;white-space:nowrap}.fc-direction-ltr .fc-timeline-event.fc-event-end,.fc-direction-ltr .fc-timeline-more-link{margin-right:1px}.fc-direction-rtl .fc-timeline-event.fc-event-end,.fc-direction-rtl .fc-timeline-more-link{margin-left:1px}.fc-timeline-overlap-disabled .fc-timeline-event{margin-bottom:0;padding-bottom:5px;padding-top:5px}.fc-timeline-event:not(.fc-event-end):after,.fc-timeline-event:not(.fc-event-start):before{border-color:transparent #000;border-style:solid;border-width:5px;content:"";flex-grow:0;flex-shrink:0;height:0;margin:0 1px;opacity:.5;width:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-start):before,.fc-direction-rtl .fc-timeline-event:not(.fc-event-end):after{border-left:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-end):after,.fc-direction-rtl .fc-timeline-event:not(.fc-event-start):before{border-right:0}.fc-timeline-more-link{background:var(--fc-more-link-bg-color);color:var(--fc-more-link-text-color);cursor:pointer;font-size:var(--fc-small-font-size);padding:1px}.fc-timeline-more-link-inner{display:inline-block;left:0;padding:2px;right:0}.fc .fc-timeline-bg{bottom:0;left:0;position:absolute;right:0;top:0;width:0;z-index:2}.fc .fc-timeline-bg .fc-non-business{z-index:1}.fc .fc-timeline-bg .fc-bg-event{z-index:2}.fc .fc-timeline-bg .fc-highlight{z-index:3}.fc .fc-timeline-bg-harness{bottom:0;position:absolute;top:0}`}</style>
    <style>{`.fc .fc-resource-timeline-divider{cursor:col-resize;width:3px}.fc .fc-resource-group{font-weight:inherit;text-align:inherit}.fc .fc-resource-timeline .fc-resource-group:not([rowspan]){background:var(--fc-neutral-bg-color)}.fc .fc-timeline-lane-frame{position:relative}.fc .fc-timeline-overlap-enabled .fc-timeline-lane-frame .fc-timeline-events{box-sizing:content-box;padding-bottom:10px}.fc-timeline-body-expandrows td.fc-timeline-lane{position:relative}.fc-timeline-body-expandrows .fc-timeline-lane-frame{position:static}.fc-datagrid-cell-frame-liquid{height:100%}.fc-liquid-hack .fc-datagrid-cell-frame-liquid{bottom:0;height:auto;left:0;position:absolute;right:0;top:0}.fc .fc-datagrid-header .fc-datagrid-cell-frame{align-items:center;display:flex;justify-content:flex-start;position:relative}.fc .fc-datagrid-cell-resizer{bottom:0;cursor:col-resize;position:absolute;top:0;width:5px;z-index:1}.fc .fc-datagrid-cell-cushion{overflow:hidden;padding:8px;white-space:nowrap}.fc .fc-datagrid-expander{cursor:pointer;opacity:.65}.fc .fc-datagrid-expander .fc-icon{display:inline-block;width:1em}.fc .fc-datagrid-expander-placeholder{cursor:auto}.fc .fc-resource-timeline-flat .fc-datagrid-expander-placeholder{display:none}.fc-direction-ltr .fc-datagrid-cell-resizer{right:-3px}.fc-direction-rtl .fc-datagrid-cell-resizer{left:-3px}.fc-direction-ltr .fc-datagrid-expander{margin-right:3px}.fc-direction-rtl .fc-datagrid-expander{margin-left:3px}`}</style>
  </>
)

And then I load it in the page where the calendar is

const NewBookingContent = () => {

  return (
    <FullCalendar
    ...
    />)
}


const NewBookingPage: NextPage = () => {
  return (
    <Layout title="New Booking">
      <CalendarStyleSheets />
      <NewBookingContent />
    </Layout>
  )
}

export default NewBookingPage

Hope it helps!

jocovass · 2023-04-23T20:04:53Z

The only way it works for me if I preload the styles in _app

<Head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" />
</Head>

reymon359 · 2023-04-23T23:38:26Z

@jocovass forgot to mention that my code. above is related to the timeline view 😉

Also, looks like @arshaw added this to the next-release. So hopefully it will be fixed soon and we will be able to upgrade the library to solve the error 😄

madelahsan · 2023-05-05T06:59:28Z

The only way it works for me if I preload the styles in _app
<Head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" />
</Head>

I can confirm this works for me. I was facing broken fullcalender UI in production but adding stylesheet in _app.js fixed the issue.

arshaw · 2023-05-08T21:32:17Z

I'm appreciative of the workarounds, however, I really want to get this working without needing to import v5 static assets. Ideally the CSS the FullCalendar v6 injects would be applied, and stay applied, in all scenarios.

I'm still in need of a reproduction. I've attempted to reproduce myself, but things work fine:

Next.js 13 example (github | runnable codesandbox)
T3 app example (github | runnable codesandbox)

If someone could use the above examples as a starting point and post a recreation link (github repo or a codestandbox link), I'd be grateful.

arshaw · 2023-05-08T21:34:15Z

If the bug only appears in your production environment, can you please tell me which hosting provider you're using and any important instructions to get it working?

If you think it's only production, can you attempt a static build on your machine first? next build followed by next start

vivianedias · 2023-05-08T22:11:59Z

I'm having the same issue on NextJS. It goes aways when I reload the page, when I think the css is resolved/loaded. This only happens on the first load. Seems to be an issue with NextJS since I think it deals with .css in a different way then other apps.

I've been using Vercel to deploy @arshaw, but you should be able to reproduce locally if you open on a window in incognito mode and load the app for the first time.

reymon359 · 2023-05-09T08:37:57Z

Hey @arshaw have you tried reproducing it using the timeline plugin?

Also, to clarify, this does not happen in development mode.

So in order to reproduce it, first build the project with next build + start it locally. You should see the styles not working.

arshaw · 2023-05-09T13:30:47Z

@vivianedias and @reymon359, please see this video of me attempting to recreate the bug. Please compare it to your own scenarios and lmk how I can go about successfully recreating it.

https://www.loom.com/share/ce83e924b19c4f1fb0c72d10184e01d5

I'm using timeline view and using next build followed by next start to simulate production. I did not open in incognito mode during the video, however, afterwards I attempted it and I'm still not able to recreate the bug.

Github repo: https://github.com/fullcalendar/fullcalendar-examples/tree/main/next13

madelahsan · 2023-05-09T14:25:45Z

I created new next.js project and setup Fullcalendar in it. It was working fine on production.
But the current next.js project that I am working on still got the issue.

nbenford · 2023-05-11T16:27:18Z

I was having issues on list view not having the proper styling only on Next.js production builds. I narrowed it down to some sort of conflict in my navbar component, specifically using Next's Image component. I cannot explain it, but when I changed Image to img, my CSS issue disappeared. Incredibly strange.

arshaw · 2023-05-15T13:46:29Z

Thanks for the new info @nbenford

Could everyone please tell me:

What version of Next.js you're using
Whether you're using pages router or app router

And of course, a runnable recreation would be invaluable.

reymon359 · 2023-05-17T07:44:50Z

Hey @arshaw, sorry for the delay.

I emailed hello@arshaw.com with my source code and answers to your questions.

Let me know if you need anything else 😄

nbenford · 2023-05-17T13:36:04Z

Hi @arshaw,

I'm using Next 13.3.1 and I'm using the pages router.

The odd thing is that I seemed to have fixed the issue the other day by altering the div structure and keeping the Next Image component, but the bug has come back again. Again, the problem is only in the full build, not the dev build, and only on the 'list' component.

I'll get some runnable code to you as soon as I can. Thanks!

arshaw · 2023-05-25T02:56:17Z

This should be fixed in v6.1.8. Could all those who experienced the issue please upgrade and confirm that all is fixed?

madelahsan · 2023-05-25T04:05:20Z

@arshaw I updated. The UI is fixed now on production. But after updating I am facing this error in production build when switching to month view. day and week views are working.

Uncaught TypeError: t1[e.calendarSystem] is not a constructor

nbenford · 2023-05-25T18:08:06Z

@arshaw

I'm having the same problem as @madelahsan. The update crashes my build.

On the bright side, if I roll back to 6.1.7 and add

<Script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.7/index.global.min.js" />

Into my calendar component, it renders fine.

arshaw · 2023-05-26T15:09:59Z

@madelahsan, I feel your problem might be unrelated. I cannot find anywhere in the current codebase where t1[e.calendarSystem] would be accessed. Maybe you are using an older version of one of the plugins, or this is custom code you or someone on your team wrote. I won't be able to help further unless I get a reduced test case.

@nbenford, similar sentiment, I don't know things are breaking for you after the upgrade. I'd need a reduced test case to know why. Additionally, I don't know why including a global script tag would fix anything.

arshaw · 2023-05-26T15:10:39Z

Please post all issues (and accompanying reduced test cases) in separate tickets. Thanks!

reymon359 changed the title ~~Timeline calendar CSS not loading sometimes error~~ Timeline calendar CSS not loading sometimes error on Next.js Apr 17, 2023

arshaw added this to the next-release milestone Apr 23, 2023

acerix added Alt Environment Reproducing labels May 1, 2023

arshaw changed the title ~~Timeline calendar CSS not loading sometimes error on Next.js~~ Calendar CSS not loading sometimes error on Next.js May 8, 2023

arshaw mentioned this issue May 8, 2023

Option to load calendar CSS from an external file instead of injection #7220

Closed

2 tasks

nandorojo mentioned this issue May 9, 2023

Event content flickers when dropping an event because eventContent fires twice #7165

Closed

1 task

arshaw modified the milestones: next-release, v6.1.8 May 25, 2023

arshaw closed this as completed May 26, 2023

fullcalendar locked as resolved and limited conversation to collaborators May 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Calendar CSS not loading sometimes error on Next.js #7284

Calendar CSS not loading sometimes error on Next.js #7284

reymon359 commented Apr 16, 2023 •

edited by arshaw

reymon359 commented Apr 17, 2023

hadhaz commented Apr 17, 2023 •

edited

reymon359 commented Apr 17, 2023

hadhaz commented Apr 18, 2023

reymon359 commented Apr 18, 2023

jocovass commented Apr 22, 2023

reymon359 commented Apr 23, 2023

jocovass commented Apr 23, 2023

reymon359 commented Apr 23, 2023

madelahsan commented May 5, 2023

arshaw commented May 8, 2023

arshaw commented May 8, 2023

vivianedias commented May 8, 2023

reymon359 commented May 9, 2023

arshaw commented May 9, 2023

madelahsan commented May 9, 2023

nbenford commented May 11, 2023

arshaw commented May 15, 2023

reymon359 commented May 17, 2023

nbenford commented May 17, 2023 •

edited

arshaw commented May 25, 2023

madelahsan commented May 25, 2023

nbenford commented May 25, 2023

arshaw commented May 26, 2023

arshaw commented May 26, 2023

Calendar CSS not loading sometimes error on Next.js #7284

Calendar CSS not loading sometimes error on Next.js #7284

Comments

reymon359 commented Apr 16, 2023 • edited by arshaw

Reduced Test Case

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

Which connector are you using (React/Angular/etc)?

Bug Description

reymon359 commented Apr 17, 2023

hadhaz commented Apr 17, 2023 • edited

reymon359 commented Apr 17, 2023

hadhaz commented Apr 18, 2023

reymon359 commented Apr 18, 2023

jocovass commented Apr 22, 2023

reymon359 commented Apr 23, 2023

jocovass commented Apr 23, 2023

reymon359 commented Apr 23, 2023

madelahsan commented May 5, 2023

arshaw commented May 8, 2023

arshaw commented May 8, 2023

vivianedias commented May 8, 2023

reymon359 commented May 9, 2023

arshaw commented May 9, 2023

madelahsan commented May 9, 2023

nbenford commented May 11, 2023

arshaw commented May 15, 2023

reymon359 commented May 17, 2023

nbenford commented May 17, 2023 • edited

arshaw commented May 25, 2023

madelahsan commented May 25, 2023

nbenford commented May 25, 2023

arshaw commented May 26, 2023

arshaw commented May 26, 2023

reymon359 commented Apr 16, 2023 •

edited by arshaw

hadhaz commented Apr 17, 2023 •

edited

nbenford commented May 17, 2023 •

edited