Date-fns localizer

README.md

@@ -51,7 +51,7 @@ const MyCalendar = props => (
       events={myEventsList}
       startAccessor="start"
       endAccessor="end"
-      style={{height: 500}}
+      style={{ height: 500 }}
     />
   </div>
 )
@@ -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>
 )

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'

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