merge of latest head changes

.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": ["jason"],
-  plugins: [
-    ['transform-react-remove-prop-types', { mode: 'wrap' }],
+  "plugins": [
+    ["transform-react-remove-prop-types", { "mode": "wrap" }]
   ],
   "env": {
     "esm": {

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 470853,
-    "minified": 153064,
-    "gzipped": 42298
+    "bundled": 471349,
+    "minified": 153211,
+    "gzipped": 42302
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 413805,
-    "minified": 136004,
-    "gzipped": 38362
+    "bundled": 414053,
+    "minified": 136181,
+    "gzipped": 38428
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 167523,
-    "minified": 80477,
-    "gzipped": 19800,
+    "bundled": 168039,
+    "minified": 80688,
+    "gzipped": 19864,
     "treeshaked": {
       "rollup": {
-        "code": 62050,
+        "code": 62227,
         "import_statements": 1470
       },
       "webpack": {
-        "code": 65556
+        "code": 65735
       }
     }
   }

CHANGELOG.md

@@ -1,3 +1,27 @@
+## [0.20.4](https://github.com/intljusticemission/react-big-calendar/compare/v0.20.3...v0.20.4) (2019-03-21)
+
+
+### Bug Fixes
+
+* allow override onShowMore callback ([#1214](https://github.com/intljusticemission/react-big-calendar/issues/1214)) ([8fefeee](https://github.com/intljusticemission/react-big-calendar/commit/8fefeee)), closes [/github.com/intljusticemission/react-big-calendar/blob/f9a873368a78f5ced81b799c4dffe1095b3ab712/src/Calendar.jsx#L280](https://github.com//github.com/intljusticemission/react-big-calendar/blob/f9a873368a78f5ced81b799c4dffe1095b3ab712/src/Calendar.jsx/issues/L280) [/github.com/intljusticemission/react-big-calendar/blob/1d62c432eaa183ed6b38f08cfcec5ee7edcbfe41/src/Month.js#L300-L307](https://github.com//github.com/intljusticemission/react-big-calendar/blob/1d62c432eaa183ed6b38f08cfcec5ee7edcbfe41/src/Month.js/issues/L300-L307) [#1147](https://github.com/intljusticemission/react-big-calendar/issues/1147)
+* firefox event click bug ([#1262](https://github.com/intljusticemission/react-big-calendar/issues/1262)) ([b526416](https://github.com/intljusticemission/react-big-calendar/commit/b526416)), closes [#1173](https://github.com/intljusticemission/react-big-calendar/issues/1173)
+* issue with gutter width initialization ([#1181](https://github.com/intljusticemission/react-big-calendar/issues/1181)) ([69b28af](https://github.com/intljusticemission/react-big-calendar/commit/69b28af))
+* misplacement of current time indicator ([#1239](https://github.com/intljusticemission/react-big-calendar/issues/1239)) ([2d6e99e](https://github.com/intljusticemission/react-big-calendar/commit/2d6e99e)), closes [#1054](https://github.com/intljusticemission/react-big-calendar/issues/1054)
+* remove duplicate getter prop ([#1185](https://github.com/intljusticemission/react-big-calendar/issues/1185)) ([6b90182](https://github.com/intljusticemission/react-big-calendar/commit/6b90182))
+* remove global window from Map() usage, update eslint rules for new es6 environment ([#1195](https://github.com/intljusticemission/react-big-calendar/issues/1195)) ([4768188](https://github.com/intljusticemission/react-big-calendar/commit/4768188))
+* selecting events in mobile browsers ([#1233](https://github.com/intljusticemission/react-big-calendar/issues/1233)) ([2bc9fee](https://github.com/intljusticemission/react-big-calendar/commit/2bc9fee))
+
+
+### Features
+
+* add ability to set custom resource headers ([#1187](https://github.com/intljusticemission/react-big-calendar/issues/1187)) ([6708a45](https://github.com/intljusticemission/react-big-calendar/commit/6708a45)), closes [#1174](https://github.com/intljusticemission/react-big-calendar/issues/1174)
+* adding bounds and box on slot select in Month view ([#1241](https://github.com/intljusticemission/react-big-calendar/issues/1241)) ([2a870b0](https://github.com/intljusticemission/react-big-calendar/commit/2a870b0))
+* remove propTypes in production ([#1180](https://github.com/intljusticemission/react-big-calendar/issues/1180)) ([ce0d56b](https://github.com/intljusticemission/react-big-calendar/commit/ce0d56b))
+
+
+
+
+
 ## [0.20.2](https://github.com/intljusticemission/react-big-calendar/compare/v0.20.0...v0.20.2) (2018-11-07)
 
 

README.md

@@ -8,26 +8,26 @@ Inspired by [Full Calendar](http://fullcalendar.io/).
 
 ## Use and Setup
 
-`npm install react-big-calendar --save`
+`yarn add react-big-calendar` or `npm install --save react-big-calendar`
 
 Include `react-big-calendar/lib/css/react-big-calendar.css` for styles, and make sure your calendar's container
 element has a height, or the calendar won't be visible.
 
 ## Starters
 
-* [react-big-calendar](https://github.com/arecvlohe/rbc-starter)
-* [react-big-calendar with drag and drop](https://github.com/arecvlohe/rbc-with-dnd-starter)
+- [react-big-calendar](https://github.com/arecvlohe/rbc-starter)
+- [react-big-calendar with drag and drop](https://github.com/arecvlohe/rbc-with-dnd-starter)
 
 ## Run examples locally
 
-```
+```sh
 $ git clone git@github.com:intljusticemission/react-big-calendar.git
 $ cd react-big-calendar
-$ npm install
-$ npm run examples
+$ yarn
+$ yarn examples
 ```
 
-* Open [localhost:3000/examples/index.html](http://localhost:3000/examples/index.html).
+- Open [localhost:3000/examples/index.html](http://localhost:3000/examples/index.html).
 
 ### Localization and Date Formatting
 
@@ -42,7 +42,7 @@ Regardless of your choice, you **must** choose a localizer to use this library:
 import BigCalendar from 'react-big-calendar'
 import moment from 'moment'
 
-const localizer = BigCalendar.momentLocalizer(moment) 
+const localizer = BigCalendar.momentLocalizer(moment)
 
 const MyCalendar = props => (
   <div>
@@ -62,7 +62,7 @@ const MyCalendar = props => (
 import BigCalendar from 'react-big-calendar'
 import globalize from 'globalize'
 
-const localizer = BigCalendar.globalizeLocalizer(globalize) 
+const localizer = BigCalendar.globalizeLocalizer(globalize)
 
 const MyCalendar = props => (
   <div>

examples/App.js

@@ -25,6 +25,7 @@ import Resource from './demos/resource'
 import DndResource from './demos/dndresource'
 import Timeslots from './demos/timeslots'
 import Dnd from './demos/dnd'
+import DndOutsideSource from './demos/dndOutsideSource'
 import Dropdown from 'react-bootstrap/lib/Dropdown'
 import MenuItem from 'react-bootstrap/lib/MenuItem'
 
@@ -43,6 +44,7 @@ const EXAMPLES = {
   customView: 'Custom Calendar Views',
   resource: 'Resource Scheduling',
   dnd: 'Addon: Drag and drop',
+  dndOutsideSource: 'Addon: Drag and drop (from outside calendar)',
 }
 
 const DEFAULT_EXAMPLE = 'basic'
@@ -78,6 +80,7 @@ class Example extends React.Component {
       timeslots: Timeslots,
       dnd: Dnd,
       dndresource: DndResource,
+      dndOutsideSource: DndOutsideSource,
     }[selected]
 
     return (

examples/Intro.md

@@ -1,8 +1,10 @@
 # <a id='intro' href='#intro'>Getting Started</a>
 
-You can install `react-big-calendar` via [npm](https://www.npmjs.com/):
+You can install `react-big-calendar` via [yarn](https://yarnpkg.com/en/) or [npm](https://www.npmjs.com/):
 
-    npm i --save react-big-calendar
+_yarn:_ `yarn add react-big-calendar`
+
+_npm:_ `npm install --save react-big-calendar`
 
 Styles can be found at: `react-big-calendar/lib/css/react-big-calendar.css`, and should be included on the page
 with the calendar component. Also make sure that your calendar's container

examples/demos/dnd.js

@@ -83,6 +83,7 @@ class Dnd extends React.Component {
         resizable
         onEventResize={this.resizeEvent}
         onSelectSlot={this.newEvent}
+        onDragStart={console.log}
         defaultView={BigCalendar.Views.MONTH}
         defaultDate={new Date(2015, 3, 12)}
       />

examples/demos/dndOutsideSource.js

@@ -0,0 +1,174 @@
+import React from 'react'
+import events from '../events'
+import BigCalendar 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.less'
+
+const DragAndDropCalendar = withDragAndDrop(BigCalendar)
+
+const formatName = (name, count) => `${name} ID ${count}`
+
+class Dnd extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      events: events,
+      draggedEvent: null,
+      counters: {
+        item1: 0,
+        item2: 0,
+      },
+    }
+  }
+
+  handleDragStart = name => {
+    this.setState({ draggedEvent: name })
+  }
+
+  customOnDragOver = event => {
+    // check for undroppable is specific to this example
+    // and not part of API. This just demonstrates that
+    // onDragOver can optionally be passed to conditionally
+    // allow draggable items to be dropped on cal, based on
+    // whether event.preventDefault is called
+    if (this.state.draggedEvent !== 'undroppable') {
+      console.log('preventDefault')
+      event.preventDefault()
+    }
+  }
+
+  onDropFromOutside = ({ start, end, allDay }) => {
+    const { draggedEvent, counters } = this.state
+    const event = {
+      title: formatName(draggedEvent, counters[draggedEvent]),
+      start,
+      end,
+      isAllDay: allDay,
+    }
+    const updatedCounters = {
+      ...counters,
+      [draggedEvent]: counters[draggedEvent] + 1,
+    }
+    this.setState({ draggedEvent: null, counters: updatedCounters })
+    this.newEvent(event)
+  }
+
+  moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
+    const { events } = this.state
+
+    const idx = events.indexOf(event)
+    let allDay = event.allDay
+
+    if (!event.allDay && droppedOnAllDaySlot) {
+      allDay = true
+    } else if (event.allDay && !droppedOnAllDaySlot) {
+      allDay = false
+    }
+
+    const updatedEvent = { ...event, start, end, allDay }
+
+    const nextEvents = [...events]
+    nextEvents.splice(idx, 1, updatedEvent)
+
+    this.setState({
+      events: nextEvents,
+    })
+
+    // alert(`${event.title} was dropped onto ${updatedEvent.start}`)
+  }
+
+  resizeEvent = ({ event, start, end }) => {
+    const { events } = this.state
+
+    const nextEvents = events.map(existingEvent => {
+      return existingEvent.id == event.id
+        ? { ...existingEvent, start, end }
+        : existingEvent
+    })
+
+    this.setState({
+      events: nextEvents,
+    })
+
+    //alert(`${event.title} was resized to ${start}-${end}`)
+  }
+
+  newEvent(event) {
+    let idList = this.state.events.map(a => a.id)
+    let newId = Math.max(...idList) + 1
+    let hour = {
+      id: newId,
+      title: event.title,
+      allDay: event.isAllDay,
+      start: event.start,
+      end: event.end,
+    }
+    this.setState({
+      events: this.state.events.concat([hour]),
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <Card
+          className="examples--header"
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+          }}
+        >
+          <h4 style={{ color: 'gray', width: '100%' }}>Outside Drag Sources</h4>
+          {Object.entries(this.state.counters).map(([name, count]) => (
+            <div
+              style={{
+                border: '2px solid gray',
+                borderRadius: '4px',
+                width: '100px',
+                margin: '10px',
+              }}
+              draggable="true"
+              key={name}
+              onDragStart={() => this.handleDragStart(name)}
+            >
+              {formatName(name, count)}
+            </div>
+          ))}
+          <div
+            style={{
+              border: '2px solid gray',
+              borderRadius: '4px',
+              width: '100px',
+              margin: '10px',
+            }}
+            draggable="true"
+            key={name}
+            onDragStart={() => this.handleDragStart('undroppable')}
+          >
+            Draggable but not for calendar.
+          </div>
+        </Card>
+        <DragAndDropCalendar
+          selectable
+          localizer={this.props.localizer}
+          events={this.state.events}
+          onEventDrop={this.moveEvent}
+          onDropFromOutside={this.onDropFromOutside}
+          onDragOver={this.customOnDragOver}
+          resizable
+          onEventResize={this.resizeEvent}
+          onSelectSlot={this.newEvent}
+          onD
+          defaultView={BigCalendar.Views.MONTH}
+          defaultDate={new Date(2015, 3, 12)}
+        />
+      </div>
+    )
+  }
+}
+
+export default Dnd

examples/events.js

@@ -1,3 +1,5 @@
+const now = new Date()
+
 export default [
   {
     id: 0,
@@ -103,4 +105,10 @@ export default [
     start: new Date(new Date().setHours(new Date().getHours() - 3)),
     end: new Date(new Date().setHours(new Date().getHours() + 3)),
   },
+  {
+    id: 15,
+    title: 'Point in Time Event',
+    start: now,
+    end: now,
+  },
 ]

examples/webpack.config.js

@@ -36,5 +36,8 @@ module.exports = {
       },
     ],
   },
-  plugins: [plugins.html(), plugins.extractCss()],
+  plugins: [
+    plugins.html({ title: 'React Big Calendar' }),
+    plugins.extractCss(),
+  ],
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-big-calendar",
-  "version": "0.20.3",
+  "version": "0.20.4",
   "description": "Calendar! with events",
   "author": "Jason Quense <monastic.panic@gmail.com>",
   "repository": "intljusticemission/react-big-calendar",