menu

Next.js

A place to chat about Next.js and answer questions. For all other ZEIT products, check this out.

Channels
Team

Using fullcalendar with Next.js

April 5, 2019 at 12:59pm
The Next.js community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Using fullcalendar with Next.js

April 5, 2019 at 12:59pm (Edited 2 years ago)
Has anyone here figured out how to use fullcalendar react v4 (not depending on jquery) with Next.js? I have used next dynamic import for non SSR import, which worked for the import. But, when I want to use the FullCalendar component it stays in loading state (probably something that comes with fc)

April 6, 2019 at 2:07pm
Hey there! I'm trying to figure out the exact same thing!
  • reply
  • like
I also tried dynamic imports and it fails with Invariant Violation errors when trying to use the dynamically loaded component.
  • reply
  • like
Were you able to get it to work?
  • reply
  • like

April 7, 2019 at 1:21pm
Okay, works for me now. Did it like this:
import dynamic from 'next/dynamic';
const FullCalendarNoSSRWrapper = dynamic({
modules: () => ({
calendar: import('@fullcalendar/react'),
timeGridPlugin: import('@fullcalendar/timegrid'),
interactionPlugin: import('@fullcalendar/interaction'),
momentPlugin: import('@fullcalendar/moment'),
momentTimezonePlugin: import('@fullcalendar/moment-timezone'),
}),
render: (props, { calendar: Calendar, ...plugins }) => (
<Calendar {...props} plugins={Object.values(plugins)} />
),
ssr: false,
loading: () => <LoadingSpinner />,
});
And then you may just use the FullCalendarNoSSR Wrapper as component.
Edited
like-fill
1
  • reply
  • like

April 8, 2019 at 6:10am
Hey Florian! I had a few days off so I might pick this back up today. I'll try your code later today. Thanks alot for sharing already!
  • reply
  • like
Worked for me aswell. Thanks alot!
  • reply
  • like
You're welcome!
  • reply
  • like

April 22, 2019 at 5:59am
Thank you. This works. I have been searching for solution in the past 5 days. I guess I just missed this one. would you mind if I share your code in an article?
  • reply
  • like
You're welcome - happy to help. Feel free to use the code wherever you want to!
  • reply
  • like

May 20, 2019 at 10:25pm
Hey Thanks for the code! When I used it, the calendar works fine in the browser. However, I still get ReferenceError: Element is not defined in my terminal's console log. Do you get this as well? I Don't understand why this shows up when ssr is false. I'm using "next": "^8.1.0" by the way.
  • reply
  • like
Hey . Yes, I am also getting these errors. Have not yet found out how to fix this. I'm also using nextjs 8.1.
  • reply
  • like

May 21, 2019 at 3:00pm
Have been using 's code for a while, and I didn't notice that error in the console log until you pointed it out.
I managed to get rid of that error by importing it inside useEffect() if using functional components or componentDidMount() if using class components to make sure that it is rendered on the client side.
Did it like this:
useEffect(() => {
FullCalendar = dynamic({
modules: () => ({
calendar: import('@fullcalendar/react'),
dayGridPlugin: import('@fullcalendar/daygrid'),
timeGridPlugin: import('@fullcalendar/timegrid')
}),
render: (props, { calendar: Calendar, ...plugins }) => (
<Calendar {...props} plugins={Object.values(plugins)} ref={props.myRef} />
),
ssr: false
})
})
You may want to read a tutorial entitled How to use FullCalendar in Next.js that I wrote regarding it.
I hope this helps.
  • reply
  • like
Thanks for sharing, . I'm really wondering what the real cause of the problem is. Really bugs me :D. Already spent a couple of hours debugging. Maybe some wise human in the future will find out :D
  • reply
  • like

August 26, 2019 at 8:09pm
hi Next.js has deprecated multiple export in
dynamic.js:66 The modules option for next/dynamic has been deprecated. See here for more info https://err.sh/zeit/next.js/next-dynamic-modules
It seemed since this warning came out, the multiple css include fails and the Calendar control was back to having no css rendering.
Next.js posted this sample code, but I am unclear on how to join individual dynamic and render on the final result. https://github.com/zeit/next.js/blob/master/errors/next-dynamic-modules.md
  • reply
  • like

October 9, 2019 at 10:43pm
hi Next.js has deprecated multiple export in
dynamic.js:66 The modules option for next/dynamic has been deprecated. See here for more info https://err.sh/zeit/next.js/next-dynamic-modules
It seemed since this warning came out, the multiple css include fails and the Calendar control was back to having no css rendering.
Next.js posted this sample code, but I am unclear on how to join individual dynamic and render on the final result. https://github.com/zeit/next.js/blob/master/errors/next-dynamic-modules.md
did you ever solve this?
  • reply
  • like
Yes, I solved this problem with the same dynamic code has outlined. However I also have to change the next.config.js to allow CSS and SASS to be imported into webpack so I can use css for FullCalendar and SASS for other things.
  • reply
  • like

December 30, 2019 at 10:05am
Okay, works for me now. Did it like this:
import dynamic from 'next/dynamic';
const FullCalendarNoSSRWrapper = dynamic({
modules: () => ({
calendar: import('@fullcalendar/react'),
timeGridPlugin: import('@fullcalendar/timegrid'),
interactionPlugin: import('@fullcalendar/interaction'),
momentPlugin: import('@fullcalendar/moment'),
momentTimezonePlugin: import('@fullcalendar/moment-timezone'),
}),
render: (props, { calendar: Calendar, ...plugins }) => (
<Calendar {...props} plugins={Object.values(plugins)} />
),
ssr: false,
loading: () => <LoadingSpinner />,
});
And then you may just use the FullCalendarNoSSR Wrapper as component.
and hi, I'm very beginner to react. can you share a code in class based react component? I dont know how I should use dynamic with class based... :(((
  • reply
  • like

March 8, 2020 at 6:08pm
Hi Everyone, next/dynamic modules has been deprecated. I have replaced the code with loader but that is not working, I am getting "Loader is not a function" error. Is anyone able resolve the warning?
  • reply
  • like