Small stuff (jquense#714)

* fix scrollToTime props closes jquense#696

* fix doubleClick in popup fixes jquense#694

* clean up docs a bit

* clean up some event styles

* Fix doc styles again and calculate overflow on resize

examples/App.js

@@ -9,6 +9,9 @@ import globalize from 'globalize'
 
 localizer(globalize)
 
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'font-awesome/css/font-awesome.min.css'
+
 import 'react-big-calendar/lib/less/styles.less'
 import './styles.less'
 import './prism.less'
@@ -69,8 +72,8 @@ class Example extends React.Component {
           </div>
         </div>
         <div className="examples">
-          <header className="contain">
-            <ul className="nav nav-pills">
+          <header>
+            <ul className="examples--list list-unstyled">
               <li className={cn({ active: selected === 'basic' })}>
                 <a href="#" onClick={this.select.bind(null, 'basic')}>
                   Basic
@@ -127,7 +130,7 @@ class Example extends React.Component {
                 </strong>
               </a>
             </div>
-            <Current className="demo" />
+            <Current />
           </div>
         </div>
         <div className="docs">
@@ -146,4 +149,4 @@ class Example extends React.Component {
   }
 }
 
-render(<Example />, document.getElementById('root'))
+render(<Example />, document.getElementById('app'))

examples/demos/basic.js

@@ -4,12 +4,12 @@ import events from '../events'
 
 let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
 
-let Basic = props => (
+let Basic = () => (
   <BigCalendar
-    {...props}
     events={events}
     views={allViews}
     step={60}
+    showMultiDayTimes
     defaultDate={new Date(2015, 3, 1)}
   />
 )

examples/demos/cultures.js

@@ -15,7 +15,7 @@ class Cultures extends React.Component {
     let rtl = this.state.culture === 'ar-AE'
 
     return (
-      <div {...this.props}>
+      <React.Fragment>
         <h3 className="callout">
           <label>Select a Culture</label>{' '}
           <select
@@ -37,7 +37,7 @@ class Cultures extends React.Component {
           culture={this.state.culture}
           defaultDate={new Date(2015, 3, 1)}
         />
-      </div>
+      </React.Fragment>
     )
   }
 }

examples/demos/customHeader.js

@@ -12,9 +12,8 @@ let MyCustomHeader = ({ label }) => (
   </div>
 )
 
-let CustomHeader = props => (
+let CustomHeader = () => (
   <BigCalendar
-    {...this.props}
     events={events}
     defaultDate={new Date(2015, 3, 1)}
     components={{

examples/demos/customView.js

@@ -47,15 +47,13 @@ MyWeek.title = (date, { formats, culture }) => {
   return `My awesome week: ${Date.toLocaleString()}`
 }
 
-let CustomView = props => (
-  <div>
-    <BigCalendar
-      events={events}
-      defaultDate={new Date(2015, 3, 1)}
-      views={{ month: true, week: MyWeek }}
-      test="io"
-    />
-  </div>
+let CustomView = () => (
+  <BigCalendar
+    events={events}
+    defaultDate={new Date(2015, 3, 1)}
+    views={{ month: true, week: MyWeek }}
+    test="io"
+  />
 )
 
 export default CustomView

examples/demos/popup.js

@@ -2,14 +2,14 @@ import React from 'react'
 import BigCalendar from 'react-big-calendar'
 import events from '../events'
 
-let Popup = props => (
-  <div {...props}>
+let Popup = () => (
+  <React.Fragment>
     <h3 className="callout">
       Click the "+x more" link on any calendar day that cannot fit all the days
       events to see an inline popup of all the events.
     </h3>
     <BigCalendar popup events={events} defaultDate={new Date(2015, 3, 1)} />
-  </div>
+  </React.Fragment>
 )
 
 export default Popup

examples/demos/rendering.js

@@ -39,22 +39,20 @@ const customSlotPropGetter = date => {
   else return {}
 }
 
-let Rendering = props => (
-  <div {...props}>
-    <BigCalendar
-      events={events}
-      defaultDate={new Date(2015, 3, 1)}
-      defaultView="agenda"
-      dayPropGetter={customDayPropGetter}
-      slotPropGetter={customSlotPropGetter}
-      components={{
-        event: Event,
-        agenda: {
-          event: EventAgenda,
-        },
-      }}
-    />
-  </div>
+let Rendering = () => (
+  <BigCalendar
+    events={events}
+    defaultDate={new Date(2015, 3, 1)}
+    defaultView="agenda"
+    dayPropGetter={customDayPropGetter}
+    slotPropGetter={customSlotPropGetter}
+    components={{
+      event: Event,
+      agenda: {
+        event: EventAgenda,
+      },
+    }}
+  />
 )
 
 export default Rendering

examples/demos/resource.js

@@ -40,9 +40,8 @@ const resourceMap = [
   { resourceId: 4, resourceTitle: 'Meeting room 2' },
 ]
 
-let Resource = props => (
+let Resource = () => (
   <BigCalendar
-    {...props}
     events={events}
     defaultView="day"
     views={['day', 'work_week']}

examples/demos/selectable.js

@@ -2,8 +2,8 @@ import React from 'react'
 import BigCalendar from 'react-big-calendar'
 import events from '../events'
 
-let Selectable = props => (
-  <div {...props}>
+let Selectable = () => (
+  <React.Fragment>
     <h3 className="callout">
       Click an event to see more info, or drag the mouse over the calendar to
       select a date/time range.
@@ -23,7 +23,7 @@ let Selectable = props => (
         )
       }
     />
-  </div>
+  </React.Fragment>
 )
 
 export default Selectable

examples/demos/timeslots.js

@@ -2,9 +2,8 @@ import React from 'react'
 import BigCalendar from 'react-big-calendar'
 import events from '../events'
 
-let Timeslots = props => (
+let Timeslots = () => (
   <BigCalendar
-    {...props}
     events={events}
     step={15}
     timeslots={8}

examples/styles.less

@@ -1,9 +1,12 @@
 
-// .panel-default {
-//   border-radius: 0;
-// }
+@import "~bootstrap/less/variables.less";
+
 @blue: #3174ad;
 
+html {
+  font-size: 10px;
+}
+
 body {
   font-size: 16px;
 }
@@ -38,35 +41,62 @@ h4 {
 
 .examples {
   position: relative;
-  min-height: 100vh;
-  height: min-content;
-  display: flex;
-  flex-direction: column;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .example {
   font-size: 14px;
   padding: 0 40px;
-  max-width: 1200px;
+  min-height: ~"calc(100vh - 20px)";
+  min-height: max-content;
+  height: ~"calc(100vh - 20px)";
   width: 100%;
   margin: auto;
-  flex: 1;
 
   &,
   & > * {
     display: flex;
     flex-direction: column;
-    min-height: 0;
   }
 
-  .demo,
   .rbc-calendar {
     flex: 1;
     min-height: 580px;
   }
 }
 
+.examples--list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
+  & > li {
+    text-align: center;
+  }
 
+  & a {
+    position: relative;
+    display: inline-block;
+    text-decoration: none;
+    padding: 1.4rem 1rem;
+    white-space: nowrap;
+    border-radius: .3rem;
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0; right: 0;
+      bottom: 0;
+      height: 4px;
+    }
+
+    &:hover:after {
+      background-color: @blue;
+    }
+  }
+}
 .section {
   margin-bottom: 20px;
 }

examples/webpack.config.js

@@ -1,7 +1,7 @@
 var path = require('path')
 const { rules, loaders, plugins, stats } = require('webpack-atoms')
 
-const browsers = ['last 2 versions', 'ie >= 10']
+const browsers = ['last 2 versions', 'ie >= 10', 'not android <= 4.4.3']
 
 module.exports = {
   devtool: 'source-map',
@@ -36,5 +36,5 @@ module.exports = {
       },
     ],
   },
-  plugins: [plugins.extractText()],
+  plugins: [plugins.html(), plugins.extractText()],
 }

package.json

@@ -63,6 +63,7 @@
     "babel-eslint": "^6.0.2",
     "babel-plugin-object-assign": "^1.2.1",
     "babel-preset-jason": "^3.0.0",
+    "bootstrap": "^3.3.5",
     "component-metadata-loader": "^3.0.1",
     "cpy": "^3.4.1",
     "eslint": "^3.0.0",
@@ -71,6 +72,7 @@
     "eslint-import-resolver-webpack": "^0.8.0",
     "eslint-plugin-import": "^2.0.0",
     "eslint-plugin-react": "^6.8.0",
+    "font-awesome": "^4.7.0",
     "globalize": "^0.1.1",
     "husky": "^0.14.3",
     "jest": "^21.1.0",

src/Calendar.js

@@ -81,7 +81,7 @@ class Calendar extends React.Component {
      * @controllable onView
      */
     view: PropTypes.string,
-    
+
     /**
      * The initial view set for the Calendar.
      * @type Calendar.Views ('month'|'week'|'work_week'|'day'|'agenda')

src/EventCell.js

@@ -21,8 +21,8 @@ let propTypes = {
 
   eventComponent: elementType,
   eventWrapperComponent: elementType.isRequired,
-  onSelect: PropTypes.func,
-  onDoubleClick: PropTypes.func,
+  onSelect: PropTypes.func.isRequired,
+  onDoubleClick: PropTypes.func.isRequired,
 }
 
 class EventCell extends React.Component {

src/Month.js

@@ -280,6 +280,7 @@ class MonthView extends React.Component {
           slotStart={overlay.date}
           slotEnd={overlay.end}
           onSelect={this.handleSelectEvent}
+          onDoubleClick={this.handleDoubleClickEvent}
         />
       </Overlay>
     )

src/Popup.js

@@ -13,9 +13,9 @@ const propTypes = {
   position: PropTypes.object,
   popupOffset: PropTypes.oneOfType([
     PropTypes.number,
-    PropTypes.shape({ 
-      x: PropTypes.number, 
-      y: PropTypes.number 
+    PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
     }),
   ]),
   events: PropTypes.array,