Merge remote-tracking branch 'upstream/master'

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 509547,
-    "minified": 149932,
-    "gzipped": 45769
+    "bundled": 497580,
+    "minified": 153472,
+    "gzipped": 47831
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 446246,
-    "minified": 130919,
-    "gzipped": 41339
+    "bundled": 428485,
+    "minified": 132196,
+    "gzipped": 42237
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 176376,
-    "minified": 84316,
-    "gzipped": 21023,
+    "bundled": 185554,
+    "minified": 87500,
+    "gzipped": 21669,
     "treeshaked": {
       "rollup": {
-        "code": 60196,
+        "code": 62542,
         "import_statements": 1590
       },
       "webpack": {
-        "code": 64714
+        "code": 67195
       }
     }
   }

README.md

@@ -2,7 +2,7 @@
 
 An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach.
 
-[**DEMO and Docs**](http://jquense.github.io/react-big-calendar/examples/index.html)
+[**DEMO and Docs**](https://jquense.github.io/react-big-calendar/examples/index.html)
 
 Inspired by [Full Calendar](http://fullcalendar.io/).
 
@@ -31,8 +31,8 @@ $ yarn examples
 
 ### Localization and Date Formatting
 
-`react-big-calendar` includes two options for handling the date formatting and culture localization, depending
-on your preference of DateTime libraries. You can use either the [Moment.js](http://momentjs.com/) or [Globalize.js](https://github.com/jquery/globalize) localizers.
+`react-big-calendar` includes three options for handling the date formatting and culture localization, depending
+on your preference of DateTime libraries. You can use either the [Moment.js](https://momentjs.com/), [Globalize.js](https://github.com/jquery/globalize) or [date-fns](https://date-fns.org/) localizers.
 
 Regardless of your choice, you **must** choose a localizer to use this library:
 
@@ -78,17 +78,20 @@ const MyCalendar = props => (
 )
 ```
 
-#### date-fns 2.0
+#### date-fns v2
 
 ```js
 import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
 import format from 'date-fns/format'
 import parse from 'date-fns/parse'
 import startOfWeek from 'date-fns/startOfWeek'
 import getDay from 'date-fns/getDay'
+import enUS from 'date-fns/locale/en-US'
+
 const locales = {
-  'en-US': require('date-fns/locale/en-US'),
+  'en-US': enUS
 }
+
 const localizer = dateFnsLocalizer({
   format,
   parse,
@@ -127,4 +130,4 @@ Big Calendar. Carefully test each change accordingly.
 
 ## Join us on Reactiflux Discord
 
-Join us on [Reactiflux Discord](https://discord.gg/PPgj6tb) community under the channel #libraries if you have any questions.
+Join us on [Reactiflux Discord](https://discord.gg/reactiflux) community under the channel #libraries if you have any questions.

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional']
+}

examples/App.js

@@ -16,6 +16,7 @@ import './prism.scss'
 import Card from './Card'
 import ExampleControlSlot from './ExampleControlSlot'
 import Basic from './demos/basic'
+import BackgroundEvents from './demos/backgroundEvents'
 import Selectable from './demos/selectable'
 import CreateEventWithNoOverlap from './demos/createEventWithNoOverlap'
 import Cultures from './demos/cultures'
@@ -44,6 +45,7 @@ const EXAMPLES = {
   timeslots: 'Custom Time Grids',
   rendering: 'Customized Component Rendering',
   customView: 'Custom Calendar Views',
+  backgroundEvents: 'Background Events',
   resource: 'Resource Scheduling',
   dnd: 'Addon: Drag and drop',
   dndresource: 'Resource Drag and drop',
@@ -74,6 +76,7 @@ class Example extends React.Component {
     let selected = this.state.selected
     let Current = {
       basic: Basic,
+      backgroundEvents: BackgroundEvents,
       selectable: Selectable,
       cultures: Cultures,
       popup: Popup,

examples/backgroundEvents.js

@@ -0,0 +1,8 @@
+export default [
+  {
+    id: 0,
+    title: 'Available for Clients',
+    start: new Date(2015, 3, 13, 6),
+    end: new Date(2015, 3, 13, 18),
+  },
+]

examples/demos/backgroundEvents.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Calendar, Views } from 'react-big-calendar'
+import events from '../events'
+import backgroundEvents from '../backgroundEvents'
+import * as dates from '../../src/utils/dates'
+
+let allViews = Object.keys(Views).map(k => Views[k])
+
+let Basic = ({ localizer }) => (
+  <Calendar
+    events={events}
+    defaultView={Views.DAY}
+    views={allViews}
+    step={60}
+    showMultiDayTimes
+    max={dates.add(dates.endOf(new Date(2015, 17, 1), 'day'), -1, 'hours')}
+    defaultDate={new Date(2015, 3, 13)}
+    localizer={localizer}
+    backgroundEvents={backgroundEvents}
+    dayLayoutAlgorithm={'no-overlap'}
+  />
+)
+
+export default Basic

examples/demos/dnd.js

@@ -55,7 +55,7 @@ class Dnd extends React.Component {
 
     const nextEvents = events.map(existingEvent => {
       return existingEvent.id == event.id
-        ? { ...existingEvent, start, end }
+        ? { ...existingEvent, start, end, allDay }
         : existingEvent
     })
 
@@ -82,7 +82,7 @@ class Dnd extends React.Component {
     //alert(`${event.title} was resized to ${start}-${end}`)
   }
 
-  newEvent(event) {
+  newEvent(_event) {
     // let idList = this.state.events.map(a => a.id)
     // let newId = Math.max(...idList) + 1
     // let hour = {

examples/demos/dndOutsideSource.js

@@ -67,7 +67,7 @@ class Dnd extends React.Component {
     this.newEvent(event)
   }
 
-  moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
+  moveEvent = ({ event, start, end, isAllDay: droppedOnAllDaySlot }) => {
     const { events } = this.state
 
     const idx = events.indexOf(event)
@@ -107,7 +107,7 @@ class Dnd extends React.Component {
     //alert(`${event.title} was resized to ${start}-${end}`)
   }
 
-  newEvent(event) {
+  newEvent = event => {
     let idList = this.state.events.map(a => a.id)
     let newId = Math.max(...idList) + 1
     let hour = {

examples/events.js

@@ -77,10 +77,28 @@ export default [
   },
   {
     id: 11,
-    title: 'Birthday Party',
-    start: new Date(2015, 3, 13, 7, 0, 0),
+    title: 'Planning Meeting with Paige',
+    start: new Date(2015, 3, 13, 8, 0, 0),
     end: new Date(2015, 3, 13, 10, 30, 0),
   },
+  {
+    id: 11.1,
+    title: 'Inconvenient Conference Call',
+    start: new Date(2015, 3, 13, 9, 30, 0),
+    end: new Date(2015, 3, 13, 12, 0, 0),
+  },
+  {
+    id: 11.2,
+    title: "Project Kickoff - Lou's Shoes",
+    start: new Date(2015, 3, 13, 11, 30, 0),
+    end: new Date(2015, 3, 13, 14, 0, 0),
+  },
+  {
+    id: 11.3,
+    title: 'Quote Follow-up - Tea by Tina',
+    start: new Date(2015, 3, 13, 15, 30, 0),
+    end: new Date(2015, 3, 13, 16, 0, 0),
+  },
   {
     id: 12,
     title: 'Late Night Event',

package.json

@@ -69,15 +69,17 @@
     "bracketSpacing": true
   },
   "peerDependencies": {
-    "react": "^16.6.1",
-    "react-dom": "^16.6.1"
+    "react": "^16.6.1 || ^17",
+    "react-dom": "^16.6.1 || ^17"
   },
   "devDependencies": {
     "@4c/rollout": "^1.4.0",
     "@babel/cli": "^7.1.0",
     "@babel/core": "^7.1.5",
-    "@storybook/addon-actions": "^5.0.11",
-    "@storybook/react": "^5.0.11",
+    "@commitlint/cli": "^12.1.4",
+    "@commitlint/config-conventional": "^12.1.4",
+    "@storybook/addon-actions": "^6.1.15",
+    "@storybook/react": "^6.1.15",
     "autoprefixer": "^9.5.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -130,14 +132,14 @@
   "dependencies": {
     "@babel/runtime": "^7.1.5",
     "clsx": "^1.0.4",
-    "date-arithmetic": "^4.0.1",
+    "date-arithmetic": "^4.1.0",
     "dom-helpers": "^5.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.11",
     "lodash-es": "^4.17.11",
     "memoize-one": "^5.1.1",
     "prop-types": "^15.7.2",
-    "react-overlays": "^2.0.0-0",
+    "react-overlays": "^4.1.1",
     "uncontrollable": "^7.0.0"
   },
   "resolutions": {

src/Agenda.js

@@ -147,7 +147,7 @@ function Agenda({
 
   let range = dates.range(date, end, 'day')
 
-  events = events.filter(event => inRange(event, date, end, accessors))
+  events = events.filter(event => inRange(event, dates.startOf(date, 'day'), dates.endOf(end, 'day'), accessors))
 
   events.sort((a, b) => +accessors.start(a) - +accessors.start(b))