Skip to content

Commit d1e90b1

Browse files
jquensejquense
authored
feat: add horizontal scrolling for wide resource calendars (jquense#921)
 fix: a bunch of DnD bugs
1 parent ee8cdbe commit d1e90b1

24 files changed

+603
-429
lines changed

‎examples/App.js

Lines changed: 70 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react'
22
import Api from './Api'
33
import Intro from './Intro.md'
4-
import cn from 'classnames'
54
import { render } from 'react-dom'
5+
import { SlotProvider } from 'react-tackle-box/lib/Slot'
6+
import Layout from 'react-tackle-box/lib/Layout'
67

78
import localizer from 'react-big-calendar/lib/localizers/globalize'
89
import globalize from 'globalize'
@@ -13,6 +14,8 @@ import 'font-awesome/css/font-awesome.min.css'
1314
import 'react-big-calendar/lib/less/styles.less'
1415
import './styles.less'
1516
import './prism.less'
17+
import Card from './Card'
18+
import ExampleControlSlot from './ExampleControlSlot'
1619
import Basic from './demos/basic'
1720
import Selectable from './demos/selectable'
1821
import Cultures from './demos/cultures'
@@ -73,65 +76,77 @@ class Example extends React.Component {
7376
}[selected]
7477

7578
return (
76-
<div className="app">
77-
<div className="jumbotron">
78-
<div className="container">
79-
<h1>
80-
Big Calendar <i className="fa fa-calendar" />
81-
</h1>
82-
<p>such enterprise, very business.</p>
83-
<p>
84-
<a href="#intro">
85-
<i className="fa fa-play" /> Getting started
86-
</a>
87-
{' | '}
88-
<a href="#api">
89-
<i className="fa fa-book" /> API documentation
90-
</a>
91-
{' | '}
92-
<a
93-
target="_blank"
94-
href="https://github.com/intljusticemission/react-big-calendar"
95-
>
96-
<i className="fa fa-github" /> github
97-
</a>
98-
</p>
79+
<SlotProvider>
80+
<div className="app">
81+
<div className="jumbotron">
82+
<div className="container">
83+
<h1>
84+
Big Calendar <i className="fa fa-calendar" />
85+
</h1>
86+
<p>such enterprise, very business.</p>
87+
<p>
88+
<a href="#intro">
89+
<i className="fa fa-play" /> Getting started
90+
</a>
91+
{' | '}
92+
<a href="#api">
93+
<i className="fa fa-book" /> API documentation
94+
</a>
95+
{' | '}
96+
<a
97+
target="_blank"
98+
href="https://github.com/intljusticemission/react-big-calendar"
99+
>
100+
<i className="fa fa-github" /> github
101+
</a>
102+
</p>
103+
</div>
99104
</div>
100-
</div>
101-
<div className="examples">
102-
<header className="examples--header">
103-
<div className="examples--view-source">
104-
<a target="_blank" href={demoRoot + '/' + selected + '.js'}>
105-
<strong>
106-
<i className="fa fa-code" />
107-
{' View example source code'}
108-
</strong>
109-
</a>
105+
<div className="examples">
106+
<Card className="examples--header">
107+
<Layout
108+
align="center"
109+
justify="space-between"
110+
style={{ marginBottom: 15 }}
111+
>
112+
<div className="examples--view-source">
113+
<a target="_blank" href={demoRoot + '/' + selected + '.js'}>
114+
<strong>
115+
<i className="fa fa-code" />
116+
{' View example source code'}
117+
</strong>
118+
</a>
119+
</div>
120+
<Dropdown className="examples--dropdown" pullRight>
121+
<Dropdown.Toggle bsStyle="link" className="dropdown--toggle ">
122+
{EXAMPLES[selected]}
123+
</Dropdown.Toggle>
124+
<Dropdown.Menu>
125+
{Object.entries(EXAMPLES).map(([key, title]) => (
126+
<MenuItem
127+
href={`#${key}`}
128+
onClick={() => this.select(key)}
129+
>
130+
{title}
131+
</MenuItem>
132+
))}
133+
</Dropdown.Menu>
134+
</Dropdown>
135+
</Layout>
136+
<ExampleControlSlot.Outlet />
137+
</Card>
138+
<div className="example">
139+
<Current localizer={globalizeLocalizer} />
110140
</div>
111-
<Dropdown className="examples--dropdown" pullRight>
112-
<Dropdown.Toggle bsStyle="link" className="dropdown--toggle ">
113-
{EXAMPLES[selected]}
114-
</Dropdown.Toggle>
115-
<Dropdown.Menu>
116-
{Object.entries(EXAMPLES).map(([key, title]) => (
117-
<MenuItem href={`#${key}`} onClick={() => this.select(key)}>
118-
{title}
119-
</MenuItem>
120-
))}
121-
</Dropdown.Menu>
122-
</Dropdown>
123-
</header>
124-
<div className="example">
125-
<Current localizer={globalizeLocalizer} />
126141
</div>
127-
</div>
128-
<div className="docs">
129-
<div className="contain section">
130-
<Intro />
142+
<div className="docs">
143+
<div className="contain section">
144+
<Intro />
145+
</div>
146+
<Api className="contain section" />
131147
</div>
132-
<Api className="contain section" />
133148
</div>
134-
</div>
149+
</SlotProvider>
135150
)
136151
}
137152
}

‎examples/Card.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
3+
const propTypes = {}
4+
5+
function Card({ children, className, style }) {
6+
return (
7+
<div className={`${className || ''} card`} style={style}>
8+
{children}
9+
</div>
10+
)
11+
}
12+
13+
Card.propTypes = propTypes
14+
15+
export default Card

‎examples/ExampleControlSlot.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react'
2+
import createSlot from 'react-tackle-box/lib/Slot'
3+
4+
export default createSlot()

‎examples/demos/cultures.js

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React from 'react'
22
import BigCalendar from 'react-big-calendar'
33
import events from '../events'
4+
import Layout from 'react-tackle-box/lib/Layout'
5+
6+
import ExampleControlSlot from '../ExampleControlSlot'
47

58
require('globalize/lib/cultures/globalize.culture.en-GB')
69
require('globalize/lib/cultures/globalize.culture.es')
@@ -17,21 +20,23 @@ class Cultures extends React.Component {
1720

1821
return (
1922
<React.Fragment>
20-
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
21-
<label>Select a Culture</label>{' '}
22-
<select
23-
className="form-control"
24-
style={{ width: 200, display: 'inline-block' }}
25-
defaultValue={'fr'}
26-
onChange={e => this.setState({ culture: e.target.value })}
27-
>
28-
{cultures.map((c, idx) => (
29-
<option key={idx} value={c}>
30-
{c}
31-
</option>
32-
))}
33-
</select>
34-
</div>
23+
<ExampleControlSlot.Entry waitForOutlet>
24+
<Layout direction="column" align="center">
25+
<label>Select a Culture</label>{' '}
26+
<select
27+
className="form-control"
28+
style={{ width: 200, display: 'inline-block' }}
29+
defaultValue={'fr'}
30+
onChange={e => this.setState({ culture: e.target.value })}
31+
>
32+
{cultures.map((c, idx) => (
33+
<option key={idx} value={c}>
34+
{c}
35+
</option>
36+
))}
37+
</select>
38+
</Layout>
39+
</ExampleControlSlot.Entry>
3540
<BigCalendar
3641
rtl={rtl}
3742
events={events}

‎examples/demos/customView.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import dates from 'date-arithmetic'
44
import events from '../events'
55
import BigCalendar from 'react-big-calendar'
66
import TimeGrid from 'react-big-calendar/lib/TimeGrid'
7+
import ExampleControlSlot from '../ExampleControlSlot'
78

89
class MyWeek extends React.Component {
910
render() {
@@ -47,13 +48,18 @@ MyWeek.title = date => {
4748
}
4849

4950
let CustomView = ({ localizer }) => (
50-
<BigCalendar
51-
events={events}
52-
localizer={localizer}
53-
defaultView={BigCalendar.Views.WEEK}
54-
defaultDate={new Date(2015, 3, 1)}
55-
views={{ month: true, week: MyWeek }}
56-
/>
51+
<React.Fragment>
52+
<ExampleControlSlot.Entry waitForOutlet>
53+
<strong>The Calendar below implments a custom 3-day week view</strong>
54+
</ExampleControlSlot.Entry>
55+
<BigCalendar
56+
events={events}
57+
localizer={localizer}
58+
defaultView={BigCalendar.Views.WEEK}
59+
defaultDate={new Date(2015, 3, 1)}
60+
views={{ month: true, week: MyWeek }}
61+
/>
62+
</React.Fragment>
5763
)
5864

5965
export default CustomView

‎examples/demos/popup.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import React from 'react'
22
import BigCalendar from 'react-big-calendar'
33
import events from '../events'
4+
import ExampleControlSlot from '../ExampleControlSlot'
45

56
let Popup = ({ localizer }) => (
67
<React.Fragment>
7-
<h3 className="callout">
8-
Click the "+x more" link on any calendar day that cannot fit all the days
9-
events to see an inline popup of all the events.
10-
</h3>
8+
<ExampleControlSlot.Entry waitForOutlet>
9+
<strong>
10+
Click the "+x more" link on any calendar day that cannot fit all the
11+
days events to see an inline popup of all the events.
12+
</strong>
13+
</ExampleControlSlot.Entry>
1114
<BigCalendar
1215
popup
1316
events={events}

‎examples/demos/selectable.js

Lines changed: 51 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,57 @@
11
import React from 'react'
22
import BigCalendar from 'react-big-calendar'
33
import events from '../events'
4+
import ExampleControlSlot from '../ExampleControlSlot'
45

5-
let Selectable = ({ localizer }) => (
6-
<React.Fragment>
7-
<h3 className="callout">
8-
Click an event to see more info, or drag the mouse over the calendar to
9-
select a date/time range.
10-
</h3>
11-
<BigCalendar
12-
selectable
13-
events={events}
14-
localizer={localizer}
15-
defaultView={BigCalendar.Views.WEEK}
16-
scrollToTime={new Date(1970, 1, 1, 6)}
17-
defaultDate={new Date(2015, 3, 12)}
18-
onSelectEvent={event => alert(event.title)}
19-
onSelectSlot={slotInfo =>
20-
alert(
21-
`selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
22-
`\nend: ${slotInfo.end.toLocaleString()}` +
23-
`\naction: ${slotInfo.action}`
24-
)
25-
}
26-
/>
27-
</React.Fragment>
28-
)
6+
const propTypes = {}
7+
8+
class Selectable extends React.Component {
9+
constructor(...args) {
10+
super(...args)
11+
12+
this.state = { events }
13+
}
14+
15+
handleSelect = ({ start, end }) => {
16+
const title = window.prompt('New Event name')
17+
if (title)
18+
this.setState({
19+
events: [
20+
...this.state.events,
21+
{
22+
start,
23+
end,
24+
title,
25+
},
26+
],
27+
})
28+
}
29+
30+
render() {
31+
const { localizer } = this.props
32+
return (
33+
<React.Fragment>
34+
<ExampleControlSlot.Entry waitForOutlet>
35+
<strong>
36+
Click an event to see more info, or drag the mouse over the calendar
37+
to select a date/time range.
38+
</strong>
39+
</ExampleControlSlot.Entry>
40+
<BigCalendar
41+
selectable
42+
localizer={localizer}
43+
events={this.state.events}
44+
defaultView={BigCalendar.Views.WEEK}
45+
scrollToTime={new Date(1970, 1, 1, 6)}
46+
defaultDate={new Date(2015, 3, 12)}
47+
onSelectEvent={event => alert(event.title)}
48+
onSelectSlot={this.handleSelect}
49+
/>
50+
</React.Fragment>
51+
)
52+
}
53+
}
54+
55+
Selectable.propTypes = propTypes
2956

3057
export default Selectable

0 commit comments

Comments
 (0)