From f9096813ea9d07b53ff927a04771a6824de34715 Mon Sep 17 00:00:00 2001
From: Jason Quense <monastic.panic@gmail.com>
Date: Wed, 25 Jul 2018 12:01:35 -0400
Subject: [PATCH] improve docs

---
 examples/App.js            | 108 ++++++++++++++++---------------------
 examples/demos/cultures.js |   4 +-
 examples/styles.less       |  61 ++++++++++++++++++---
 package.json               |   2 +-
 src/Agenda.js              |   4 +-
 yarn.lock                  | 105 ++++++++++++++++++------------------
 6 files changed, 156 insertions(+), 128 deletions(-)

diff --git a/examples/App.js b/examples/App.js
index 1c611f597..b6dee8809 100644
--- a/examples/App.js
+++ b/examples/App.js
@@ -23,15 +23,40 @@ import Resource from './demos/resource'
 import DndResource from './demos/dndresource'
 import Timeslots from './demos/timeslots'
 import Dnd from './demos/dnd'
+import Dropdown from 'react-bootstrap/lib/Dropdown'
+import MenuItem from 'react-bootstrap/lib/MenuItem'
 
 const globalizeLocalizer = localizer(globalize)
 
 let demoRoot =
   'https://github.com/intljusticemission/react-big-calendar/tree/master/examples/demos'
 
+const EXAMPLES = {
+  basic: 'Basic Calendar',
+  selectable: 'Create events',
+  cultures: 'Localization',
+  popup: 'Show more via a popup',
+  timeslots: 'Custom Time Grids',
+  rendering: 'Customized Component Rendering',
+  customView: 'Custom Calendar Views',
+  resource: 'Resource Scheduling',
+  dnd: 'Addon: Drag and drop',
+}
+
 class Example extends React.Component {
-  state = { selected: 'dnd' }
+  constructor(...args) {
+    super(...args)
 
+    const hash = (window.location.hash || '').slice(1)
+
+    this.state = {
+      selected: EXAMPLES[hash] ? hash : 'basic',
+    }
+  }
+
+  select = selected => {
+    this.setState({ selected })
+  }
   render() {
     let selected = this.state.selected
     let Current = {
@@ -74,62 +99,8 @@ class Example extends React.Component {
           </div>
         </div>
         <div className="examples">
-          <header>
-            <ul className="examples--list list-unstyled">
-              <li className={cn({ active: selected === 'basic' })}>
-                <a href="#" onClick={this.select.bind(null, 'basic')}>
-                  Basic
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'selectable' })}>
-                <a href="#" onClick={this.select.bind(null, 'selectable')}>
-                  Selectable
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'cultures' })}>
-                <a href="#" onClick={this.select.bind(null, 'cultures')}>
-                  I18n and Locales
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'popup' })}>
-                <a href="#" onClick={this.select.bind(null, 'popup')}>
-                  Popup
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'timeslots' })}>
-                <a href="#" onClick={this.select.bind(null, 'timeslots')}>
-                  Timeslots
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'rendering' })}>
-                <a href="#" onClick={this.select.bind(null, 'rendering')}>
-                  Custom rendering
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'customView' })}>
-                <a href="#" onClick={this.select.bind(null, 'customView')}>
-                  Custom View
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'Resource' })}>
-                <a href="#" onClick={this.select.bind(null, 'resource')}>
-                  Resource columns
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'dnd' })}>
-                <a href="#" onClick={this.select.bind(null, 'dnd')}>
-                  Drag and Drop
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'dndresource' })}>
-                <a href="#" onClick={this.select.bind(null, 'dndresource')}>
-                  D'n'D Resource columns
-                </a>
-              </li>
-            </ul>
-          </header>
-          <div className="example">
-            <div className="view-source">
+          <header className="examples--header">
+            <div className="examples--view-source">
               <a target="_blank" href={demoRoot + '/' + selected + '.js'}>
                 <strong>
                   <i className="fa fa-code" />
@@ -137,6 +108,20 @@ class Example extends React.Component {
                 </strong>
               </a>
             </div>
+            <Dropdown className="examples--dropdown" pullRight>
+              <Dropdown.Toggle bsStyle="link" className="dropdown--toggle ">
+                {EXAMPLES[selected]}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                {Object.entries(EXAMPLES).map(([key, title]) => (
+                  <MenuItem href={`#${key}`} onClick={() => this.select(key)}>
+                    {title}
+                  </MenuItem>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
+          </header>
+          <div className="example">
             <Current localizer={globalizeLocalizer} />
           </div>
         </div>
@@ -149,11 +134,8 @@ class Example extends React.Component {
       </div>
     )
   }
-
-  select = (selected, e) => {
-    e.preventDefault()
-    this.setState({ selected })
-  }
 }
 
-render(<Example />, document.getElementById('app'))
+document.addEventListener('DOMContentLoaded', () => {
+  render(<Example />, document.getElementById('app'))
+})
diff --git a/examples/demos/cultures.js b/examples/demos/cultures.js
index ba74f13ff..f54a7935b 100644
--- a/examples/demos/cultures.js
+++ b/examples/demos/cultures.js
@@ -17,7 +17,7 @@ class Cultures extends React.Component {
 
     return (
       <React.Fragment>
-        <h3 className="callout">
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <label>Select a Culture</label>{' '}
           <select
             className="form-control"
@@ -31,7 +31,7 @@ class Cultures extends React.Component {
               </option>
             ))}
           </select>
-        </h3>
+        </div>
         <BigCalendar
           rtl={rtl}
           events={events}
diff --git a/examples/styles.less b/examples/styles.less
index 84e3af3d4..459a6238e 100644
--- a/examples/styles.less
+++ b/examples/styles.less
@@ -2,6 +2,7 @@
 @import "~bootstrap/less/variables.less";
 
 @blue: #3174ad;
+@pink: #ad3173;
 
 html {
   font-size: 10px;
@@ -9,12 +10,26 @@ html {
 
 body {
   font-size: 16px;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 h4 {
   margin-top: 20px;
 }
 
+a {
+  transform: all 200ms;
+
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+}
+
 .jumbotron {
   background-color: @blue;
   color: white;
@@ -48,9 +63,9 @@ h4 {
 .example {
   font-size: 14px;
   padding: 0 40px;
-  min-height: ~"calc(100vh - 20px)";
+  min-height: ~"calc(100vh - 100px)";
   min-height: max-content;
-  height: ~"calc(100vh - 20px)";
+  height: ~"calc(100vh - 100px)";
   width: 100%;
   margin: auto;
 
@@ -112,11 +127,45 @@ h4 > a > code  {
   padding: 0;
 }
 
-.view-source {
-  font-size: 90%;
-  float: right;
+
+.examples--header {
+  padding: 0 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
   margin-bottom: 15px;
-  margin-left: auto;
+}
+
+.examples--dropdown {
+
+}
+
+.dropdown--toggle {
+  font-size: 18px;
+  font-weight: 600;
+  border-radius: 3px;
+  transition: all 200ms;
+
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    color: @pink;
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: darken(@pink, 5%);
+    border: 1px solid @pink;
+    text-decoration: none;
+  }
+}
+
+.examples--view-source {
+  font-size: 90%;
 }
 
 .callout {
diff --git a/package.json b/package.json
index 1471509bd..b6b555328 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "mt-changelog": "^0.6.1",
     "prettier": "^1.9.1",
     "react": "^16.4.1",
-    "react-bootstrap": "^0.28.0",
+    "react-bootstrap": "^0.32.1",
     "react-docgen": "^2.14.1",
     "react-dom": "^16.4.1",
     "release-script": "^1.0.0",
diff --git a/src/Agenda.js b/src/Agenda.js
index f4273a2ba..9a41df6da 100644
--- a/src/Agenda.js
+++ b/src/Agenda.js
@@ -42,7 +42,7 @@ class Agenda extends React.Component {
 
     let range = dates.range(date, end, 'day')
 
-    events = events.filter(event => inRange(event, date, end, this.props))
+    events = events.filter(event => inRange(event, date, end, accessors))
 
     events.sort((a, b) => +accessors.start(a) - +accessors.start(b))
 
@@ -82,7 +82,7 @@ class Agenda extends React.Component {
     } = this.props
 
     events = events.filter(e =>
-      inRange(e, dates.startOf(day, 'day'), dates.endOf(day, 'day'), this.props)
+      inRange(e, dates.startOf(day, 'day'), dates.endOf(day, 'day'), accessors)
     )
 
     return events.map((event, idx) => {
diff --git a/yarn.lock b/yarn.lock
index fe35a2251..a13630134 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1599,12 +1599,6 @@ babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-runtime@^5.8.25:
-  version "5.8.38"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-5.8.38.tgz#1c0b02eb63312f5f087ff20450827b425c9d4c19"
-  dependencies:
-    core-js "^1.0.0"
-
 babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
@@ -2162,7 +2156,7 @@ class-utils@^0.3.5:
     lazy-cache "^2.0.2"
     static-extend "^0.1.1"
 
-classnames@^2.1.3, classnames@^2.1.5, classnames@^2.2.5:
+classnames@^2.1.3, classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -2942,14 +2936,10 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
-"dom-helpers@^2.3.0 || ^3.0.0", dom-helpers@^3.2.0, dom-helpers@^3.2.1:
+"dom-helpers@^2.3.0 || ^3.0.0", dom-helpers@^3.2.0, dom-helpers@^3.2.1, dom-helpers@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
 
-dom-helpers@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-2.4.0.tgz#9bb4b245f637367b1fa670274272aa28fe06c367"
-
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -4702,12 +4692,18 @@ interpret@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
-invariant@^2.1.0, invariant@^2.1.2, invariant@^2.2.2:
+invariant@^2.1.0, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
     loose-envify "^1.0.0"
 
+invariant@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  dependencies:
+    loose-envify "^1.0.0"
+
 invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
@@ -5468,7 +5464,11 @@ jsx-ast-utils@^1.3.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
 
-keycode@^2.1.0, keycode@^2.1.9:
+keycode@^2.1.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
+
+keycode@^2.1.9:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.1.9.tgz#964a23c54e4889405b4861a5c9f0480d45141dfa"
 
@@ -5681,10 +5681,6 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash-compat@^3.10.1:
-  version "3.10.2"
-  resolved "https://registry.yarnpkg.com/lodash-compat/-/lodash-compat-3.10.2.tgz#c6940128a9d30f8e902cd2cf99fd0cba4ecfc183"
-
 lodash-es@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
@@ -7270,7 +7266,7 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8,
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.6.1:
+prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -7437,20 +7433,22 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-bootstrap@^0.28.0:
-  version "0.28.5"
-  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.28.5.tgz#393ab59ad66071a6a7bae0fda7518cdd228f2baf"
-  dependencies:
-    babel-runtime "^5.8.25"
-    classnames "^2.1.5"
-    dom-helpers "^2.4.0"
-    invariant "^2.1.2"
-    keycode "^2.1.0"
-    lodash-compat "^3.10.1"
-    react-overlays "^0.6.0"
-    react-prop-types "^0.3.0"
-    uncontrollable "^3.1.3"
-    warning "^2.1.0"
+react-bootstrap@^0.32.1:
+  version "0.32.1"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.32.1.tgz#60624c1b48a39d773ef6cce6421a4f33ecc166bb"
+  dependencies:
+    babel-runtime "^6.11.6"
+    classnames "^2.2.5"
+    dom-helpers "^3.2.0"
+    invariant "^2.2.1"
+    keycode "^2.1.2"
+    prop-types "^15.5.10"
+    prop-types-extra "^1.0.1"
+    react-overlays "^0.8.0"
+    react-prop-types "^0.4.0"
+    react-transition-group "^2.0.0"
+    uncontrollable "^4.1.0"
+    warning "^3.0.0"
 
 react-component-metadata@^3.0.0:
   version "3.1.0"
@@ -7566,15 +7564,6 @@ react-modal@^3.3.2:
     react-lifecycles-compat "^3.0.0"
     warning "^3.0.0"
 
-react-overlays@^0.6.0:
-  version "0.6.12"
-  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.6.12.tgz#a079c750cc429d7db4c7474a95b4b54033e255c3"
-  dependencies:
-    classnames "^2.2.5"
-    dom-helpers "^3.2.0"
-    react-prop-types "^0.4.0"
-    warning "^3.0.0"
-
 react-overlays@^0.7.0:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.7.4.tgz#ef2ec652c3444ab8aa014262b18f662068e56d5c"
@@ -7585,11 +7574,16 @@ react-overlays@^0.7.0:
     prop-types-extra "^1.0.1"
     warning "^3.0.0"
 
-react-prop-types@^0.3.0:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/react-prop-types/-/react-prop-types-0.3.2.tgz#e2763ac6f3a80199d8981c3647c44b0554c97b7f"
+react-overlays@^0.8.0:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.8.3.tgz#fad65eea5b24301cca192a169f5dddb0b20d3ac5"
   dependencies:
-    warning "^2.0.0"
+    classnames "^2.2.5"
+    dom-helpers "^3.2.1"
+    prop-types "^15.5.10"
+    prop-types-extra "^1.0.1"
+    react-transition-group "^2.2.0"
+    warning "^3.0.0"
 
 react-prop-types@^0.4.0:
   version "0.4.0"
@@ -7622,6 +7616,15 @@ react-transition-group@^1.1.2:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
+react-transition-group@^2.0.0, react-transition-group@^2.2.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.4.0.tgz#1d9391fabfd82e016f26fabd1eec329dbd922b5a"
+  dependencies:
+    dom-helpers "^3.3.1"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
 react-treebeard@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-treebeard/-/react-treebeard-2.1.0.tgz#fbd5cf51089b6f09a9b18350ab3bddf736e57800"
@@ -9097,13 +9100,7 @@ unc-path-regex@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
 
-uncontrollable@^3.1.3:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-3.3.1.tgz#e23b402e7a4c69b1853fb4b43ce34b6480c65b6f"
-  dependencies:
-    invariant "^2.1.0"
-
-uncontrollable@^4.0.0:
+uncontrollable@^4.0.0, uncontrollable@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-4.1.0.tgz#e0358291252e1865222d90939b19f2f49f81c1a9"
   dependencies:
@@ -9300,7 +9297,7 @@ walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^2.0.0, warning@^2.1.0:
+warning@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/warning/-/warning-2.1.0.tgz#21220d9c63afc77a8c92111e011af705ce0c6901"
   dependencies: