From 56ecad2def97c1c2c20af22e5ffa4e95d932cf83 Mon Sep 17 00:00:00 2001 From: Harel Malka Date: Wed, 4 Dec 2019 13:52:55 +0000 Subject: [PATCH 1/5] testing date-fns localizer --- src/index.js | 1 + src/localizers/date-fns.js | 66 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 src/localizers/date-fns.js diff --git a/src/index.js b/src/index.js index 0af254b54a..e61687a380 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 0000000000..c5524c3bba --- /dev/null +++ b/src/localizers/date-fns.js @@ -0,0 +1,66 @@ +import * as dates from '../utils/dates' +import { DateLocalizer } from '../localizer' + +let dateRangeFormat = ({ start, end }, culture, local) => { + return ( + local.format(start, 'L', culture) + ' — ' + local.format(end, 'L', culture) + ) +} + +let timeRangeFormat = ({ start, end }, culture, local) => + local.format(start, 'LT', culture) + ' — ' + local.format(end, 'LT', 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: 'ddd', + + selectRangeFormat: timeRangeFormat, + eventTimeRangeFormat: timeRangeFormat, + eventTimeRangeStartFormat: timeRangeStartFormat, + eventTimeRangeEndFormat: timeRangeEndFormat, + + timeGutterFormat: 'LT', + + monthHeaderFormat: 'MMMM YYYY', + dayHeaderFormat: 'dddd MMM DD', + dayRangeHeaderFormat: weekRangeFormat, + agendaHeaderFormat: dateRangeFormat, + + agendaDateFormat: 'ddd MMM DD', + agendaTimeFormat: 'LT', + 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 From 9fb5657a0ff4df5cbd70355fd91230606d1b170d Mon Sep 17 00:00:00 2001 From: Harel Malka Date: Wed, 4 Dec 2019 15:08:07 +0000 Subject: [PATCH 2/5] format updates for fns 2.0 --- src/localizers/date-fns.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/localizers/date-fns.js b/src/localizers/date-fns.js index c5524c3bba..40e0bb4baa 100644 --- a/src/localizers/date-fns.js +++ b/src/localizers/date-fns.js @@ -3,12 +3,12 @@ import { DateLocalizer } from '../localizer' let dateRangeFormat = ({ start, end }, culture, local) => { return ( - local.format(start, 'L', culture) + ' — ' + local.format(end, 'L', culture) + local.format(start, 'P', culture) + ' — ' + local.format(end, 'P', culture) ) } let timeRangeFormat = ({ start, end }, culture, local) => - local.format(start, 'LT', culture) + ' — ' + local.format(end, 'LT', culture) + local.format(start, 'p', culture) + ' — ' + local.format(end, 'p', culture) let timeRangeStartFormat = ({ start }, culture, local) => local.format(start, 'h:mma', culture) + ' — ' @@ -17,29 +17,29 @@ 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(start, 'MMMM dd', culture) + ' - ' + - local.format(end, dates.eq(start, end, 'month') ? 'DD' : 'MMMM DD', culture) + local.format(end, dates.eq(start, end, 'month') ? 'dd' : 'MMMM dd', culture) export let formats = { - dateFormat: 'DD', - dayFormat: 'DD ddd', - weekdayFormat: 'ddd', + dateFormat: 'dd', + dayFormat: 'dd ddd', + weekdayFormat: 'cccc', selectRangeFormat: timeRangeFormat, eventTimeRangeFormat: timeRangeFormat, eventTimeRangeStartFormat: timeRangeStartFormat, eventTimeRangeEndFormat: timeRangeEndFormat, - timeGutterFormat: 'LT', + timeGutterFormat: 'p', - monthHeaderFormat: 'MMMM YYYY', - dayHeaderFormat: 'dddd MMM DD', + monthHeaderFormat: 'MMMM yyyy', + dayHeaderFormat: 'dddd MMM dd', dayRangeHeaderFormat: weekRangeFormat, agendaHeaderFormat: dateRangeFormat, - agendaDateFormat: 'ddd MMM DD', - agendaTimeFormat: 'LT', + agendaDateFormat: 'ddd MMM dd', + agendaTimeFormat: 'p', agendaTimeRangeFormat: timeRangeFormat, } From 444a001b5bf6b6835da7fd88f535f417e8d4f4b3 Mon Sep 17 00:00:00 2001 From: Harel Malka Date: Wed, 4 Dec 2019 15:14:41 +0000 Subject: [PATCH 3/5] format updates for fns 2.0 --- src/localizers/date-fns.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/localizers/date-fns.js b/src/localizers/date-fns.js index 40e0bb4baa..7a45a97cc7 100644 --- a/src/localizers/date-fns.js +++ b/src/localizers/date-fns.js @@ -1,25 +1,24 @@ import * as dates from '../utils/dates' import { DateLocalizer } from '../localizer' -let dateRangeFormat = ({ start, end }, culture, local) => { - return ( - local.format(start, 'P', culture) + ' — ' + local.format(end, 'P', culture) - ) -} +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) + `${local.format(start, 'p', culture)} – ${local.format(end, 'p', culture)}` let timeRangeStartFormat = ({ start }, culture, local) => - local.format(start, 'h:mma', culture) + ' — ' + `${local.format(start, 'h:mma', culture)} – ` let timeRangeEndFormat = ({ end }, culture, local) => - ' — ' + local.format(end, 'h:mma', culture) + ` – ${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) + `${local.format(start, 'MMMM dd', culture)} – ${local.format( + end, + dates.eq(start, end, 'month') ? 'dd' : 'MMMM dd', + culture + )}` export let formats = { dateFormat: 'dd', From cc2345a0d8b120706fe73bc5de09bb8b88d78343 Mon Sep 17 00:00:00 2001 From: Harel Malka Date: Wed, 4 Dec 2019 15:18:14 +0000 Subject: [PATCH 4/5] README update --- README.md | 36 ++++++++++++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1ed82e4f5d..f8a8f0667e 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 + +```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 => ( +
+
) From 4ba2702b6fec40c7f42439feca65f83e3b1166e6 Mon Sep 17 00:00:00 2001 From: Harel Malka Date: Wed, 4 Dec 2019 15:18:58 +0000 Subject: [PATCH 5/5] README update --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f8a8f0667e..096c8338f1 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ const MyCalendar = props => ( ) ``` -#### date-fns +#### date-fns 2.0 ```js import { Calendar, dateFnsLocalizer } from 'react-big-calendar'