React big calendar has no default export

Question

I wanted to use react-big-calendar, I installed the package with npm (version 0.28.0), but I was able to use the component because there is apparently no default export. The exact error is

Attempted import error: 'react-big-calendar' does not contain a default export (imported as 'BigCalendar').

If I should not use default export, I did not find anywhere what I should import instead. I used this tutorial in order to make it work. I searched on the internet for similar issue, but I did not find anything that provide a solution. My code so far is very minimalist, since I was not able to start anything

import BigCalendar from 'react-big-calendar'
import moment from 'moment'

const MyComponent = props => {
  const localizer = BigCalendar.momentLocalizer(moment)
  return(
    <div>
      <BigCalendar localizer={localizer}/>
    <div>
  )
}

Thank you in advance for any response.

The GH page shows them using a named export for `Calendar`. Try that? It seems like the other docs might be misleading? https://github.com/jquense/react-big-calendar — jmargolisvt, Oct 10 '20 at 15:58

score 10 · Accepted Answer · answered Oct 10 '20 at 16:00

10

I will suggest you to try this out.

// the imports
import { Calendar, momentLocalizer  } from 'react-big-calendar' 
import 'react-big-calendar/lib/css/react-big-calendar.css';
import moment from 'moment'
const localizer = momentLocalizer(moment)

// The component you should use instead the one you mentioned.
 <Calendar localizer={localizer} />

let me know if that works for you, I remember having the same issue and I solved by doing this.

Best regards, I hope it helps!

answered Oct 10 '20 at 16:00

Rene Polo

831
7
18

can you please how can we change default calender time. Some customization has been done and i need to display calender starting date from 8Am to 6pm currently it showing 00:00 -> 23:00 can we do? – khizer Nov 30 '21 at 06:46

score 3 · Answer 2 · answered Oct 10 '20 at 16:27

3

You should use named exports provided by the library. Additionally library exports Calendar component which should replace your BigCalendar default import.

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

const MyComponent = props => {
  const localizer = momentLocalizer(moment)
  return(
    <div>
      <Calendar localizer={localizer}/>
    <div>
  )
}

answered Oct 10 '20 at 16:27

twboc

1,452
13
17

Thank you for your time, Rene Polo proposed the same thing and it works. – Franck Bigand Oct 10 '20 at 16:53
this answer explains it, perfectly imo. – Daithí May 04 '21 at 19:25

score 0 · Answer 3 · answered Sep 26 '22 at 21:14

0

npm install --save @types/react-big-calendar

answered Sep 26 '22 at 21:14

Mohak Londhe

372
2
9

React big calendar has no default export

3 Answers3