NEXTJS Full calender

Question

if anyone has any idea to implement full calender please share using nextjs. i tried using this demo https://fullcalendar.io/docs/react But it shows an error like this

Here is the code snipnet

import React from 'react'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!

export default class Calender extends React.Component {
  render() {
    return (
      <FullCalendar
        plugins={[ dayGridPlugin ]}
        initialView="dayGridMonth"
      />
    )
  }
}

Does this answer your question: [fullcalendar - NextJS - Dynamic import doesn't show calendar](https://stackoverflow.com/questions/66750199/fullcalendar-nextjs-dynamic-import-doesnt-show-calendar)? — juliomalves, Apr 08 '22 at 17:46

score 0 · Answer 1 · edited Jul 16 '23 at 06:20

import FullCalendar from '@fullcalendar/react';

import dayGridPlugin from '@fullcalendar/daygrid';

import timeGridPlugin from '@fullcalendar/timegrid';

import interactionPlugin from '@fullcalendar/interaction';

const FullCalender = () =>{

return (

  <FullCalendar
     
plugins={[
dayGridPlugin,
timeGridPlugin, 
interactionPlugin
]}
headerToolbar={{
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay',
     }}
   />
)
}

export default FullCalender

NEXTJS Full calender

1 Answers1