Skip to content

Commit

Permalink
clean up custom view
Browse files Browse the repository at this point in the history
  • Loading branch information
jquense committed Mar 23, 2018
1 parent 6bced68 commit 201fcab
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 41 deletions.
4 changes: 2 additions & 2 deletions examples/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,8 @@ class Example extends React.Component {
Custom rendering
</a>
</li>
<li className={cn({active: selected === 'customView' })}>
<a href='#' onClick={this.select.bind(null, 'customView')}>
<li className={cn({ active: selected === 'customView' })}>
<a href="#" onClick={this.select.bind(null, 'customView')}>
Custom View
</a>
</li>
Expand Down
53 changes: 22 additions & 31 deletions examples/demos/customView.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,64 +3,55 @@ import React from 'react'
import dates from 'date-arithmetic'
import events from '../events'
import BigCalendar from 'react-big-calendar'
import localizer from 'react-big-calendar/lib/localizer'
import TimeGrid from 'react-big-calendar/lib/TimeGrid'

const getRange = (date, culture) => {
let firstOfWeek = localizer.startOfWeek(culture)
let start = dates.startOf(date, 'week', firstOfWeek)
let end = dates.endOf(date, 'week', firstOfWeek)

if (firstOfWeek === 1) {
end = dates.subtract(end, 2, 'day')
} else {
start = dates.add(start, 1, 'day');
}

let dateInRange = start;
let range = [];
class MyWeek extends React.Component {
render() {
let { date } = this.props
let range = MyWeek.range(date)

while (dates.inRange(dateInRange, start, end, 'day')) {
range.push(dateInRange);
dateInRange = dates.add(dateInRange, 1, 'day');
return <TimeGrid {...this.props} range={range} eventOffset={15} />
}

return range;
}

class MyWeek extends React.Component {
render() {
let { date, culture } = this.props
let range = getRange(date, culture)
MyWeek.range = date => {
let start = date
let end = dates.add(start, 2, 'day')

return <TimeGrid {...this.props} range={range} eventOffset={15} />
let current = start
let range = []

while (dates.lte(current, end, 'day')) {
range.push(current)
current = dates.add(current, 1, 'day')
}

return range
}

MyWeek.navigate = (date, action) => {
switch (action) {
case BigCalendar.Navigate.PREVIOUS:
return dates.add(date, -1, 'week')
return dates.add(date, -3, 'day')

case BigCalendar.Navigate.NEXT:
return dates.add(date, 1, 'week')
return dates.add(date, 3, 'day')

default:
return date
}
}

MyWeek.title = (date, { formats, culture }) => {
return `My awesome week: ${date.toLocaleString()}`
MyWeek.title = date => {
return `My awesome week: ${date.toLocaleDateString()}`
}


let CustomView = () => (
<BigCalendar
events={events}
defaultView="week"
defaultDate={new Date(2015, 3, 1)}
views={{ month: true, week: MyWeek, work_week: true }}
test="io"
views={{ month: true, week: MyWeek }}
/>
)

Expand Down
8 changes: 0 additions & 8 deletions src/Agenda.js
Original file line number Diff line number Diff line change
Expand Up @@ -248,12 +248,4 @@ Agenda.title = (
return localizer.format({ start, end }, formats.agendaHeaderFormat, culture)
}

Agenda.title = (
start,
{ length = (length = Agenda.defaultProps.length), formats, culture }
) => {
let end = dates.add(start, length, 'day')
return localizer.format({ start, end }, formats.agendaHeaderFormat, culture)
}

export default Agenda

0 comments on commit 201fcab

Please sign in to comment.