feat: Dayjs localizer (#2264)

* docs: fixed instructions to run examples locally
* fix: luxon story now uses luxon instead of moment
* fix(moment localizer): removed comments about 'day' and 'date' in the call to isSame()
* feat: created dayjs localizer
* fix(dayjs localizer): min() & max() now both behave correctly when a default timezone is applied
* docs(localizer guide): edited last two paragraphs to include the new localizer
* fix(dayjs localizer): dayjs plugins are now loaded by the localizer
* docs: updated README.md & exampleCode to reflect dayjs plugins being loaded by the localizer
* docs(localizer props): added dayjs example & sorted examples alphabetically
* docs(exampleCode dayjs): use dayjs to construct date based props
* test: added commented out dayjs configuration
* revert(README.md): remove note on node 16 storybook requirement
* fix(dayjs localizer): dayjs plugins are now loaded by the dayjsLocalizer
* docs(dayjs localizer): mention dayjs plugins being loaded by the dayjsLocalizer
* docs(timezones): mention the dayjsLocalizer's ability to handle timezones too

Big thanks to @marnixhoh for the effort and patience

#2264

Author: marnixhoh

README.md

@@ -29,15 +29,15 @@ element has a height, or the calendar won't be visible. To provide your own cust
 $ git clone [email protected]:jquense/react-big-calendar.git
 $ cd react-big-calendar
 $ yarn
-$ yarn examples
+$ yarn storybook
 ```
 
 - Open [localhost:3000/examples/index.html](http://localhost:3000/examples/index.html).
 
 ### Localization and Date Formatting
 
-`react-big-calendar` includes three options for handling the date formatting and culture localization, depending
-on your preference of DateTime libraries. You can use either the [Moment.js](https://momentjs.com/), [Globalize.js](https://github.com/jquery/globalize) or [date-fns](https://date-fns.org/) localizers.
+`react-big-calendar` includes four options for handling the date formatting and culture localization, depending
+on your preference of DateTime libraries. You can use either the [Moment.js](https://momentjs.com/), [Globalize.js](https://github.com/jquery/globalize), [date-fns](https://date-fns.org/), [Day.js](https://day.js.org) localizers.
 
 Regardless of your choice, you **must** choose a localizer to use this library:
 
@@ -118,6 +118,37 @@ const MyCalendar = (props) => (
 )
 ```
 
+#### Day.js
+
+Note that the dayjsLocalizer extends Day.js with the following plugins:
+
+- [IsBetween](https://day.js.org/docs/en/plugin/is-between)
+- [IsSameOrAfter](https://day.js.org/docs/en/plugin/is-same-or-after)
+- [IsSameOrBefore](https://day.js.org/docs/en/plugin/is-same-or-before)
+- [LocaleData](https://day.js.org/docs/en/plugin/locale-data)
+- [LocalizedFormat](https://day.js.org/docs/en/plugin/localized-format)
+- [MinMax](https://day.js.org/docs/en/plugin/min-max)
+- [UTC](https://day.js.org/docs/en/plugin/utc)
+
+```js
+import { Calendar, dayjsLocalizer } from 'react-big-calendar'
+import dayjs from 'dayjs'
+
+const localizer = dayjsLocalizer(dayjs)
+
+const MyCalendar = (props) => (
+  <div>
+    <Calendar
+      localizer={localizer}
+      events={myEventsList}
+      startAccessor="start"
+      endAccessor="end"
+      style={{ height: 500 }}
+    />
+  </div>
+)
+```
+
 ## Custom Styling
 
 Out of the box, you can include the compiled CSS files and be up and running. But, sometimes, you may want to style

package.json

@@ -107,6 +107,7 @@
     "@babel/runtime": "^7.18.6",
     "clsx": "^1.2.1",
     "date-arithmetic": "^4.1.0",
+    "dayjs": "^1.11.5",
     "dom-helpers": "^5.2.1",
     "globalize": "^0.1.1",
     "invariant": "^2.2.4",

src/index.js

@@ -13,5 +13,6 @@ export { default as momentLocalizer } from './localizers/moment'
 export { default as luxonLocalizer } from './localizers/luxon'
 export { default as globalizeLocalizer } from './localizers/globalize'
 export { default as dateFnsLocalizer } from './localizers/date-fns'
+export { default as dayjsLocalizer } from './localizers/dayjs'
 export { default as move } from './utils/move'
 export { views as Views, navigate as Navigate } from './utils/constants'