NEXTJS Full calender

if anyone has any idea to implement full calender please share using nextjs. i tried using this demo 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" /> ) }
}

1 Answer

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