feat: add horizontal scrolling for wide resource calendars

examples/App.js

@@ -1,8 +1,9 @@
 import React from 'react'
 import Api from './Api'
 import Intro from './Intro.md'
-import cn from 'classnames'
 import { render } from 'react-dom'
+import { SlotProvider } from 'react-tackle-box/lib/Slot'
+import Layout from 'react-tackle-box/lib/Layout'
 
 import localizer from 'react-big-calendar/lib/localizers/globalize'
 import globalize from 'globalize'
@@ -13,6 +14,8 @@ import 'font-awesome/css/font-awesome.min.css'
 import 'react-big-calendar/lib/less/styles.less'
 import './styles.less'
 import './prism.less'
+import Card from './Card'
+import ExampleControlSlot from './ExampleControlSlot'
 import Basic from './demos/basic'
 import Selectable from './demos/selectable'
 import Cultures from './demos/cultures'
@@ -73,65 +76,77 @@ class Example extends React.Component {
     }[selected]
 
     return (
-      <div className="app">
-        <div className="jumbotron">
-          <div className="container">
-            <h1>
-              Big Calendar <i className="fa fa-calendar" />
-            </h1>
-            <p>such enterprise, very business.</p>
-            <p>
-              <a href="#intro">
-                <i className="fa fa-play" /> Getting started
-              </a>
-              {' | '}
-              <a href="#api">
-                <i className="fa fa-book" /> API documentation
-              </a>
-              {' | '}
-              <a
-                target="_blank"
-                href="https://github.com/intljusticemission/react-big-calendar"
-              >
-                <i className="fa fa-github" /> github
-              </a>
-            </p>
+      <SlotProvider>
+        <div className="app">
+          <div className="jumbotron">
+            <div className="container">
+              <h1>
+                Big Calendar <i className="fa fa-calendar" />
+              </h1>
+              <p>such enterprise, very business.</p>
+              <p>
+                <a href="#intro">
+                  <i className="fa fa-play" /> Getting started
+                </a>
+                {' | '}
+                <a href="#api">
+                  <i className="fa fa-book" /> API documentation
+                </a>
+                {' | '}
+                <a
+                  target="_blank"
+                  href="https://github.com/intljusticemission/react-big-calendar"
+                >
+                  <i className="fa fa-github" /> github
+                </a>
+              </p>
+            </div>
           </div>
-        </div>
-        <div className="examples">
-          <header className="examples--header">
-            <div className="examples--view-source">
-              <a target="_blank" href={demoRoot + '/' + selected + '.js'}>
-                <strong>
-                  <i className="fa fa-code" />
-                  {' View example source code'}
-                </strong>
-              </a>
+          <div className="examples">
+            <Card className="examples--header">
+              <Layout
+                align="center"
+                justify="space-between"
+                style={{ marginBottom: 15 }}
+              >
+                <div className="examples--view-source">
+                  <a target="_blank" href={demoRoot + '/' + selected + '.js'}>
+                    <strong>
+                      <i className="fa fa-code" />
+                      {' View example source code'}
+                    </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>
+              </Layout>
+              <ExampleControlSlot.Outlet />
+            </Card>
+            <div className="example">
+              <Current localizer={globalizeLocalizer} />
             </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>
-        <div className="docs">
-          <div className="contain section">
-            <Intro />
+          <div className="docs">
+            <div className="contain section">
+              <Intro />
+            </div>
+            <Api className="contain section" />
           </div>
-          <Api className="contain section" />
         </div>
-      </div>
+      </SlotProvider>
     )
   }
 }

examples/Card.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const propTypes = {}
+
+function Card({ children, className, style }) {
+  return (
+    <div className={`${className || ''} card`} style={style}>
+      {children}
+    </div>
+  )
+}
+
+Card.propTypes = propTypes
+
+export default Card

examples/ExampleControlSlot.js

@@ -0,0 +1,4 @@
+import React from 'react'
+import createSlot from 'react-tackle-box/lib/Slot'
+
+export default createSlot()

examples/demos/cultures.js

@@ -1,6 +1,9 @@
 import React from 'react'
 import BigCalendar from 'react-big-calendar'
 import events from '../events'
+import Layout from 'react-tackle-box/lib/Layout'
+
+import ExampleControlSlot from '../ExampleControlSlot'
 
 require('globalize/lib/cultures/globalize.culture.en-GB')
 require('globalize/lib/cultures/globalize.culture.es')
@@ -17,21 +20,23 @@ class Cultures extends React.Component {
 
     return (
       <React.Fragment>
-        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-          <label>Select a Culture</label>{' '}
-          <select
-            className="form-control"
-            style={{ width: 200, display: 'inline-block' }}
-            defaultValue={'fr'}
-            onChange={e => this.setState({ culture: e.target.value })}
-          >
-            {cultures.map((c, idx) => (
-              <option key={idx} value={c}>
-                {c}
-              </option>
-            ))}
-          </select>
-        </div>
+        <ExampleControlSlot.Entry waitForOutlet>
+          <Layout direction="column" align="center">
+            <label>Select a Culture</label>{' '}
+            <select
+              className="form-control"
+              style={{ width: 200, display: 'inline-block' }}
+              defaultValue={'fr'}
+              onChange={e => this.setState({ culture: e.target.value })}
+            >
+              {cultures.map((c, idx) => (
+                <option key={idx} value={c}>
+                  {c}
+                </option>
+              ))}
+            </select>
+          </Layout>
+        </ExampleControlSlot.Entry>
         <BigCalendar
           rtl={rtl}
           events={events}

examples/demos/customView.js

@@ -4,6 +4,7 @@ import dates from 'date-arithmetic'
 import events from '../events'
 import BigCalendar from 'react-big-calendar'
 import TimeGrid from 'react-big-calendar/lib/TimeGrid'
+import ExampleControlSlot from '../ExampleControlSlot'
 
 class MyWeek extends React.Component {
   render() {
@@ -47,13 +48,18 @@ MyWeek.title = date => {
 }
 
 let CustomView = ({ localizer }) => (
-  <BigCalendar
-    events={events}
-    localizer={localizer}
-    defaultView={BigCalendar.Views.WEEK}
-    defaultDate={new Date(2015, 3, 1)}
-    views={{ month: true, week: MyWeek }}
-  />
+  <React.Fragment>
+    <ExampleControlSlot.Entry waitForOutlet>
+      <strong>The Calendar below implments a custom 3-day week view</strong>
+    </ExampleControlSlot.Entry>
+    <BigCalendar
+      events={events}
+      localizer={localizer}
+      defaultView={BigCalendar.Views.WEEK}
+      defaultDate={new Date(2015, 3, 1)}
+      views={{ month: true, week: MyWeek }}
+    />
+  </React.Fragment>
 )
 
 export default CustomView

examples/demos/popup.js

@@ -1,13 +1,16 @@
 import React from 'react'
 import BigCalendar from 'react-big-calendar'
 import events from '../events'
+import ExampleControlSlot from '../ExampleControlSlot'
 
 let Popup = ({ localizer }) => (
   <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>
+    <ExampleControlSlot.Entry waitForOutlet>
+      <strong>
+        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.
+      </strong>
+    </ExampleControlSlot.Entry>
     <BigCalendar
       popup
       events={events}

examples/demos/selectable.js

@@ -1,30 +1,57 @@
 import React from 'react'
 import BigCalendar from 'react-big-calendar'
 import events from '../events'
+import ExampleControlSlot from '../ExampleControlSlot'
 
-let Selectable = ({ localizer }) => (
-  <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.
-    </h3>
-    <BigCalendar
-      selectable
-      events={events}
-      localizer={localizer}
-      defaultView={BigCalendar.Views.WEEK}
-      scrollToTime={new Date(1970, 1, 1, 6)}
-      defaultDate={new Date(2015, 3, 12)}
-      onSelectEvent={event => alert(event.title)}
-      onSelectSlot={slotInfo =>
-        alert(
-          `selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
-            `\nend: ${slotInfo.end.toLocaleString()}` +
-            `\naction: ${slotInfo.action}`
-        )
-      }
-    />
-  </React.Fragment>
-)
+const propTypes = {}
+
+class Selectable extends React.Component {
+  constructor(...args) {
+    super(...args)
+
+    this.state = { events }
+  }
+
+  handleSelect = ({ start, end }) => {
+    const title = window.prompt('New Event name')
+    if (title)
+      this.setState({
+        events: [
+          ...this.state.events,
+          {
+            start,
+            end,
+            title,
+          },
+        ],
+      })
+  }
+
+  render() {
+    const { localizer } = this.props
+    return (
+      <React.Fragment>
+        <ExampleControlSlot.Entry waitForOutlet>
+          <strong>
+            Click an event to see more info, or drag the mouse over the calendar
+            to select a date/time range.
+          </strong>
+        </ExampleControlSlot.Entry>
+        <BigCalendar
+          selectable
+          localizer={localizer}
+          events={this.state.events}
+          defaultView={BigCalendar.Views.WEEK}
+          scrollToTime={new Date(1970, 1, 1, 6)}
+          defaultDate={new Date(2015, 3, 12)}
+          onSelectEvent={event => alert(event.title)}
+          onSelectSlot={this.handleSelect}
+        />
+      </React.Fragment>
+    )
+  }
+}
+
+Selectable.propTypes = propTypes
 
 export default Selectable