Skip to content

Commit

Permalink
feat: add Date-fns localizer (#1542)
Browse files Browse the repository at this point in the history
* testing date-fns localizer

* format updates for fns 2.0

* format updates for fns 2.0

* README update

* README update
  • Loading branch information
harel authored and jquense committed Dec 9, 2019
1 parent 77004e2 commit 749c91c
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 2 deletions.
36 changes: 34 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const MyCalendar = props => (
events={myEventsList}
startAccessor="start"
endAccessor="end"
style={{height: 500}}
style={{ height: 500 }}
/>
</div>
)
Expand All @@ -72,7 +72,39 @@ const MyCalendar = props => (
events={myEventsList}
startAccessor="start"
endAccessor="end"
style={{height: 500}}
style={{ height: 500 }}
/>
</div>
)
```

#### date-fns 2.0

```js
import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import format from 'date-fns/format'
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'
const locales = {
'en-US': require('date-fns/locale/en-US'),
}
const localizer = dateFnsLocalizer({
format,
parse,
startOfWeek,
getDay,
locales,
})

const MyCalendar = props => (
<div>
<Calendar
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
style={{ height: 500 }}
/>
</div>
)
Expand Down
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,6 @@ export { default as Calendar } from './Calendar'
export { DateLocalizer } from './localizer'
export { default as momentLocalizer } from './localizers/moment'
export { default as globalizeLocalizer } from './localizers/globalize'
export { default as dateFnsLocalizer } from './localizers/date-fns'
export { default as move } from './utils/move'
export { views as Views, navigate as Navigate } from './utils/constants'
65 changes: 65 additions & 0 deletions src/localizers/date-fns.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import * as dates from '../utils/dates'
import { DateLocalizer } from '../localizer'

let dateRangeFormat = ({ start, end }, culture, local) =>
`${local.format(start, 'P', culture)}${local.format(end, 'P', culture)}`

let timeRangeFormat = ({ start, end }, culture, local) =>
`${local.format(start, 'p', culture)}${local.format(end, 'p', culture)}`

let timeRangeStartFormat = ({ start }, culture, local) =>
`${local.format(start, 'h:mma', culture)} – `

let timeRangeEndFormat = ({ end }, culture, local) =>
` – ${local.format(end, 'h:mma', culture)}`

let weekRangeFormat = ({ start, end }, culture, local) =>
`${local.format(start, 'MMMM dd', culture)}${local.format(
end,
dates.eq(start, end, 'month') ? 'dd' : 'MMMM dd',
culture
)}`

export let formats = {
dateFormat: 'dd',
dayFormat: 'dd ddd',
weekdayFormat: 'cccc',

selectRangeFormat: timeRangeFormat,
eventTimeRangeFormat: timeRangeFormat,
eventTimeRangeStartFormat: timeRangeStartFormat,
eventTimeRangeEndFormat: timeRangeEndFormat,

timeGutterFormat: 'p',

monthHeaderFormat: 'MMMM yyyy',
dayHeaderFormat: 'dddd MMM dd',
dayRangeHeaderFormat: weekRangeFormat,
agendaHeaderFormat: dateRangeFormat,

agendaDateFormat: 'ddd MMM dd',
agendaTimeFormat: 'p',
agendaTimeRangeFormat: timeRangeFormat,
}

const dateFnsLocalizer = function({
startOfWeek,
getDay,
format: _format,
locales,
}) {
return new DateLocalizer({
formats,
firstOfWeek(culture) {
return getDay(startOfWeek(new Date(), { locale: locales[culture] }))
},

format(value, formatString, culture) {
return _format(new Date(value), formatString, {
locale: locales[culture],
})
},
})
}

export default dateFnsLocalizer

0 comments on commit 749c91c

Please sign in to comment.