merged explicitly yours

examples/App.js

@@ -57,7 +57,7 @@ const EXAMPLES = {
   dndOutsideSource: 'Addon: Drag and drop (from outside calendar)',
 }
 
-const DEFAULT_EXAMPLE = 'basic'
+const DEFAULT_EXAMPLE = 'dnd'
 
 class Example extends React.Component {
   constructor(...args) {

examples/demos/dnd.js

@@ -97,6 +97,10 @@ class Dnd extends React.Component {
     // })
   }
 
+  onDragStart(e) {
+    console.log('onDragStart', e)
+  }
+
   render() {
     return (
       <DragAndDropCalendar
@@ -108,8 +112,8 @@ class Dnd extends React.Component {
         onEventResize={this.resizeEvent}
         showMultiDayTimes={true}
         onSelectSlot={this.newEvent}
-        onDragStart={console.log}
-        defaultView={Views.MONTH}
+        onDragStart={this.onDragStart}
+        defaultView={Views.WEEK}
         defaultDate={new Date(2015, 3, 12)}
         popup={true}
         dragFromOutsideItem={

examples/events.js

@@ -1,6 +1,6 @@
 const now = new Date()
 
-export default [
+const DEFAULT_EXAMPLE = [
   {
     id: 0,
     title: 'All Day Event very long title',
@@ -178,3 +178,22 @@ export default [
     end: new Date(2015, 3, 14, 20, 0, 0),
   },
 ]
+
+function getRandomInt(inputMin, inputMax) {
+  const min = Math.ceil(inputMin)
+  const max = Math.floor(inputMax)
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+let exampleEvents = DEFAULT_EXAMPLE
+for (let i = 0; i < 800; i++) {
+  const date = getRandomInt(12, 18)
+  const hour = getRandomInt(1, 22)
+  exampleEvents = exampleEvents.concat({
+    id: exampleEvents.length,
+    title: `${i} random event`,
+    start: new Date(2015, 3, date, hour, getRandomInt(1, 59), 0),
+    end: new Date(2015, 3, date, hour + 1, getRandomInt(1, 59), 0),
+  })
+}
+export default exampleEvents

src/Calendar.js

@@ -10,7 +10,7 @@ import {
   views as componentViews,
 } from './utils/propTypes'
 
-import { notify } from './utils/helpers'
+import { notify, hasStateOrPropsChanged } from './utils/helpers'
 import { navigate, views } from './utils/constants'
 import { mergeWithDefaults } from './localizer'
 import message from './utils/messages'
@@ -92,6 +92,7 @@ class Calendar extends React.Component {
      * @controllable onNavigate
      */
     date: PropTypes.instanceOf(Date),
+    context: PropTypes.object,
 
     /**
      * The current view of the calendar.
@@ -874,6 +875,10 @@ class Calendar extends React.Component {
     }
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
+    const { context } = this.props
+    if (context === nextProps.context) {
+      return
+    }
     this.setState({ context: this.getContext(nextProps) })
   }
 
@@ -971,6 +976,16 @@ class Calendar extends React.Component {
     return getDrilldownView(date, view, Object.keys(this.getViews()))
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return hasStateOrPropsChanged(
+      this.state,
+      nextState,
+      this.props,
+      nextProps,
+      ['selected']
+    )
+  }
+
   render() {
     let {
       view,

src/Day.js

@@ -3,8 +3,20 @@ import React from 'react'
 
 import { navigate } from './utils/constants'
 import TimeGrid from './TimeGrid'
+import { hasStateOrPropsChanged } from './utils/helpers'
 
 class Day extends React.Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return hasStateOrPropsChanged(
+      this.state,
+      nextState,
+      this.props,
+      nextProps,
+      [],
+      false
+    )
+  }
+
   render() {
     /**
      * This allows us to default min, max, and scrollToTime

src/DayColumn.js

@@ -7,7 +7,7 @@ import Selection, { getBoundsForNode, isEvent } from './Selection'
 import * as TimeSlotUtils from './utils/TimeSlots'
 import { isSelected } from './utils/selection'
 
-import { notify } from './utils/helpers'
+import { notify, hasStateOrPropsChanged } from './utils/helpers'
 import * as DayEventLayout from './utils/DayEventLayout'
 import TimeSlotGroup from './TimeSlotGroup'
 import TimeGridEvent from './TimeGridEvent'
@@ -104,6 +104,17 @@ class DayColumn extends React.Component {
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return hasStateOrPropsChanged(
+      this.state,
+      nextState,
+      this.props,
+      nextProps,
+      [],
+      false
+    )
+  }
+
   render() {
     const {
       date,

src/Month.js

@@ -6,7 +6,7 @@ import clsx from 'clsx'
 import chunk from 'lodash/chunk'
 
 import { navigate, views } from './utils/constants'
-import { notify } from './utils/helpers'
+import { notify, hasStateOrPropsChanged } from './utils/helpers'
 import getPosition from 'dom-helpers/position'
 import * as animationFrame from 'dom-helpers/animationFrame'
 
@@ -15,7 +15,6 @@ import Overlay from 'react-overlays/Overlay'
 import DateContentRow from './DateContentRow'
 import Header from './Header'
 import DateHeader from './DateHeader'
-
 import { inRange, sortEvents } from './utils/eventLevels'
 
 let eventsForWeek = (evts, start, end, accessors, localizer) =>
@@ -34,6 +33,17 @@ class MonthView extends React.Component {
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return hasStateOrPropsChanged(
+      this.state,
+      nextState,
+      this.props,
+      nextProps,
+      [],
+      false
+    )
+  }
+
   UNSAFE_componentWillReceiveProps({ date }) {
     const { date: propsDate, localizer } = this.props
     this.setState({

src/Week.js

@@ -2,8 +2,19 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { navigate } from './utils/constants'
 import TimeGrid from './TimeGrid'
+import { hasStateOrPropsChanged } from './utils/helpers'
 
 class Week extends React.Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return hasStateOrPropsChanged(
+      this.state,
+      nextState,
+      this.props,
+      nextProps,
+      [],
+      false
+    )
+  }
   render() {
     /**
      * This allows us to default min, max, and scrollToTime

src/WorkWeek.js

@@ -3,6 +3,7 @@ import React from 'react'
 
 import Week from './Week'
 import TimeGrid from './TimeGrid'
+import { hasStateOrPropsChanged } from './utils/helpers'
 
 function workWeekRange(date, options) {
   return Week.range(date, options).filter(
@@ -11,6 +12,17 @@ function workWeekRange(date, options) {
 }
 
 class WorkWeek extends React.Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return hasStateOrPropsChanged(
+      this.state,
+      nextState,
+      this.props,
+      nextProps,
+      [],
+      false
+    )
+  }
+
   render() {
     /**
      * This allows us to default min, max, and scrollToTime

src/addons/dragAndDrop/withDragAndDrop.js

@@ -8,6 +8,7 @@ import EventContainerWrapper from './EventContainerWrapper'
 import WeekWrapper from './WeekWrapper'
 import { mergeComponents } from './common'
 import { DnDContext } from './DnDContext'
+import { hasStateOrPropsChanged } from '../../utils/helpers'
 
 export default function withDragAndDrop(Calendar) {
   class DragAndDropCalendar extends React.Component {
@@ -39,12 +40,18 @@ export default function withDragAndDrop(Calendar) {
     constructor(...args) {
       super(...args)
 
-      const { components } = this.props
+      const { components, elementProps, onDragOver } = this.props
 
       this.components = mergeComponents(components, {
         eventWrapper: EventWrapper,
         eventContainerWrapper: EventContainerWrapper,
         weekWrapper: WeekWrapper,
+        elementPropsWithDropFromOutside: this.props.onDropFromOutside
+          ? {
+              ...elementProps,
+              onDragOver: onDragOver || this.defaultOnDragOver,
+            }
+          : elementProps,
       })
 
       this.state = { interacting: false }
@@ -98,21 +105,24 @@ export default function withDragAndDrop(Calendar) {
       if (action === 'resize' && onEventResize) onEventResize(interactionInfo)
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+      return hasStateOrPropsChanged(
+        this.state,
+        nextState,
+        this.props,
+        nextProps,
+        []
+      )
+    }
+
     render() {
-      const { selectable, elementProps, ...props } = this.props
+      const { selectable, ...props } = this.props
       const { interacting } = this.state
 
       delete props.onEventDrop
       delete props.onEventResize
       props.selectable = selectable ? 'ignoreEvents' : false
 
-      const elementPropsWithDropFromOutside = this.props.onDropFromOutside
-        ? {
-            ...elementProps,
-            onDragOver: this.props.onDragOver || this.defaultOnDragOver,
-          }
-        : elementProps
-
       props.className = clsx(
         props.className,
         'rbc-addons-dnd',
@@ -124,7 +134,7 @@ export default function withDragAndDrop(Calendar) {
         <DnDContext.Provider value={context}>
           <Calendar
             {...props}
-            elementProps={elementPropsWithDropFromOutside}
+            elementProps={this.state.elementPropsWithDropFromOutside}
             components={this.components}
           />
         </DnDContext.Provider>

src/utils/dates.js

@@ -171,3 +171,15 @@ export function yesterday() {
 export function tomorrow() {
   return dates.add(dates.startOf(new Date(), 'day'), 1, 'day')
 }
+
+export function isSameDay(a, b) {
+  return dates.eq(a, b, 'day')
+}
+
+export function isSameMinute(a, b) {
+  return dates.eq(a, b, 'minutes')
+}
+
+export function isValidJSDate(dateObject) {
+  return typeof dateObject === 'object' && dateObject > 0
+}