diff --git a/README.md b/README.md
index 1ed82e4f5..096c8338f 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ const MyCalendar = props => (
events={myEventsList}
startAccessor="start"
endAccessor="end"
- style={{height: 500}}
+ style={{ height: 500 }}
/>
)
@@ -72,7 +72,39 @@ const MyCalendar = props => (
events={myEventsList}
startAccessor="start"
endAccessor="end"
- style={{height: 500}}
+ style={{ height: 500 }}
+ />
+
+)
+```
+
+#### 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 => (
+
+
)
diff --git a/src/index.js b/src/index.js
index 0af254b54..e61687a38 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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'
diff --git a/src/localizers/date-fns.js b/src/localizers/date-fns.js
new file mode 100644
index 000000000..7a45a97cc
--- /dev/null
+++ b/src/localizers/date-fns.js
@@ -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