Trouble in Next js

[levis-creator]

Check that this is really a bug

• I confirm

Reproduction link

https://github.com/jquense/react-big-calendar/blob/master/stories/demos/exampleCode/basic.js

Bug description

I have added react-big-calender library inside my app it is displaying the calendar but i cannot navigate to the different options, I have mirrored one of the the documentation example but still having the same issue

Expected Behavior

Expected to be able to navigate within the tabs option

Actual Behavior

Unable to navigate within the tabs

react-big-calendar version

1.13.1

React version

18

Platform/Target and Browser Versions

All

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[Shanmugavadivelu7]

Hi @levis-creator I faced the issue also. This code works well for me. Do check it out

`"use client";
import { useState } from 'react';
import { Calendar, dateFnsLocalizer } from 'react-big-calendar';
import { format, parse, startOfWeek, getDay } from 'date-fns';
import "react-big-calendar/lib/css/react-big-calendar.css";

const locales = {
'en-US': require('date-fns/locale/en-US'),
};

const localizer = dateFnsLocalizer({
format,
parse,
startOfWeek,
getDay,
locales,
});

const events = [
{
title: 'Lorem',
start: new Date(2023, 6, 21, 9, 0),
end: new Date(2023, 6, 21, 11, 0),
resourceId: 1,
status: 'Check In',
},
{
title: 'Ipsum',
start: new Date(2023, 6, 21, 10, 0),
end: new Date(2023, 6, 21, 10, 10),
resourceId: 1,
status: 'Completed',
},
// Add more events here
];

function DashboardCalendar({ className }) {
const [view, setView] = useState('week');
const [date, setDate] = useState(new Date());

const handleNavigate = (newDate) => {
setDate(newDate);
};

const handleViewChange = (newView) => {
setView(newView);
};

return (
<div className={${className}} style={{ height: '500px' }}>


);
}

export default DashboardCalendar;`

[Webrizen]

same issue. +1

[levis-creator]

Hi @levis-creator I faced the issue also. This code works well for me. Do check it out

`"use client"; import { useState } from 'react'; import { Calendar, dateFnsLocalizer } from 'react-big-calendar'; import { format, parse, startOfWeek, getDay } from 'date-fns'; import "react-big-calendar/lib/css/react-big-calendar.css";

const locales = { 'en-US': require('date-fns/locale/en-US'), };

const localizer = dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales, });

const events = [ { title: 'Lorem', start: new Date(2023, 6, 21, 9, 0), end: new Date(2023, 6, 21, 11, 0), resourceId: 1, status: 'Check In', }, { title: 'Ipsum', start: new Date(2023, 6, 21, 10, 0), end: new Date(2023, 6, 21, 10, 10), resourceId: 1, status: 'Completed', }, // Add more events here ];

function DashboardCalendar({ className }) { const [view, setView] = useState('week'); const [date, setDate] = useState(new Date());

const handleNavigate = (newDate) => { setDate(newDate); };

const handleViewChange = (newView) => { setView(newView); };

return ( <div className={${className}} style={{ height: '500px' }}> ); }

export default DashboardCalendar;`

Thank you very much this is very helpful

[hak33m16]

Hi @levis-creator I faced the issue also. This code works well for me. Do check it out

@Shanmugavadivelu7 this just results in a blank page. The DashboardCalendar isn't even being used. How did this work well for you? Do you have a full working example?

[Shanmugavadivelu7]

@levis-creator is this still a issue, if not please close the issue

[Shanmugavadivelu7]

@hak33m16 create a new page in next js. Copy paste the code and navigate to your route in browser.

[SanjoSolutions]

One can make it work by providing date, view, onNavigate and onView explicitly:

const [view, setView] = useState<View>(Views.MONTH)
const [date, setDate] = useState<Date>(new Date())

return (
  <Calendar
    // ...
    view={view}
    onView={setView}
    date={date}
    onNavigate={setDate}
  />
)

(the code snippet can be used freely)

[s-kennedy]

Thanks for the tips, I ran into this issue as well (on [email protected] and [email protected]). Here's the full working component:

"use client"

import { Calendar, luxonLocalizer, Views } from 'react-big-calendar'
import { DateTime } from 'luxon'
const localizer = luxonLocalizer(DateTime, { firstDayOfWeek: 7 })
import { useState } from 'react'
import "react-big-calendar/lib/css/react-big-calendar.css"

const CalendarView = ({ events }) => {
  const [view, setView] = useState(Views.MONTH)
  const [date, setDate] = useState(new Date())

  const handleNavigate = (newDate) => {setDate(newDate)}
  const handleViewChange = (newView) => {setView(newView)}

  return (
    <div id="calendar-view">
        <Calendar
          localizer={localizer}
          events={events}
          startAccessor="start"
          endAccessor="end"
          allDayAccessor="all_day"
          view={view}
          onView={handleViewChange}
          date={date}
          onNavigate={handleNavigate}
        />
    </div>
  )
}

export default CalendarView

Don't forget to set a height on the calendar wrapper div!