Fullcalendar style not working on React Remix 1.14.0

[iChwn]

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

React

Bug Description

I have an issue when trying to use Fullcalendar on my Remix project, the styles are not loaded in remix js, any suggestion to fix this issue?

Here is my simple implementation with the plugin

<FullCalendar
  plugins={[ dayGridPlugin ]}
  initialView="dayGridMonth"
  events={[
    { title: 'event 1', date: '2023-03-01' },
    { title: 'event 2', date: '2023-03-02' }
  ]}
  viewClassNames="h-full"
/>

[imshubhamsingh]

@iChwn I recently faced the same issue. I solved it by adding fullcalendar CSS via CDN on the page where I'm using the calendar.

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: "https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css",
    },
  ];
};

Currently side-effect import import in Remix is not that great. This is being worked upon. Details: https://remix.run/docs/en/1.15.0/guides/styling#css-side-effect-imports

I would also suggest to wrap the Calendar component in a ClientOnly component so that it is only rendered after hydration, otherwise you will see the flicker of calendar from non-styled one that you shared to styled one.

[arshaw]

Sorry, I commented on the wrong issue

[iChwn]

@iChwn I recently faced the same issue. I solved it by adding fullcalendar CSS via CDN on the page where I'm using the calendar.

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: "https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css",
    },
  ];
};

Currently side-effect import import in Remix is not that great. This is being worked upon. Details: https://remix.run/docs/en/1.15.0/guides/styling#css-side-effect-imports

I would also suggest to wrap the Calendar component in a ClientOnly component so that it is only rendered after hydration, otherwise you will see the flicker of calendar from non-styled one that you shared to styled one.

This actually works for me, thank you for the suggestion

[arshaw]

I'll reopen this issue for coming up with a proper fix.

[arshaw]

I've created an official workaround for this:

• https://fullcalendar.io/docs/react#remix
• https://github.com/fullcalendar/fullcalendar-examples/tree/main/remix

[iChwn]

I've created an official workaround for this:

• https://fullcalendar.io/docs/react#remix
• https://github.com/fullcalendar/fullcalendar-examples/tree/main/remix

Thank You!

[RoniqueRicketts]

The recommendation on FullCalendar is to add <style data-fullcalendar /> in the tag in your root.tsx file. The information is found on https://fullcalendar.io/docs/react

Ps. I am adding this here for future users.

[jordisantamaria]

Hi, the fix of <style data-fullcalendar /> works on localhost, but is not working for us in production.