docs: update docs and examples with named exports (#1352)

* Update docs and examples with named exports

* Fix Views usage

examples/Intro.md

@@ -21,16 +21,16 @@ Choose the localizer that best suits your needs, or write your own. Whatever you
 before you can use the calendar (you only need to set it up once).
 
 ```jsx
-import BigCalendar from 'react-big-calendar'
+import { Calendar, momentLocalizer } from 'react-big-calendar'
 import moment from 'moment'
 
 // Setup the localizer by providing the moment (or globalize) Object
 // to the correct localizer.
-const localizer = BigCalendar.momentLocalizer(moment) // or globalizeLocalizer
+const localizer = momentLocalizer(moment) // or globalizeLocalizer
 
 const MyCalendar = props => (
   <div>
-    <BigCalendar
+    <Calendar
       localizer={localizer}
       events={myEventsList}
       startAccessor="start"

examples/demos/basic.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import BigCalendar from 'react-big-calendar'
+import { Calendar, Views } from 'react-big-calendar'
 import events from '../events'
 import dates from '../../src/utils/dates'
 
-let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
+let allViews = Object.keys(Views).map(k => Views[k])
 
 const ColoredDateCellWrapper = ({ children }) =>
   React.cloneElement(React.Children.only(children), {
@@ -13,7 +13,7 @@ const ColoredDateCellWrapper = ({ children }) =>
   })
 
 let Basic = ({ localizer }) => (
-  <BigCalendar
+  <Calendar
     events={events}
     views={allViews}
     step={60}

examples/demos/cultures.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import BigCalendar from 'react-big-calendar'
+import { Calendar } from 'react-big-calendar'
 import events from '../events'
 import Layout from 'react-tackle-box/Layout'
 
@@ -37,7 +37,7 @@ class Cultures extends React.Component {
             </select>
           </Layout>
         </ExampleControlSlot.Entry>
-        <BigCalendar
+        <Calendar
           rtl={rtl}
           events={events}
           culture={this.state.culture}

examples/demos/customHeader.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import BigCalendar from 'react-big-calendar'
+import { Calendar } from 'react-big-calendar'
 import events from '../events'
 
 let MyOtherNestedComponent = () => <div>NESTED COMPONENT</div>
@@ -13,7 +13,7 @@ let MyCustomHeader = ({ label }) => (
 )
 
 let CustomHeader = ({ localizer }) => (
-  <BigCalendar
+  <Calendar
     events={events}
     localizer={localizer}
     defaultDate={new Date(2015, 3, 1)}

examples/demos/customView.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import dates from 'date-arithmetic'
 import events from '../events'
-import BigCalendar from 'react-big-calendar'
+import { Calendar, Views, Navigate } from 'react-big-calendar'
 import TimeGrid from 'react-big-calendar/lib/TimeGrid'
 import ExampleControlSlot from '../ExampleControlSlot'
 
@@ -32,10 +32,10 @@ MyWeek.range = date => {
 
 MyWeek.navigate = (date, action) => {
   switch (action) {
-    case BigCalendar.Navigate.PREVIOUS:
+    case Navigate.PREVIOUS:
       return dates.add(date, -3, 'day')
 
-    case BigCalendar.Navigate.NEXT:
+    case Navigate.NEXT:
       return dates.add(date, 3, 'day')
 
     default:
@@ -52,10 +52,10 @@ let CustomView = ({ localizer }) => (
     <ExampleControlSlot.Entry waitForOutlet>
       <strong>The Calendar below implments a custom 3-day week view</strong>
     </ExampleControlSlot.Entry>
-    <BigCalendar
+    <Calendar
       events={events}
       localizer={localizer}
-      defaultView={BigCalendar.Views.WEEK}
+      defaultView={Views.WEEK}
       defaultDate={new Date(2015, 3, 1)}
       views={{ month: true, week: MyWeek }}
     />

examples/demos/dnd.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import events from '../events'
-import BigCalendar from 'react-big-calendar'
+import { Calendar, Views } from 'react-big-calendar'
 import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
 
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.scss'
 
-const DragAndDropCalendar = withDragAndDrop(BigCalendar)
+const DragAndDropCalendar = withDragAndDrop(Calendar)
 
 class Dnd extends React.Component {
   constructor(props) {
@@ -84,7 +84,7 @@ class Dnd extends React.Component {
         onEventResize={this.resizeEvent}
         onSelectSlot={this.newEvent}
         onDragStart={console.log}
-        defaultView={BigCalendar.Views.MONTH}
+        defaultView={Views.MONTH}
         defaultDate={new Date(2015, 3, 12)}
       />
     )

examples/demos/dndOutsideSource.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import events from '../events'
-import BigCalendar from 'react-big-calendar'
+import { Calendar, Views } from 'react-big-calendar'
 import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
 import Layout from 'react-tackle-box/Layout'
 import Card from '../Card'
 
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.scss'
 
-const DragAndDropCalendar = withDragAndDrop(BigCalendar)
+const DragAndDropCalendar = withDragAndDrop(Calendar)
 
 const formatName = (name, count) => `${name} ID ${count}`
 
@@ -163,7 +163,7 @@ class Dnd extends React.Component {
           onEventResize={this.resizeEvent}
           onSelectSlot={this.newEvent}
           onD
-          defaultView={BigCalendar.Views.MONTH}
+          defaultView={Views.MONTH}
           defaultDate={new Date(2015, 3, 12)}
         />
       </div>

examples/demos/dndresource.js

@@ -1,10 +1,10 @@
 import React from 'react'
-import BigCalendar from 'react-big-calendar'
+import { Calendar } from 'react-big-calendar'
 import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
 
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.scss'
 
-const DragAndDropCalendar = withDragAndDrop(BigCalendar)
+const DragAndDropCalendar = withDragAndDrop(Calendar)
 
 const events = [
   {

examples/demos/popup.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import BigCalendar from 'react-big-calendar'
+import { Calendar } from 'react-big-calendar'
 import events from '../events'
 import ExampleControlSlot from '../ExampleControlSlot'
 
@@ -11,7 +11,7 @@ let Popup = ({ localizer }) => (
         days events to see an inline popup of all the events.
       </strong>
     </ExampleControlSlot.Entry>
-    <BigCalendar
+    <Calendar
       popup
       events={events}
       localizer={localizer}

examples/demos/rendering.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import BigCalendar from 'react-big-calendar'
+import { Calendar, Views } from 'react-big-calendar'
 import events from '../events'
 
 function Event({ event }) {
@@ -40,11 +40,11 @@ const customSlotPropGetter = date => {
 }
 
 let Rendering = ({ localizer }) => (
-  <BigCalendar
+  <Calendar
     events={events}
     localizer={localizer}
     defaultDate={new Date(2015, 3, 1)}
-    defaultView={BigCalendar.Views.AGENDA}
+    defaultView={Views.AGENDA}
     dayPropGetter={customDayPropGetter}
     slotPropGetter={customSlotPropGetter}
     components={{

examples/demos/resource.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import BigCalendar from 'react-big-calendar'
+import { Calendar, Views } from 'react-big-calendar'
 import ExampleControlSlot from '../ExampleControlSlot'
 
 const events = [
@@ -43,10 +43,10 @@ const resourceMap = [
 
 let Resource = ({ localizer }) => (
   <>
-    <BigCalendar
+    <Calendar
       events={events}
       localizer={localizer}
-      defaultView={BigCalendar.Views.DAY}
+      defaultView={Views.DAY}
       views={['day', 'work_week']}
       step={60}
       defaultDate={new Date(2018, 0, 29)}

examples/demos/selectable.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import BigCalendar from 'react-big-calendar'
+import { Calendar, Views } from 'react-big-calendar'
 import events from '../events'
 import ExampleControlSlot from '../ExampleControlSlot'
 
@@ -37,11 +37,11 @@ class Selectable extends React.Component {
             to select a date/time range.
           </strong>
         </ExampleControlSlot.Entry>
-        <BigCalendar
+        <Calendar
           selectable
           localizer={localizer}
           events={this.state.events}
-          defaultView={BigCalendar.Views.WEEK}
+          defaultView={Views.WEEK}
           scrollToTime={new Date(1970, 1, 1, 6)}
           defaultDate={new Date(2015, 3, 12)}
           onSelectEvent={event => alert(event.title)}

examples/demos/timeslots.js

@@ -1,14 +1,14 @@
 import React from 'react'
-import BigCalendar from 'react-big-calendar'
+import { Calendar, Views } from 'react-big-calendar'
 import events from '../events'
 
 let Timeslots = ({ localizer }) => (
-  <BigCalendar
+  <Calendar
     events={events}
     step={15}
     timeslots={8}
     localizer={localizer}
-    defaultView={BigCalendar.Views.WEEK}
+    defaultView={Views.WEEK}
     defaultDate={new Date(2015, 3, 12)}
   />
 )

src/Calendar.js

@@ -363,7 +363,7 @@ class Calendar extends React.Component {
      * }
      * ```
      *
-     * @type Calendar.Views ('month'|'week'|'work_week'|'day'|'agenda')
+     * @type Views ('month'|'week'|'work_week'|'day'|'agenda')
      * @View
      ['month', 'week', 'day', 'agenda']
      */
@@ -377,7 +377,7 @@ class Calendar extends React.Component {
      * Set to `null` to disable drill-down actions.
      *
      * ```js
-     * <BigCalendar
+     * <Calendar
      *   drilldownView="agenda"
      * />
      * ```
@@ -392,7 +392,7 @@ class Calendar extends React.Component {
      * Return `null` to disable drill-down actions.
      *
      * ```js
-     * <BigCalendar
+     * <Calendar
      *   getDrilldownView={(targetDate, currentViewName, configuredViewNames) =>
      *     if (currentViewName === 'month' && configuredViewNames.includes('week'))
      *       return 'week'
@@ -424,8 +424,8 @@ class Calendar extends React.Component {
      * Distance in pixels, from the edges of the viewport, the "show more" overlay should be positioned.
      *
      * ```jsx
-     * <BigCalendar popupOffset={30}/>
-     * <BigCalendar popupOffset={{x: 30, y: 20}}/>
+     * <Calendar popupOffset={30}/>
+     * <Calendar popupOffset={{x: 30, y: 20}}/>
      * ```
      */
     popupOffset: PropTypes.oneOfType([

src/addons/dragAndDrop/README.md

@@ -1,12 +1,12 @@
 ### Drag and Drop
 
 ```js
-import BigCalendar from 'react-big-calendar'
+import { Calendar } from 'react-big-calendar'
 import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
 
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'
 
-const DraggableCalendar = withDragAndDrop(BigCalendar)
+const DraggableCalendar = withDragAndDrop(Calendar)
 
 /* ... */