Skip to content

Commit

Permalink
feat: add horizontal scrolling for wide resource calendars (jquense#921)
Browse files Browse the repository at this point in the history
fix: a bunch of DnD bugs
  • Loading branch information
jquense committed Aug 17, 2018
1 parent ee8cdbe commit d1e90b1
Show file tree
Hide file tree
Showing 24 changed files with 603 additions and 429 deletions.
125 changes: 70 additions & 55 deletions examples/App.js
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -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>
)
}
}
Expand Down
15 changes: 15 additions & 0 deletions examples/Card.js
Original file line number Diff line number Diff line change
@@ -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
4 changes: 4 additions & 0 deletions examples/ExampleControlSlot.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import React from 'react'
import createSlot from 'react-tackle-box/lib/Slot'

export default createSlot()
35 changes: 20 additions & 15 deletions examples/demos/cultures.js
Original file line number Diff line number Diff line change
@@ -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')
Expand All @@ -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}
Expand Down
20 changes: 13 additions & 7 deletions examples/demos/customView.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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
11 changes: 7 additions & 4 deletions examples/demos/popup.js
Original file line number Diff line number Diff line change
@@ -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}
Expand Down
75 changes: 51 additions & 24 deletions examples/demos/selectable.js
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit d1e90b1

Please sign in to comment.