Upgrade to date-fns V2

docs/examples/12_custom_locales.mdx

@@ -6,6 +6,7 @@ order: 12
 ---
 
 import Calendar, { Sandbox } from "../demo";
+import { it } from 'date-fns/locale';
 
 # Custom Locales
 
@@ -46,9 +47,11 @@ For more information about the locales, see the [props#locale](/props#locale) se
 This example uses the Italian locale.
 
 <Sandbox>
-  <Calendar locale={require("date-fns/locale/it")} />
+  <Calendar locale={it} />
 </Sandbox>
 
 ```js
-<Calendar locale={require("date-fns/locale/it")} />
+import { it } from 'date-fns/locale';
+
+<Calendar locale={it} />
 ```

docs/examples/30_advanced_example.mdx

@@ -5,7 +5,7 @@ route: /examples/advanced-example
 order: 30
 ---
 
-import { format, areRangesOverlapping } from "date-fns";
+import { format, areIntervalsOverlapping } from "date-fns";
 import Calendar, { Sandbox, EventCapturer } from "../demo";
 import Component from "@reach/component-component";
 
@@ -42,7 +42,7 @@ The things that you could do:
             renderHeader={() => null}
             renderDayHeader={date => (
               <div className="SkedifyCalendar__WeekHeader__Days__Day">
-                {format(date, "dddd")}
+                {format(date, "iiii")}
               </div>
             )}
             onEventClick={event => capture("onEventClick", event)}
@@ -114,7 +114,7 @@ The things that you could do:
                   return false;
                 }
 
-                return areRangesOverlapping(
+                return areIntervalsOverlapping(
                   storedEvent.start,
                   storedEvent.end,
                   start,
@@ -125,7 +125,7 @@ The things that you could do:
             canCreateEvent={({ start, end }) => {
               // We don't allow overlapping events
               return !state.events.some(event =>
-                areRangesOverlapping(event.start, event.end, start, end)
+                areIntervalsOverlapping(event.start, event.end, start, end)
               );
             }}
             events={state.events}
@@ -146,7 +146,7 @@ The things that you could do:
   renderHeader={() => null}
   renderDayHeader={date => (
     <div className="SkedifyCalendar__WeekHeader__Days__Day">
-      {format(date, "dddd")}
+      {format(date, "iiii")}
     </div>
   )}
   onEventClick={event => console.log("onEventClick", event)}
@@ -216,7 +216,7 @@ The things that you could do:
         return false;
       }
 
-      return areRangesOverlapping(
+      return areIntervalsOverlapping(
         storedEvent.start,
         storedEvent.end,
         start,
@@ -227,7 +227,7 @@ The things that you could do:
   canCreateEvent={({ start, end }) => {
     // We don't allow overlapping events
     return !this.state.events.some(event =>
-      areRangesOverlapping(event.start, event.end, start, end)
+      areIntervalsOverlapping(event.start, event.end, start, end)
     );
   }}
   events={this.state.events}

package.json

@@ -50,14 +50,10 @@
     "lib"
   ],
   "license": "MIT",
-  "dependencies": {
-    "date-fns": "^1.29.0",
-    "docz": "^0.12.13",
-    "uuid": "^3.3.2"
-  },
   "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "uuid": ">=8",
+    "date-fns": ">=2",
+    "react": ">=16"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.0.0",
@@ -71,6 +67,8 @@
     "commitizen": "^3.0.5",
     "cross-env": "^5.2.0",
     "cz-conventional-changelog": "^2.1.0",
+    "date-fns": "^2.21.3",
+    "docz": "^0.12.13",
     "docz-plugin-css": "^0.11.0",
     "eslint": "^5.9.0",
     "eslint-config-prettier": "^3.3.0",
@@ -87,11 +85,15 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "semantic-release": "^15.12.3",
-    "travis-deploy-once": "^5.0.9"
+    "travis-deploy-once": "^5.0.9",
+    "uuid": "^8.3.2"
   },
   "config": {
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
+  },
+  "volta": {
+    "node": "10.24.1"
   }
 }

src/components/Calendar/Calendar.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 import {
   startOfWeek,
@@ -514,7 +514,10 @@ class Calendar extends Component {
                           ref={gutterRef}
                           slotsToRender={slotsToRender}
                           sizeOfOneSlot={sizeOfOneSlot}
-                          startTime={format(startTime)}
+                          startTime={format(
+                            startTime,
+                            `yyyy-MM-dd'T'HH:mm:ss.SSSxxx`
+                          )}
                           step={step}
                           render={renderGutterItem}
                         />

src/components/Calendar/DragHandle.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { isFunction } from '../../utils/isFunction';
 
 const PLACEMENT_TOP = uuid();

src/components/Calendar/Gutter.js

@@ -1,7 +1,7 @@
 import React, { memo, forwardRef } from 'react';
 import { Stack } from './Stack';
 import { range } from '../../utils/range';
-import { addMinutes } from 'date-fns';
+import { addMinutes, parseISO } from 'date-fns';
 
 function GutterComponent(
   { slotsToRender, sizeOfOneSlot, startTime, step, render },
@@ -15,7 +15,7 @@ function GutterComponent(
       className="SkedifyCalendar__Gutter"
     >
       {range(slotsToRender).map(slotIndex => {
-        const time = addMinutes(startTime, slotIndex * step);
+        const time = addMinutes(parseISO(startTime), slotIndex * step);
 
         return (
           <div

src/components/Calendar/LocaleContext.js

@@ -1,13 +1,11 @@
 import { createContext } from 'react';
 
-import german from 'date-fns/locale/de';
-import french from 'date-fns/locale/fr';
-import dutch from 'date-fns/locale/nl';
+import { nl, fr, de } from 'date-fns/locale';
 
 const AVAILABLE_LOCALES = {
-  de: german,
-  fr: french,
-  nl: dutch,
+  de,
+  fr,
+  nl,
 };
 
 const DEFAULT_LOCALE = undefined; // The default for date-fns will be english anyway

src/components/Calendar/Stack.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 export const DIRECTION = {
   HORIZONTAL_REVERSE: uuid(),

src/components/Calendar/defaultRenderers.js

@@ -16,20 +16,20 @@ export const DEFAULT_RENDER_HEADER = ({ start, end }) => (
     {locale => (
       <div className="SkedifyCalendar__Header">
         {isSameDay(start, end) ? (
-          format(start, 'DD MMMM YYYY')
+          format(start, 'dd LLLL yyyy')
         ) : (
           <React.Fragment>
             {format(
               start,
               isSameYear(start, end)
                 ? isSameMonth(start, end)
-                  ? 'DD'
-                  : 'DD MMMM'
-                : 'DD MMMM YYYY',
+                  ? 'dd'
+                  : 'dd LLLL'
+                : 'dd LLLL yyyy',
               { locale }
             )}
             {' - '}
-            {format(end, 'DD MMMM YYYY', { locale })}
+            {format(end, 'dd LLLL yyyy', { locale })}
           </React.Fragment>
         )}
       </div>
@@ -41,7 +41,7 @@ export const DEFAULT_RENDER_DAY_HEADER = date => (
   <LocaleContext.Consumer>
     {locale => (
       <div className="SkedifyCalendar__WeekHeader__Days__Day">
-        {format(date, 'dddd DD/MM', { locale })}
+        {format(date, 'iiii dd/LL', { locale })}
       </div>
     )}
   </LocaleContext.Consumer>