From 3d3bbd614fb782ab58dcf59ea3f72029a2375c04 Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Wed, 24 Mar 2021 19:35:37 +0100
Subject: [PATCH 01/13] WIP: able to pass down a range and give it a a color
 (all hardcoded shizzle)

---
 .../DatePicker/DatePicker.scss                |  7 +++++
 .../DatePicker/DatePicker.tsx                 |  2 ++
 .../DatePicker/Month/Month.tsx                | 30 +++++++++++++++++--
 .../DateTimeRangePicker.tsx                   | 15 ++++++++++
 src/index.html                                | 10 +++++++
 5 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 src/index.html

diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.scss b/src/DateTimeRangePicker/DatePicker/DatePicker.scss
index f2ab0a7..92e45e0 100644
--- a/src/DateTimeRangePicker/DatePicker/DatePicker.scss
+++ b/src/DateTimeRangePicker/DatePicker/DatePicker.scss
@@ -93,6 +93,13 @@ $color-disabled: rgba(black, .4);
             color: white;
           }
 
+          &.already-selected {
+            background-color: yellow;
+            margin: .3em 0;
+            padding: 0 .3em;
+            border-radius: 0;
+          }
+
           &.in-range {
             background-color: rgba($color-highlight, .5);
             margin: .3em 0;
diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
index a140ffc..866c0b9 100644
--- a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
+++ b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
@@ -9,6 +9,7 @@ import Header from './Header/Header'
 const DatePicker: React.FunctionComponent<IProps> = (
     {
         range = false,
+        displayRanges,
         fromDate,
         untilDate,
         months = 1,
@@ -67,6 +68,7 @@ const DatePicker: React.FunctionComponent<IProps> = (
                                        setHoverDate(onHoverDate)
                                    }
                                }
+                               displayRanges={displayRanges}
                         />
                     )
                 }
diff --git a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
index 7841053..5b0ddd0 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
+++ b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
@@ -5,6 +5,7 @@ import IProps from './IProps'
 
 const Month: React.FunctionComponent<IProps> = (
     {
+        displayRanges,
         month,
         year,
         fromDate,
@@ -26,15 +27,38 @@ const Month: React.FunctionComponent<IProps> = (
             dates.push(currentDate.clone())
             currentDate.add(1, 'day')
         }
+        
+        // todo
+        return displayRanges[0].map((buttonDate: Moment) => {
+            const classNames = []
+            classNames.push('already-selected')
+            return <button
+                key={`day${buttonDate.format('YYYYMMDD')}`}
+                className={classNames.join(' ')}
+                onClick={
+                    () => {
+                        onDaySelected(buttonDate.clone())
+                    }
+                }
+                onMouseEnter={
+                    () => {
+                        onDayHover(buttonDate.clone())
+                    }
+                }
+                type={'button'}
+            >
+                {buttonDate.format('D')}
+            </button>
+        })
 
         return dates.map((buttonDate: Moment) => {
             const classNames = []
-            if (! buttonDate.isSame(date, 'month')) {
-                if (buttonDate.isBefore(date) && ! showDaysPreviousMonth) {
+            if (!buttonDate.isSame(date, 'month')) {
+                if (buttonDate.isBefore(date) && !showDaysPreviousMonth) {
                     return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
                 }
 
-                if (buttonDate.isAfter(date) && ! showDaysNextMonth) {
+                if (buttonDate.isAfter(date) && !showDaysNextMonth) {
                     return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
                 }
 
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index 8677036..c8d583d 100644
--- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -6,11 +6,13 @@ import IProps from './IProps'
 import TimePicker from './TimePicker/TimePicker'
 import DatePicker from './DatePicker/DatePicker'
 import Utils from './Utils'
+import {Simulate} from 'react-dom/test-utils'
 
 const DateTimeRangePicker: React.FunctionComponent<IProps> = (
     {
         date = true,
         range = false,
+        displayRanges = [],
         time = false,
         inline = true,
         fromDate,
@@ -19,6 +21,17 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         onChange
     }
 ) => {
+    const currentDate = moment()
+    const endDate = currentDate.clone().add(7, 'days');
+
+    const dummyDates = []
+    while (currentDate.isBefore(endDate)) {
+        dummyDates.push(currentDate.clone())
+        currentDate.add(1, 'day')
+    }
+    console.log(dummyDates)
+    displayRanges = [dummyDates]
+
     const [currentFromDate, setCurrentFromDate] = useState<Moment | undefined>(fromDate ? fromDate.clone() : undefined)
     const [currentUntilDate, setCurrentUntilDate] = useState<Moment | undefined>(
         untilDate ? untilDate.clone() : undefined
@@ -56,10 +69,12 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         [currentFromDate, currentFromTime, currentUntilDate, currentUntilTime]
     )
 
+    // return <p>test</p>
     return <div className={'date-time-range-picker'}>
         {date
             ? <DatePicker
                 range={range}
+                displayRanges={displayRanges}
                 months={months}
                 fromDate={currentFromDate}
                 untilDate={currentUntilDate}
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..6b6499c
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>$Title$</title>
+</head>
+<body>
+$END$
+</body>
+</html>

From a74052e972a202bb45f7cfb655b1d07634cbea57 Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Thu, 25 Mar 2021 10:29:17 +0100
Subject: [PATCH 02/13] WIP: able to display multiple ranges

---
 .../DatePicker/Month/Month.tsx                | 56 +++++++++++--------
 .../DateTimeRangePicker.tsx                   | 39 ++++++++++---
 2 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
index 5b0ddd0..e88743b 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
+++ b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
@@ -27,32 +27,44 @@ const Month: React.FunctionComponent<IProps> = (
             dates.push(currentDate.clone())
             currentDate.add(1, 'day')
         }
-        
+
         // todo
-        return displayRanges[0].map((buttonDate: Moment) => {
-            const classNames = []
-            classNames.push('already-selected')
-            return <button
-                key={`day${buttonDate.format('YYYYMMDD')}`}
-                className={classNames.join(' ')}
-                onClick={
-                    () => {
-                        onDaySelected(buttonDate.clone())
-                    }
-                }
-                onMouseEnter={
-                    () => {
-                        onDayHover(buttonDate.clone())
-                    }
-                }
-                type={'button'}
-            >
-                {buttonDate.format('D')}
-            </button>
-        })
+        // return displayRanges[0].map((buttonDate: Moment) => {
+        //     const classNames = []
+        //     classNames.push('already-selected')
+        //     return <button
+        //         key={`day${buttonDate.format('YYYYMMDD')}`}
+        //         className={classNames.join(' ')}
+        //         onClick={
+        //             () => {
+        //                 onDaySelected(buttonDate.clone())
+        //             }
+        //         }
+        //         onMouseEnter={
+        //             () => {
+        //                 onDayHover(buttonDate.clone())
+        //             }
+        //         }
+        //         type={'button'}
+        //     >
+        //         {buttonDate.format('D')}
+        //     </button>
+        // })
 
         return dates.map((buttonDate: Moment) => {
             const classNames = []
+
+            // todo: use filter?
+            displayRanges.forEach(displayRange => {
+                displayRange.forEach( date => {
+                    // console.log(date)
+                    // console.log(buttonDate)
+                    if (date.isSame(buttonDate, 'day')) {
+                        classNames.push('already-selected')
+                    }
+                })
+            })
+
             if (!buttonDate.isSame(date, 'month')) {
                 if (buttonDate.isBefore(date) && !showDaysPreviousMonth) {
                     return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index c8d583d..fc0a3a4 100644
--- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -21,16 +21,39 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         onChange
     }
 ) => {
-    const currentDate = moment()
-    const endDate = currentDate.clone().add(7, 'days');
 
-    const dummyDates = []
-    while (currentDate.isBefore(endDate)) {
-        dummyDates.push(currentDate.clone())
-        currentDate.add(1, 'day')
+    
+    const startDate1 = moment()
+    const endDate1 = startDate1.clone().add(7, 'days')
+
+    // const startDate2 = moment().clone().set('year', 2021).set('month', 3).set('date', 10)
+    const startDate2 = startDate1.clone().day(-14)
+    const endDate2 = startDate2.clone().add(2, 'days')
+
+    const dummyDates1 = []
+    const dummyDates2 = []
+    while (startDate1.isBefore(endDate1)) {
+        dummyDates1.push(startDate1.clone())
+        startDate1.add(1, 'day')
+    }
+    while (startDate2.isBefore(endDate2)) {
+        dummyDates2.push(startDate2.clone())
+        startDate2.add(1, 'day')
     }
-    console.log(dummyDates)
-    displayRanges = [dummyDates]
+    console.log(dummyDates2)
+
+    displayRanges = [dummyDates1, dummyDates2]
+    // displayRanges = [dummyDates1]
+
+    // const startDate = moment()
+    // const endDate = startDate.clone().add(7, 'days');
+    //
+    // const range1 = {
+    //     startDate: startDate,
+    //     endDate: endDate
+    // }
+    //
+    // displayRanges.push(range1)
 
     const [currentFromDate, setCurrentFromDate] = useState<Moment | undefined>(fromDate ? fromDate.clone() : undefined)
     const [currentUntilDate, setCurrentUntilDate] = useState<Moment | undefined>(

From a03813866a56749ec5dbb289a7fc501a03d751e2 Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Thu, 25 Mar 2021 11:11:37 +0100
Subject: [PATCH 03/13] WIP: sending over to style multiple colors

---
 .../DatePicker/DatePicker.scss                | 21 +++++++++++-
 .../DatePicker/Month/Month.tsx                | 34 ++++---------------
 .../DateTimeRangePicker.tsx                   | 28 +++++++--------
 3 files changed, 39 insertions(+), 44 deletions(-)

diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.scss b/src/DateTimeRangePicker/DatePicker/DatePicker.scss
index 92e45e0..4653c85 100644
--- a/src/DateTimeRangePicker/DatePicker/DatePicker.scss
+++ b/src/DateTimeRangePicker/DatePicker/DatePicker.scss
@@ -2,6 +2,7 @@ $color-highlight: #428be3;
 $color-background-day: rgba(black, .1);
 $color-other-month: rgba(black, .4);
 $color-disabled: rgba(black, .4);
+$color-already-selected: rgba(red, .4);
 
 .date-time-range-picker .date-time-range-picker-dates{
   position: relative;
@@ -94,10 +95,28 @@ $color-disabled: rgba(black, .4);
           }
 
           &.already-selected {
-            background-color: yellow;
+            background-color: $color-already-selected;
             margin: .3em 0;
             padding: 0 .3em;
             border-radius: 0;
+
+            &.active-from-date:not(.active-from-date-reverse) {
+              border-top-left-radius: 1.5em;
+              border-bottom-left-radius: 1.5em;
+              margin-left: .3em;
+              padding-left: 0;
+            }
+
+            &.active-until-date {
+              border-top-right-radius: 1.5em;
+              border-bottom-right-radius: 1.5em;
+              margin-right: .3em;
+              padding-right: 0;
+            }
+
+            &.active {
+              background-color: $color-already-selected;
+            }
           }
 
           &.in-range {
diff --git a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
index e88743b..4fbeb35 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
+++ b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
@@ -28,39 +28,19 @@ const Month: React.FunctionComponent<IProps> = (
             currentDate.add(1, 'day')
         }
 
-        // todo
-        // return displayRanges[0].map((buttonDate: Moment) => {
-        //     const classNames = []
-        //     classNames.push('already-selected')
-        //     return <button
-        //         key={`day${buttonDate.format('YYYYMMDD')}`}
-        //         className={classNames.join(' ')}
-        //         onClick={
-        //             () => {
-        //                 onDaySelected(buttonDate.clone())
-        //             }
-        //         }
-        //         onMouseEnter={
-        //             () => {
-        //                 onDayHover(buttonDate.clone())
-        //             }
-        //         }
-        //         type={'button'}
-        //     >
-        //         {buttonDate.format('D')}
-        //     </button>
-        // })
-
         return dates.map((buttonDate: Moment) => {
             const classNames = []
 
-            // todo: use filter?
             displayRanges.forEach(displayRange => {
-                displayRange.forEach( date => {
-                    // console.log(date)
-                    // console.log(buttonDate)
+                displayRange.forEach(date => {
                     if (date.isSame(buttonDate, 'day')) {
                         classNames.push('already-selected')
+                        if (displayRange[0].isSame(date)) {
+                            classNames.push('active-from-date')
+
+                        } else if (displayRange[displayRange.length - 1].isSame(date)) {
+                            classNames.push('active-until-date')
+                        }
                     }
                 })
             })
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index fc0a3a4..662eb77 100644
--- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -22,16 +22,19 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
     }
 ) => {
 
-    
+    // dummyData
     const startDate1 = moment()
     const endDate1 = startDate1.clone().add(7, 'days')
 
-    // const startDate2 = moment().clone().set('year', 2021).set('month', 3).set('date', 10)
     const startDate2 = startDate1.clone().day(-14)
     const endDate2 = startDate2.clone().add(2, 'days')
 
+    const startDate3 = startDate1.clone().set('year', 2021).set('month', 3).set('date', 10)
+    const endDate3 = startDate3.clone().add(40, 'days')
+
     const dummyDates1 = []
     const dummyDates2 = []
+    const dummyDates3 = []
     while (startDate1.isBefore(endDate1)) {
         dummyDates1.push(startDate1.clone())
         startDate1.add(1, 'day')
@@ -40,20 +43,13 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         dummyDates2.push(startDate2.clone())
         startDate2.add(1, 'day')
     }
-    console.log(dummyDates2)
-
-    displayRanges = [dummyDates1, dummyDates2]
-    // displayRanges = [dummyDates1]
-
-    // const startDate = moment()
-    // const endDate = startDate.clone().add(7, 'days');
-    //
-    // const range1 = {
-    //     startDate: startDate,
-    //     endDate: endDate
-    // }
-    //
-    // displayRanges.push(range1)
+    while (startDate3.isBefore(endDate3)) {
+        dummyDates3.push(startDate3.clone())
+        startDate3.add(1, 'day')
+    }
+
+    displayRanges = [dummyDates1, dummyDates2, dummyDates3]
+
 
     const [currentFromDate, setCurrentFromDate] = useState<Moment | undefined>(fromDate ? fromDate.clone() : undefined)
     const [currentUntilDate, setCurrentUntilDate] = useState<Moment | undefined>(

From c03c96b6e3926a2dc81feea1f7de4695a1d5fcb3 Mon Sep 17 00:00:00 2001
From: Maxim Cvetkovic <maxim.cvetkovic@gmail.com>
Date: Thu, 25 Mar 2021 12:12:24 +0100
Subject: [PATCH 04/13] alot of changes, idk if this is da way

---
 package-lock.json                             | 139 +++++++++++++--
 package.json                                  |   6 +-
 .../DatePicker/Month/Month.tsx                |  40 ++++-
 .../DatePicker/Month/style.ts                 | 168 ++++++++++++++++++
 4 files changed, 330 insertions(+), 23 deletions(-)
 create mode 100644 src/DateTimeRangePicker/DatePicker/Month/style.ts

diff --git a/package-lock.json b/package-lock.json
index 37fdaad..3752d34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@optios/react-date-time-range-picker",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1271,7 +1271,6 @@
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
       "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "dev": true,
       "requires": {
         "@emotion/memoize": "0.7.4"
       }
@@ -1279,8 +1278,7 @@
     "@emotion/memoize": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "dev": true
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
     },
     "@emotion/serialize": {
       "version": "0.11.16",
@@ -1334,14 +1332,12 @@
     "@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-      "dev": true
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
     },
     "@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
-      "dev": true
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "@emotion/utils": {
       "version": "0.11.3",
@@ -5093,6 +5089,16 @@
       "integrity": "sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==",
       "dev": true
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz",
@@ -5326,6 +5332,17 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
       "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
     },
+    "@types/styled-components": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.9.tgz",
+      "integrity": "sha512-kbEG6YlwK8rucITpKEr6pA4Ho9KSQHUUOzZ9lY3va1mtcjvS3D0wDciFyHEiNHKLL/npZCKDQJqm0x44sPO9oA==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/tapable": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz",
@@ -6394,7 +6411,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "2.0.0",
@@ -7297,11 +7318,21 @@
         "recast": "^0.14.7"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
+      "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-      "dev": true
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
@@ -7908,6 +7939,15 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -8347,6 +8387,11 @@
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
       "dev": true
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -9110,6 +9155,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -9200,6 +9250,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -11228,6 +11288,12 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "filelist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.1.tgz",
@@ -12124,7 +12190,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
       "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dev": true,
       "requires": {
         "react-is": "^16.7.0"
       }
@@ -14721,7 +14786,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         }
       }
     },
@@ -16068,6 +16137,12 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -19738,7 +19813,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -20351,8 +20430,7 @@
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "dev": true
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "shebang-command": {
       "version": "1.2.0",
@@ -21131,6 +21209,23 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "styled-components": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
+      "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -22458,7 +22553,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -22745,7 +22844,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
diff --git a/package.json b/package.json
index 98aa2d1..d815582 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3",
     "sass": "^1.26.10",
+    "styled-components": "^5.2.1",
     "tslint": "^6.1.3",
     "typescript": "~3.7.2"
   },
@@ -69,18 +70,19 @@
     "@storybook/node-logger": "^6.0.18",
     "@storybook/preset-create-react-app": "^3.1.4",
     "@storybook/react": "^6.0.18",
+    "@types/styled-components": "^5.1.9",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-runtime": "^6.26.0",
+    "jest": "^25.1.0",
     "lodash": "^4.17.20",
     "react-is": "^16.13.1",
     "rollup": "^2.26.6",
     "rollup-plugin-peer-deps-external": "^2.2.3",
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-typescript2": "^0.27.2",
-    "ts-jest": "^25.2.1",
-    "jest": "^25.1.0"
+    "ts-jest": "^25.2.1"
   },
   "repository": {
     "type": "git",
diff --git a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
index 4fbeb35..f3b4acb 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
+++ b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
@@ -1,7 +1,8 @@
-import React, {ReactElement, useState} from 'react'
+import React, {ReactElement} from 'react'
 import moment, {Moment} from 'moment'
 
 import IProps from './IProps'
+import {CalendarButton} from './style'
 
 const Month: React.FunctionComponent<IProps> = (
     {
@@ -30,11 +31,22 @@ const Month: React.FunctionComponent<IProps> = (
 
         return dates.map((buttonDate: Moment) => {
             const classNames = []
+                let active: boolean = false
+                let alreadySelected: string|undefined
+                let activeFromDate: boolean = false
+                let activeUntilDate: boolean = false
+                let otherMonth: boolean = false
+                let activeFromDateReverse: boolean = false
+                let inRange: boolean = false
+                let hover: boolean = false
+                let hoverPast: boolean = false
+                let hoverFuture: boolean = false
 
             displayRanges.forEach(displayRange => {
                 displayRange.forEach(date => {
                     if (date.isSame(buttonDate, 'day')) {
                         classNames.push('already-selected')
+                        alreadySelected = 'red'
                         if (displayRange[0].isSame(date)) {
                             classNames.push('active-from-date')
 
@@ -55,10 +67,12 @@ const Month: React.FunctionComponent<IProps> = (
                 }
 
                 classNames.push('other-month')
+                otherMonth = true
             }
 
             if (fromDate && buttonDate.isSame(fromDate, 'day')) {
                 classNames.push('active')
+                active = true
                 classNames.push('active-from-date')
 
                 if (!untilDate && hoverDate && hoverDate.isBefore(buttonDate, 'day')) {
@@ -101,7 +115,27 @@ const Month: React.FunctionComponent<IProps> = (
                 }
             }
 
-            return <button
+            return <CalendarButton
+                key={`day${buttonDate.format('YYYYMMDD')}`}
+                onClick={
+                    () => {
+                        onDaySelected(buttonDate.clone())
+                    }
+                }
+                onMouseEnter={
+                    () => {
+                        onDayHover(buttonDate.clone())
+                    }
+                }
+                type={'button'}
+                otherMonth={otherMonth}
+                active={active}
+                alreadySelected={alreadySelected}
+            >
+                {buttonDate.format('D')}
+            </CalendarButton>
+
+            /*<button
                 key={`day${buttonDate.format('YYYYMMDD')}`}
                 className={classNames.join(' ')}
                 onClick={
@@ -117,7 +151,7 @@ const Month: React.FunctionComponent<IProps> = (
                 type={'button'}
             >
                 {buttonDate.format('D')}
-            </button>
+            </button>*/
         })
     }
 
diff --git a/src/DateTimeRangePicker/DatePicker/Month/style.ts b/src/DateTimeRangePicker/DatePicker/Month/style.ts
new file mode 100644
index 0000000..4612ae7
--- /dev/null
+++ b/src/DateTimeRangePicker/DatePicker/Month/style.ts
@@ -0,0 +1,168 @@
+import styled from 'styled-components'
+
+const colorHighlight = '#428be3'
+const colorBackgroundDay = 'rgba(black, .1)'
+const colorOtherMonth = 'rgba(black, .4)'
+const colorDisabled = 'rgba(black, .4)'
+const colorAlreadySelected = 'rgba(red, .4)'
+
+
+export const CalendarButton = styled.button<{
+    active?: boolean,
+    alreadySelected?: string,
+    activeFromDate?: boolean,
+    activeUntilDate?: boolean,
+    otherMonth?: boolean,
+    activeFromDateReverse?: boolean,
+    inRange?: boolean,
+    hover?: boolean,
+    hoverPast?: boolean,
+    hoverFuture?: boolean
+}>`
+  width: 2.1em;
+  height: 2.1em;
+  background-color: ${colorBackgroundDay};
+  border-radius: 1.5em;
+  margin: .3em;
+  cursor: pointer;
+  box-sizing: content-box;
+  color: ${({otherMonth}) => otherMonth ? colorOtherMonth : 'inherit'};
+  background-color: ${({active, alreadySelected}) => active
+    ? (alreadySelected ? alreadySelected : colorHighlight)
+    : (alreadySelected ? alreadySelected : 'inherit')};
+  &:hover:not(.disabled),
+  &.hover:not(.disabled) {
+    background-color: rgba(${colorHighlight}, .8);
+    color: white;
+  }
+
+
+`
+
+export const CalendarButton2 = styled.button`
+        > button {
+          width: 2.1em;
+          height: 2.1em;
+          background-color: ${colorBackgroundDay};
+          border-radius: 1.5em;
+          margin: .3em;
+          cursor: pointer;
+          box-sizing: content-box;
+
+          &:hover:not(.disabled),
+          &.hover:not(.disabled) {
+            background-color: rgba(${colorHighlight}, .8);
+            color: white;
+          }
+
+          &.other-month {
+            color: ${colorOtherMonth};
+          }
+
+          &.active {
+            background-color: $color-highlight;
+            color: white;
+          }
+
+          &.already-selected {
+            background-color: $color-already-selected;
+            margin: .3em 0;
+            padding: 0 .3em;
+            border-radius: 0;
+
+            &.active-from-date:not(.active-from-date-reverse) {
+              border-top-left-radius: 1.5em;
+              border-bottom-left-radius: 1.5em;
+              margin-left: .3em;
+              padding-left: 0;
+            }
+
+            &.active-until-date {
+              border-top-right-radius: 1.5em;
+              border-bottom-right-radius: 1.5em;
+              margin-right: .3em;
+              padding-right: 0;
+            }
+
+            &.active {
+              background-color: $color-already-selected;
+            }
+          }
+
+          &.in-range {
+            background-color: rgba($color-highlight, .5);
+            margin: .3em 0;
+            padding: 0 .3em;
+            border-radius: 0;
+
+            &.active-from-date:not(.active-from-date-reverse) {
+              border-top-left-radius: 1.5em;
+              border-bottom-left-radius: 1.5em;
+              margin-left: .3em;
+              padding-left: 0;
+            }
+
+            &.active-until-date {
+              border-top-right-radius: 1.5em;
+              border-bottom-right-radius: 1.5em;
+              margin-right: .3em;
+              padding-right: 0;
+            }
+
+            &.active {
+              background-color: $color-highlight;
+            }
+          }
+
+          &.hover-range:not(.in-range) {
+            background-color: rgba($color-highlight, .5);
+            margin: .3em 0;
+            padding: 0 .3em;
+            border-radius: 0;
+
+            &.active-from-date:not(.active-from-date-reverse) {
+              border-top-left-radius: 1.5em;
+              border-bottom-left-radius: 1.5em;
+              margin-left: .3em;
+              padding-left: 0;
+
+              &.hover {
+                border-radius: 1.5em;
+                padding-right: 0;
+                margin-right: .3em;
+              }
+            }
+
+            &.active-from-date-reverse {
+              border-top-right-radius: 1.5em;
+              border-bottom-right-radius: 1.5em;
+              margin-right: .3em;
+              padding-right: 0;
+            }
+
+            &.hover-past {
+              border-top-left-radius: 1.5em;
+              border-bottom-left-radius: 1.5em;
+              padding-left: 0;
+              margin-left: .3em;
+            }
+
+            &.hover-future {
+              border-top-right-radius: 1.5em;
+              border-bottom-right-radius: 1.5em;
+              padding-right: 0;
+              margin-right: .3em;
+            }
+
+            &.active {
+              background-color: $color-highlight;
+            }
+          }
+
+          &.disabled {
+            color: $color-disabled;
+            cursor: default;
+          }
+        }
+
+`

From 6370dfb9efc18ca3324c54f64f641717287c7007 Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Thu, 25 Mar 2021 16:01:53 +0100
Subject: [PATCH 05/13] WIP: backup of what didn't work due to rerenders react

- [3:58 PM] uitweg die ik zie: meegeven aan documentatie dat een bepaalde aantal kleuren supproted zijn en die dan gewoon feeden in component
-[3:58 PM] of alles gewoon op rood zetten
---
 .../DatePicker/DatePicker.scss                |  33 +++-
 .../DatePicker/DatePicker.tsx                 |   4 +-
 .../DatePicker/Month/Month.tsx                | 187 ++++++++----------
 .../DateTimeRangePicker.tsx                   |   9 +
 4 files changed, 123 insertions(+), 110 deletions(-)

diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.scss b/src/DateTimeRangePicker/DatePicker/DatePicker.scss
index 4653c85..c1ef6a3 100644
--- a/src/DateTimeRangePicker/DatePicker/DatePicker.scss
+++ b/src/DateTimeRangePicker/DatePicker/DatePicker.scss
@@ -2,7 +2,12 @@ $color-highlight: #428be3;
 $color-background-day: rgba(black, .1);
 $color-other-month: rgba(black, .4);
 $color-disabled: rgba(black, .4);
-$color-already-selected: rgba(red, .4);
+
+$color-already-selected-red: rgba(#FF5722, .4);
+$color-already-selected-green: rgba(#8BC34A, .4);
+$color-already-selected-yellow: rgba(#FFEB3B, .4);
+$color-already-selected-orange: rgba(#FF5722, .4);
+$color-already-selected-purple: rgba(#9C27B0, .4);
 
 .date-time-range-picker .date-time-range-picker-dates{
   position: relative;
@@ -95,7 +100,7 @@ $color-already-selected: rgba(red, .4);
           }
 
           &.already-selected {
-            background-color: $color-already-selected;
+            //background-color: $color-already-selected;
             margin: .3em 0;
             padding: 0 .3em;
             border-radius: 0;
@@ -113,9 +118,29 @@ $color-already-selected: rgba(red, .4);
               margin-right: .3em;
               padding-right: 0;
             }
+            //
+            //&.active {
+            //  background-color: $color-already-selected;
+            //}
 
-            &.active {
-              background-color: $color-already-selected;
+            &.red {
+              background-color: $color-already-selected-red;
+            }
+
+            &.green {
+              background-color: $color-already-selected-green;
+            }
+
+            &.yellow {
+              background-color: $color-already-selected-yellow;
+            }
+
+            &.orange {
+              background-color: $color-already-selected-orange;
+            }
+
+            &.purple {
+              background-color: $color-already-selected-purple;
             }
           }
 
diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
index 866c0b9..812bc27 100644
--- a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
+++ b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
@@ -14,7 +14,8 @@ const DatePicker: React.FunctionComponent<IProps> = (
         untilDate,
         months = 1,
         onFromDateChanged,
-        onUntilDateChanged
+        onUntilDateChanged,
+        assignedColors
     }
 ) => {
     const [currentDate, setCurrentDate] = React.useState<Moment>(fromDate ? fromDate.clone() : moment())
@@ -69,6 +70,7 @@ const DatePicker: React.FunctionComponent<IProps> = (
                                    }
                                }
                                displayRanges={displayRanges}
+                               assignedColors={assignedColors}
                         />
                     )
                 }
diff --git a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
index f3b4acb..98a5260 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
+++ b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
@@ -7,12 +7,13 @@ import {CalendarButton} from './style'
 const Month: React.FunctionComponent<IProps> = (
     {
         displayRanges,
+        assignedColors,
         month,
         year,
         fromDate,
         untilDate,
         hoverDate,
-        showDaysPreviousMonth ,
+        showDaysPreviousMonth,
         showDaysNextMonth,
         onDaySelected,
         onDayHover
@@ -30,129 +31,105 @@ const Month: React.FunctionComponent<IProps> = (
         }
 
         return dates.map((buttonDate: Moment) => {
-            const classNames = []
-                let active: boolean = false
-                let alreadySelected: string|undefined
-                let activeFromDate: boolean = false
-                let activeUntilDate: boolean = false
-                let otherMonth: boolean = false
-                let activeFromDateReverse: boolean = false
-                let inRange: boolean = false
-                let hover: boolean = false
-                let hoverPast: boolean = false
-                let hoverFuture: boolean = false
-
-            displayRanges.forEach(displayRange => {
-                displayRange.forEach(date => {
-                    if (date.isSame(buttonDate, 'day')) {
-                        classNames.push('already-selected')
-                        alreadySelected = 'red'
-                        if (displayRange[0].isSame(date)) {
-                            classNames.push('active-from-date')
-
-                        } else if (displayRange[displayRange.length - 1].isSame(date)) {
-                            classNames.push('active-until-date')
+                const classNames = []
+
+                displayRanges.forEach(displayRange => {
+                    assignedColors.forEach(assignedColor => {
+                        const indexOf = displayRanges.indexOf(displayRange)
+                        if (assignedColors.indexOf(assignedColor) === displayRanges.indexOf(displayRange)) {
+                            classNames.push(assignedColors[indexOf])
                         }
-                    }
+                    })
+                    displayRange.forEach(date => {
+                        if (date.isSame(buttonDate, 'day')) {
+                            classNames.push('already-selected')
+
+
+                            if (displayRange[0].isSame(date)) {
+                                classNames.push('active-from-date')
+
+                            } else if (displayRange[displayRange.length - 1].isSame(date)) {
+                                classNames.push('active-until-date')
+                            }
+                        }
+                    })
                 })
-            })
 
-            if (!buttonDate.isSame(date, 'month')) {
-                if (buttonDate.isBefore(date) && !showDaysPreviousMonth) {
-                    return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
-                }
+                if (!buttonDate.isSame(date, 'month')) {
+                    if (buttonDate.isBefore(date) && !showDaysPreviousMonth) {
+                        return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
+                    }
 
-                if (buttonDate.isAfter(date) && !showDaysNextMonth) {
-                    return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
-                }
+                    if (buttonDate.isAfter(date) && !showDaysNextMonth) {
+                        return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
+                    }
 
-                classNames.push('other-month')
-                otherMonth = true
-            }
+                    classNames.push('other-month')
+                }
 
-            if (fromDate && buttonDate.isSame(fromDate, 'day')) {
-                classNames.push('active')
-                active = true
-                classNames.push('active-from-date')
+                if (fromDate && buttonDate.isSame(fromDate, 'day')) {
+                    classNames.push('active')
+                    classNames.push('active-from-date')
 
-                if (!untilDate && hoverDate && hoverDate.isBefore(buttonDate, 'day')) {
-                    classNames.push('active-from-date-reverse')
+                    if (!untilDate && hoverDate && hoverDate.isBefore(buttonDate, 'day')) {
+                        classNames.push('active-from-date-reverse')
+                    }
                 }
-            }
 
-            if (untilDate && buttonDate.isSame(untilDate, 'day')) {
-                classNames.push('active')
-                classNames.push('active-until-date')
-            }
+                if (untilDate && buttonDate.isSame(untilDate, 'day')) {
+                    classNames.push('active')
+                    classNames.push('active-until-date')
+                }
 
-            if (fromDate && untilDate && buttonDate.isBetween(fromDate, untilDate, 'day', '[]')) {
-                classNames.push('in-range')
-            }
+                if (fromDate && untilDate && buttonDate.isBetween(fromDate, untilDate, 'day', '[]')) {
+                    classNames.push('in-range')
+                }
 
-            if (
-                fromDate
-                && ! untilDate
-                && hoverDate
-                && (
-                    buttonDate.isBetween(fromDate, hoverDate, 'day', '[]')
-                    || buttonDate.isBetween(hoverDate, fromDate, 'day', '[]')
-                )
-            ) {
-                classNames.push('hover-range')
-            }
+                if (
+                    fromDate
+                    && !untilDate
+                    && hoverDate
+                    && (
+                        buttonDate.isBetween(fromDate, hoverDate, 'day', '[]')
+                        || buttonDate.isBetween(hoverDate, fromDate, 'day', '[]')
+                    )
+                ) {
+                    classNames.push('hover-range')
+                }
 
-            if (hoverDate  && buttonDate.isSame(hoverDate, 'day')) {
-                classNames.push('hover')
+                if (hoverDate && buttonDate.isSame(hoverDate, 'day')) {
+                    classNames.push('hover')
 
-                if (fromDate && !untilDate) {
-                    if (fromDate.isAfter(buttonDate, 'day')) {
-                        classNames.push('hover-past')
-                    }
+                    if (fromDate && !untilDate) {
+                        if (fromDate.isAfter(buttonDate, 'day')) {
+                            classNames.push('hover-past')
+                        }
 
-                    if (fromDate.isBefore(buttonDate, 'day')) {
-                        classNames.push('hover-future')
+                        if (fromDate.isBefore(buttonDate, 'day')) {
+                            classNames.push('hover-future')
+                        }
                     }
                 }
-            }
 
-            return <CalendarButton
-                key={`day${buttonDate.format('YYYYMMDD')}`}
-                onClick={
-                    () => {
-                        onDaySelected(buttonDate.clone())
-                    }
-                }
-                onMouseEnter={
-                    () => {
-                        onDayHover(buttonDate.clone())
-                    }
-                }
-                type={'button'}
-                otherMonth={otherMonth}
-                active={active}
-                alreadySelected={alreadySelected}
-            >
-                {buttonDate.format('D')}
-            </CalendarButton>
-
-            /*<button
-                key={`day${buttonDate.format('YYYYMMDD')}`}
-                className={classNames.join(' ')}
-                onClick={
-                    () => {
-                        onDaySelected(buttonDate.clone())
+                return <button
+                    key={`day${buttonDate.format('YYYYMMDD')}`}
+                    className={classNames.join(' ')}
+                    onClick={
+                        () => {
+                            onDaySelected(buttonDate.clone())
+                        }
                     }
-                }
-                onMouseEnter={
-                    () => {
-                        onDayHover(buttonDate.clone())
+                    onMouseEnter={
+                        () => {
+                            onDayHover(buttonDate.clone())
+                        }
                     }
-                }
-                type={'button'}
-            >
-                {buttonDate.format('D')}
-            </button>*/
-        })
+                    type={'button'}
+                >
+                    {buttonDate.format('D')}
+                </button>
+            }
+        )
     }
 
     return <div className={'date-time-range-picker-month'}>
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index 662eb77..f73f0d5 100644
--- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -50,6 +50,14 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
 
     displayRanges = [dummyDates1, dummyDates2, dummyDates3]
 
+    let assignedColors = []
+    displayRanges.forEach(displayRange => {
+        const allowedColors = ['red', 'green', 'yellow', 'orange', 'purple']
+        const randomIndex = Math.floor(Math.random() * (allowedColors.length))
+        const indexOf = displayRanges.indexOf(displayRange)
+        assignedColors[indexOf] = allowedColors[randomIndex]
+    })
+    console.log(assignedColors)
 
     const [currentFromDate, setCurrentFromDate] = useState<Moment | undefined>(fromDate ? fromDate.clone() : undefined)
     const [currentUntilDate, setCurrentUntilDate] = useState<Moment | undefined>(
@@ -94,6 +102,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
             ? <DatePicker
                 range={range}
                 displayRanges={displayRanges}
+                assignedColors={assignedColors}
                 months={months}
                 fromDate={currentFromDate}
                 untilDate={currentUntilDate}

From 8bca1d68dbdf7eeee785ca949e432c9668e6bd1a Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Thu, 25 Mar 2021 16:04:19 +0100
Subject: [PATCH 06/13] Revert "WIP: backup of what didn't work due to
 rerenders react"

This reverts commit 6370dfb9efc18ca3324c54f64f641717287c7007.
---
 .../DatePicker/DatePicker.scss                |  33 +---
 .../DatePicker/DatePicker.tsx                 |   4 +-
 .../DatePicker/Month/Month.tsx                | 187 ++++++++++--------
 .../DateTimeRangePicker.tsx                   |   9 -
 4 files changed, 110 insertions(+), 123 deletions(-)

diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.scss b/src/DateTimeRangePicker/DatePicker/DatePicker.scss
index c1ef6a3..4653c85 100644
--- a/src/DateTimeRangePicker/DatePicker/DatePicker.scss
+++ b/src/DateTimeRangePicker/DatePicker/DatePicker.scss
@@ -2,12 +2,7 @@ $color-highlight: #428be3;
 $color-background-day: rgba(black, .1);
 $color-other-month: rgba(black, .4);
 $color-disabled: rgba(black, .4);
-
-$color-already-selected-red: rgba(#FF5722, .4);
-$color-already-selected-green: rgba(#8BC34A, .4);
-$color-already-selected-yellow: rgba(#FFEB3B, .4);
-$color-already-selected-orange: rgba(#FF5722, .4);
-$color-already-selected-purple: rgba(#9C27B0, .4);
+$color-already-selected: rgba(red, .4);
 
 .date-time-range-picker .date-time-range-picker-dates{
   position: relative;
@@ -100,7 +95,7 @@ $color-already-selected-purple: rgba(#9C27B0, .4);
           }
 
           &.already-selected {
-            //background-color: $color-already-selected;
+            background-color: $color-already-selected;
             margin: .3em 0;
             padding: 0 .3em;
             border-radius: 0;
@@ -118,29 +113,9 @@ $color-already-selected-purple: rgba(#9C27B0, .4);
               margin-right: .3em;
               padding-right: 0;
             }
-            //
-            //&.active {
-            //  background-color: $color-already-selected;
-            //}
-
-            &.red {
-              background-color: $color-already-selected-red;
-            }
-
-            &.green {
-              background-color: $color-already-selected-green;
-            }
 
-            &.yellow {
-              background-color: $color-already-selected-yellow;
-            }
-
-            &.orange {
-              background-color: $color-already-selected-orange;
-            }
-
-            &.purple {
-              background-color: $color-already-selected-purple;
+            &.active {
+              background-color: $color-already-selected;
             }
           }
 
diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
index 812bc27..866c0b9 100644
--- a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
+++ b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
@@ -14,8 +14,7 @@ const DatePicker: React.FunctionComponent<IProps> = (
         untilDate,
         months = 1,
         onFromDateChanged,
-        onUntilDateChanged,
-        assignedColors
+        onUntilDateChanged
     }
 ) => {
     const [currentDate, setCurrentDate] = React.useState<Moment>(fromDate ? fromDate.clone() : moment())
@@ -70,7 +69,6 @@ const DatePicker: React.FunctionComponent<IProps> = (
                                    }
                                }
                                displayRanges={displayRanges}
-                               assignedColors={assignedColors}
                         />
                     )
                 }
diff --git a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
index 98a5260..f3b4acb 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
+++ b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
@@ -7,13 +7,12 @@ import {CalendarButton} from './style'
 const Month: React.FunctionComponent<IProps> = (
     {
         displayRanges,
-        assignedColors,
         month,
         year,
         fromDate,
         untilDate,
         hoverDate,
-        showDaysPreviousMonth,
+        showDaysPreviousMonth ,
         showDaysNextMonth,
         onDaySelected,
         onDayHover
@@ -31,105 +30,129 @@ const Month: React.FunctionComponent<IProps> = (
         }
 
         return dates.map((buttonDate: Moment) => {
-                const classNames = []
-
-                displayRanges.forEach(displayRange => {
-                    assignedColors.forEach(assignedColor => {
-                        const indexOf = displayRanges.indexOf(displayRange)
-                        if (assignedColors.indexOf(assignedColor) === displayRanges.indexOf(displayRange)) {
-                            classNames.push(assignedColors[indexOf])
-                        }
-                    })
-                    displayRange.forEach(date => {
-                        if (date.isSame(buttonDate, 'day')) {
-                            classNames.push('already-selected')
-
-
-                            if (displayRange[0].isSame(date)) {
-                                classNames.push('active-from-date')
-
-                            } else if (displayRange[displayRange.length - 1].isSame(date)) {
-                                classNames.push('active-until-date')
-                            }
+            const classNames = []
+                let active: boolean = false
+                let alreadySelected: string|undefined
+                let activeFromDate: boolean = false
+                let activeUntilDate: boolean = false
+                let otherMonth: boolean = false
+                let activeFromDateReverse: boolean = false
+                let inRange: boolean = false
+                let hover: boolean = false
+                let hoverPast: boolean = false
+                let hoverFuture: boolean = false
+
+            displayRanges.forEach(displayRange => {
+                displayRange.forEach(date => {
+                    if (date.isSame(buttonDate, 'day')) {
+                        classNames.push('already-selected')
+                        alreadySelected = 'red'
+                        if (displayRange[0].isSame(date)) {
+                            classNames.push('active-from-date')
+
+                        } else if (displayRange[displayRange.length - 1].isSame(date)) {
+                            classNames.push('active-until-date')
                         }
-                    })
-                })
-
-                if (!buttonDate.isSame(date, 'month')) {
-                    if (buttonDate.isBefore(date) && !showDaysPreviousMonth) {
-                        return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
                     }
+                })
+            })
 
-                    if (buttonDate.isAfter(date) && !showDaysNextMonth) {
-                        return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
-                    }
+            if (!buttonDate.isSame(date, 'month')) {
+                if (buttonDate.isBefore(date) && !showDaysPreviousMonth) {
+                    return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
+                }
 
-                    classNames.push('other-month')
+                if (buttonDate.isAfter(date) && !showDaysNextMonth) {
+                    return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
                 }
 
-                if (fromDate && buttonDate.isSame(fromDate, 'day')) {
-                    classNames.push('active')
-                    classNames.push('active-from-date')
+                classNames.push('other-month')
+                otherMonth = true
+            }
 
-                    if (!untilDate && hoverDate && hoverDate.isBefore(buttonDate, 'day')) {
-                        classNames.push('active-from-date-reverse')
-                    }
-                }
+            if (fromDate && buttonDate.isSame(fromDate, 'day')) {
+                classNames.push('active')
+                active = true
+                classNames.push('active-from-date')
 
-                if (untilDate && buttonDate.isSame(untilDate, 'day')) {
-                    classNames.push('active')
-                    classNames.push('active-until-date')
+                if (!untilDate && hoverDate && hoverDate.isBefore(buttonDate, 'day')) {
+                    classNames.push('active-from-date-reverse')
                 }
+            }
 
-                if (fromDate && untilDate && buttonDate.isBetween(fromDate, untilDate, 'day', '[]')) {
-                    classNames.push('in-range')
-                }
+            if (untilDate && buttonDate.isSame(untilDate, 'day')) {
+                classNames.push('active')
+                classNames.push('active-until-date')
+            }
 
-                if (
-                    fromDate
-                    && !untilDate
-                    && hoverDate
-                    && (
-                        buttonDate.isBetween(fromDate, hoverDate, 'day', '[]')
-                        || buttonDate.isBetween(hoverDate, fromDate, 'day', '[]')
-                    )
-                ) {
-                    classNames.push('hover-range')
-                }
+            if (fromDate && untilDate && buttonDate.isBetween(fromDate, untilDate, 'day', '[]')) {
+                classNames.push('in-range')
+            }
 
-                if (hoverDate && buttonDate.isSame(hoverDate, 'day')) {
-                    classNames.push('hover')
+            if (
+                fromDate
+                && ! untilDate
+                && hoverDate
+                && (
+                    buttonDate.isBetween(fromDate, hoverDate, 'day', '[]')
+                    || buttonDate.isBetween(hoverDate, fromDate, 'day', '[]')
+                )
+            ) {
+                classNames.push('hover-range')
+            }
 
-                    if (fromDate && !untilDate) {
-                        if (fromDate.isAfter(buttonDate, 'day')) {
-                            classNames.push('hover-past')
-                        }
+            if (hoverDate  && buttonDate.isSame(hoverDate, 'day')) {
+                classNames.push('hover')
 
-                        if (fromDate.isBefore(buttonDate, 'day')) {
-                            classNames.push('hover-future')
-                        }
+                if (fromDate && !untilDate) {
+                    if (fromDate.isAfter(buttonDate, 'day')) {
+                        classNames.push('hover-past')
+                    }
+
+                    if (fromDate.isBefore(buttonDate, 'day')) {
+                        classNames.push('hover-future')
                     }
                 }
+            }
 
-                return <button
-                    key={`day${buttonDate.format('YYYYMMDD')}`}
-                    className={classNames.join(' ')}
-                    onClick={
-                        () => {
-                            onDaySelected(buttonDate.clone())
-                        }
+            return <CalendarButton
+                key={`day${buttonDate.format('YYYYMMDD')}`}
+                onClick={
+                    () => {
+                        onDaySelected(buttonDate.clone())
                     }
-                    onMouseEnter={
-                        () => {
-                            onDayHover(buttonDate.clone())
-                        }
+                }
+                onMouseEnter={
+                    () => {
+                        onDayHover(buttonDate.clone())
                     }
-                    type={'button'}
-                >
-                    {buttonDate.format('D')}
-                </button>
-            }
-        )
+                }
+                type={'button'}
+                otherMonth={otherMonth}
+                active={active}
+                alreadySelected={alreadySelected}
+            >
+                {buttonDate.format('D')}
+            </CalendarButton>
+
+            /*<button
+                key={`day${buttonDate.format('YYYYMMDD')}`}
+                className={classNames.join(' ')}
+                onClick={
+                    () => {
+                        onDaySelected(buttonDate.clone())
+                    }
+                }
+                onMouseEnter={
+                    () => {
+                        onDayHover(buttonDate.clone())
+                    }
+                }
+                type={'button'}
+            >
+                {buttonDate.format('D')}
+            </button>*/
+        })
     }
 
     return <div className={'date-time-range-picker-month'}>
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index f73f0d5..662eb77 100644
--- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -50,14 +50,6 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
 
     displayRanges = [dummyDates1, dummyDates2, dummyDates3]
 
-    let assignedColors = []
-    displayRanges.forEach(displayRange => {
-        const allowedColors = ['red', 'green', 'yellow', 'orange', 'purple']
-        const randomIndex = Math.floor(Math.random() * (allowedColors.length))
-        const indexOf = displayRanges.indexOf(displayRange)
-        assignedColors[indexOf] = allowedColors[randomIndex]
-    })
-    console.log(assignedColors)
 
     const [currentFromDate, setCurrentFromDate] = useState<Moment | undefined>(fromDate ? fromDate.clone() : undefined)
     const [currentUntilDate, setCurrentUntilDate] = useState<Moment | undefined>(
@@ -102,7 +94,6 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
             ? <DatePicker
                 range={range}
                 displayRanges={displayRanges}
-                assignedColors={assignedColors}
                 months={months}
                 fromDate={currentFromDate}
                 untilDate={currentUntilDate}

From 2635786a474f94dd9f1b85f194019e3e84f53243 Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Thu, 25 Mar 2021 16:04:27 +0100
Subject: [PATCH 07/13] Revert "alot of changes, idk if this is da way"

This reverts commit c03c96b6e3926a2dc81feea1f7de4695a1d5fcb3.
---
 package-lock.json                             | 139 ++-------------
 package.json                                  |   6 +-
 .../DatePicker/Month/Month.tsx                |  40 +----
 .../DatePicker/Month/style.ts                 | 168 ------------------
 4 files changed, 23 insertions(+), 330 deletions(-)
 delete mode 100644 src/DateTimeRangePicker/DatePicker/Month/style.ts

diff --git a/package-lock.json b/package-lock.json
index 3752d34..37fdaad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@optios/react-date-time-range-picker",
-  "version": "0.1.2",
+  "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1271,6 +1271,7 @@
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
       "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "dev": true,
       "requires": {
         "@emotion/memoize": "0.7.4"
       }
@@ -1278,7 +1279,8 @@
     "@emotion/memoize": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "dev": true
     },
     "@emotion/serialize": {
       "version": "0.11.16",
@@ -1332,12 +1334,14 @@
     "@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
+      "dev": true
     },
     "@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "dev": true
     },
     "@emotion/utils": {
       "version": "0.11.3",
@@ -5089,16 +5093,6 @@
       "integrity": "sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==",
       "dev": true
     },
-    "@types/hoist-non-react-statics": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
-      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0"
-      }
-    },
     "@types/html-minifier-terser": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz",
@@ -5332,17 +5326,6 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
       "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
     },
-    "@types/styled-components": {
-      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.9.tgz",
-      "integrity": "sha512-kbEG6YlwK8rucITpKEr6pA4Ho9KSQHUUOzZ9lY3va1mtcjvS3D0wDciFyHEiNHKLL/npZCKDQJqm0x44sPO9oA==",
-      "dev": true,
-      "requires": {
-        "@types/hoist-non-react-statics": "*",
-        "@types/react": "*",
-        "csstype": "^3.0.2"
-      }
-    },
     "@types/tapable": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz",
@@ -6411,11 +6394,7 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
+          "optional": true
         },
         "glob-parent": {
           "version": "2.0.0",
@@ -7318,21 +7297,11 @@
         "recast": "^0.14.7"
       }
     },
-    "babel-plugin-styled-components": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
-      "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.0.0",
-        "@babel/helper-module-imports": "^7.0.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "lodash": "^4.17.11"
-      }
-    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
+      "dev": true
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
@@ -7939,15 +7908,6 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
     },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "optional": true,
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -8387,11 +8347,6 @@
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
       "dev": true
     },
-    "camelize": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
-    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -9155,11 +9110,6 @@
         "postcss": "^7.0.5"
       }
     },
-    "css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
-    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -9250,16 +9200,6 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
-    "css-to-react-native": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
-      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
-      "requires": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -11288,12 +11228,6 @@
         }
       }
     },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "optional": true
-    },
     "filelist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.1.tgz",
@@ -12190,6 +12124,7 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
       "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dev": true,
       "requires": {
         "react-is": "^16.7.0"
       }
@@ -14786,11 +14721,7 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
+          "optional": true
         }
       }
     },
@@ -16137,12 +16068,6 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
-    "nan": {
-      "version": "2.14.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
-      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
-      "optional": true
-    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -19813,11 +19738,7 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
+          "optional": true
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -20430,7 +20351,8 @@
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "dev": true
     },
     "shebang-command": {
       "version": "1.2.0",
@@ -21209,23 +21131,6 @@
         "inline-style-parser": "0.1.1"
       }
     },
-    "styled-components": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
-      "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/traverse": "^7.4.5",
-        "@emotion/is-prop-valid": "^0.8.8",
-        "@emotion/stylis": "^0.8.4",
-        "@emotion/unitless": "^0.7.4",
-        "babel-plugin-styled-components": ">= 1",
-        "css-to-react-native": "^3.0.0",
-        "hoist-non-react-statics": "^3.0.0",
-        "shallowequal": "^1.1.0",
-        "supports-color": "^5.5.0"
-      }
-    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -22553,11 +22458,7 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
+          "optional": true
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -22844,11 +22745,7 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
+          "optional": true
         },
         "glob-parent": {
           "version": "3.1.0",
diff --git a/package.json b/package.json
index d815582..98aa2d1 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3",
     "sass": "^1.26.10",
-    "styled-components": "^5.2.1",
     "tslint": "^6.1.3",
     "typescript": "~3.7.2"
   },
@@ -70,19 +69,18 @@
     "@storybook/node-logger": "^6.0.18",
     "@storybook/preset-create-react-app": "^3.1.4",
     "@storybook/react": "^6.0.18",
-    "@types/styled-components": "^5.1.9",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-runtime": "^6.26.0",
-    "jest": "^25.1.0",
     "lodash": "^4.17.20",
     "react-is": "^16.13.1",
     "rollup": "^2.26.6",
     "rollup-plugin-peer-deps-external": "^2.2.3",
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-typescript2": "^0.27.2",
-    "ts-jest": "^25.2.1"
+    "ts-jest": "^25.2.1",
+    "jest": "^25.1.0"
   },
   "repository": {
     "type": "git",
diff --git a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
index f3b4acb..4fbeb35 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
+++ b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
@@ -1,8 +1,7 @@
-import React, {ReactElement} from 'react'
+import React, {ReactElement, useState} from 'react'
 import moment, {Moment} from 'moment'
 
 import IProps from './IProps'
-import {CalendarButton} from './style'
 
 const Month: React.FunctionComponent<IProps> = (
     {
@@ -31,22 +30,11 @@ const Month: React.FunctionComponent<IProps> = (
 
         return dates.map((buttonDate: Moment) => {
             const classNames = []
-                let active: boolean = false
-                let alreadySelected: string|undefined
-                let activeFromDate: boolean = false
-                let activeUntilDate: boolean = false
-                let otherMonth: boolean = false
-                let activeFromDateReverse: boolean = false
-                let inRange: boolean = false
-                let hover: boolean = false
-                let hoverPast: boolean = false
-                let hoverFuture: boolean = false
 
             displayRanges.forEach(displayRange => {
                 displayRange.forEach(date => {
                     if (date.isSame(buttonDate, 'day')) {
                         classNames.push('already-selected')
-                        alreadySelected = 'red'
                         if (displayRange[0].isSame(date)) {
                             classNames.push('active-from-date')
 
@@ -67,12 +55,10 @@ const Month: React.FunctionComponent<IProps> = (
                 }
 
                 classNames.push('other-month')
-                otherMonth = true
             }
 
             if (fromDate && buttonDate.isSame(fromDate, 'day')) {
                 classNames.push('active')
-                active = true
                 classNames.push('active-from-date')
 
                 if (!untilDate && hoverDate && hoverDate.isBefore(buttonDate, 'day')) {
@@ -115,27 +101,7 @@ const Month: React.FunctionComponent<IProps> = (
                 }
             }
 
-            return <CalendarButton
-                key={`day${buttonDate.format('YYYYMMDD')}`}
-                onClick={
-                    () => {
-                        onDaySelected(buttonDate.clone())
-                    }
-                }
-                onMouseEnter={
-                    () => {
-                        onDayHover(buttonDate.clone())
-                    }
-                }
-                type={'button'}
-                otherMonth={otherMonth}
-                active={active}
-                alreadySelected={alreadySelected}
-            >
-                {buttonDate.format('D')}
-            </CalendarButton>
-
-            /*<button
+            return <button
                 key={`day${buttonDate.format('YYYYMMDD')}`}
                 className={classNames.join(' ')}
                 onClick={
@@ -151,7 +117,7 @@ const Month: React.FunctionComponent<IProps> = (
                 type={'button'}
             >
                 {buttonDate.format('D')}
-            </button>*/
+            </button>
         })
     }
 
diff --git a/src/DateTimeRangePicker/DatePicker/Month/style.ts b/src/DateTimeRangePicker/DatePicker/Month/style.ts
deleted file mode 100644
index 4612ae7..0000000
--- a/src/DateTimeRangePicker/DatePicker/Month/style.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import styled from 'styled-components'
-
-const colorHighlight = '#428be3'
-const colorBackgroundDay = 'rgba(black, .1)'
-const colorOtherMonth = 'rgba(black, .4)'
-const colorDisabled = 'rgba(black, .4)'
-const colorAlreadySelected = 'rgba(red, .4)'
-
-
-export const CalendarButton = styled.button<{
-    active?: boolean,
-    alreadySelected?: string,
-    activeFromDate?: boolean,
-    activeUntilDate?: boolean,
-    otherMonth?: boolean,
-    activeFromDateReverse?: boolean,
-    inRange?: boolean,
-    hover?: boolean,
-    hoverPast?: boolean,
-    hoverFuture?: boolean
-}>`
-  width: 2.1em;
-  height: 2.1em;
-  background-color: ${colorBackgroundDay};
-  border-radius: 1.5em;
-  margin: .3em;
-  cursor: pointer;
-  box-sizing: content-box;
-  color: ${({otherMonth}) => otherMonth ? colorOtherMonth : 'inherit'};
-  background-color: ${({active, alreadySelected}) => active
-    ? (alreadySelected ? alreadySelected : colorHighlight)
-    : (alreadySelected ? alreadySelected : 'inherit')};
-  &:hover:not(.disabled),
-  &.hover:not(.disabled) {
-    background-color: rgba(${colorHighlight}, .8);
-    color: white;
-  }
-
-
-`
-
-export const CalendarButton2 = styled.button`
-        > button {
-          width: 2.1em;
-          height: 2.1em;
-          background-color: ${colorBackgroundDay};
-          border-radius: 1.5em;
-          margin: .3em;
-          cursor: pointer;
-          box-sizing: content-box;
-
-          &:hover:not(.disabled),
-          &.hover:not(.disabled) {
-            background-color: rgba(${colorHighlight}, .8);
-            color: white;
-          }
-
-          &.other-month {
-            color: ${colorOtherMonth};
-          }
-
-          &.active {
-            background-color: $color-highlight;
-            color: white;
-          }
-
-          &.already-selected {
-            background-color: $color-already-selected;
-            margin: .3em 0;
-            padding: 0 .3em;
-            border-radius: 0;
-
-            &.active-from-date:not(.active-from-date-reverse) {
-              border-top-left-radius: 1.5em;
-              border-bottom-left-radius: 1.5em;
-              margin-left: .3em;
-              padding-left: 0;
-            }
-
-            &.active-until-date {
-              border-top-right-radius: 1.5em;
-              border-bottom-right-radius: 1.5em;
-              margin-right: .3em;
-              padding-right: 0;
-            }
-
-            &.active {
-              background-color: $color-already-selected;
-            }
-          }
-
-          &.in-range {
-            background-color: rgba($color-highlight, .5);
-            margin: .3em 0;
-            padding: 0 .3em;
-            border-radius: 0;
-
-            &.active-from-date:not(.active-from-date-reverse) {
-              border-top-left-radius: 1.5em;
-              border-bottom-left-radius: 1.5em;
-              margin-left: .3em;
-              padding-left: 0;
-            }
-
-            &.active-until-date {
-              border-top-right-radius: 1.5em;
-              border-bottom-right-radius: 1.5em;
-              margin-right: .3em;
-              padding-right: 0;
-            }
-
-            &.active {
-              background-color: $color-highlight;
-            }
-          }
-
-          &.hover-range:not(.in-range) {
-            background-color: rgba($color-highlight, .5);
-            margin: .3em 0;
-            padding: 0 .3em;
-            border-radius: 0;
-
-            &.active-from-date:not(.active-from-date-reverse) {
-              border-top-left-radius: 1.5em;
-              border-bottom-left-radius: 1.5em;
-              margin-left: .3em;
-              padding-left: 0;
-
-              &.hover {
-                border-radius: 1.5em;
-                padding-right: 0;
-                margin-right: .3em;
-              }
-            }
-
-            &.active-from-date-reverse {
-              border-top-right-radius: 1.5em;
-              border-bottom-right-radius: 1.5em;
-              margin-right: .3em;
-              padding-right: 0;
-            }
-
-            &.hover-past {
-              border-top-left-radius: 1.5em;
-              border-bottom-left-radius: 1.5em;
-              padding-left: 0;
-              margin-left: .3em;
-            }
-
-            &.hover-future {
-              border-top-right-radius: 1.5em;
-              border-bottom-right-radius: 1.5em;
-              padding-right: 0;
-              margin-right: .3em;
-            }
-
-            &.active {
-              background-color: $color-highlight;
-            }
-          }
-
-          &.disabled {
-            color: $color-disabled;
-            cursor: default;
-          }
-        }
-
-`

From dfa5616bfcb246c9a86563ed9938730879803a35 Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Thu, 25 Mar 2021 16:20:56 +0100
Subject: [PATCH 08/13] Remove dummydata

---
 .../DateTimeRangePicker.tsx                   | 30 -------------------
 1 file changed, 30 deletions(-)

diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index 662eb77..1141d8e 100644
--- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -21,36 +21,6 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         onChange
     }
 ) => {
-
-    // dummyData
-    const startDate1 = moment()
-    const endDate1 = startDate1.clone().add(7, 'days')
-
-    const startDate2 = startDate1.clone().day(-14)
-    const endDate2 = startDate2.clone().add(2, 'days')
-
-    const startDate3 = startDate1.clone().set('year', 2021).set('month', 3).set('date', 10)
-    const endDate3 = startDate3.clone().add(40, 'days')
-
-    const dummyDates1 = []
-    const dummyDates2 = []
-    const dummyDates3 = []
-    while (startDate1.isBefore(endDate1)) {
-        dummyDates1.push(startDate1.clone())
-        startDate1.add(1, 'day')
-    }
-    while (startDate2.isBefore(endDate2)) {
-        dummyDates2.push(startDate2.clone())
-        startDate2.add(1, 'day')
-    }
-    while (startDate3.isBefore(endDate3)) {
-        dummyDates3.push(startDate3.clone())
-        startDate3.add(1, 'day')
-    }
-
-    displayRanges = [dummyDates1, dummyDates2, dummyDates3]
-
-
     const [currentFromDate, setCurrentFromDate] = useState<Moment | undefined>(fromDate ? fromDate.clone() : undefined)
     const [currentUntilDate, setCurrentUntilDate] = useState<Moment | undefined>(
         untilDate ? untilDate.clone() : undefined

From 81a8731b99bf90310332e2b395d881cb1eb843d3 Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Thu, 25 Mar 2021 16:33:20 +0100
Subject: [PATCH 09/13] Some cleanup

---
 src/DateTimeRangePicker/DatePicker/IProps.ts  |  3 +-
 .../DatePicker/Month/IProps.ts                |  1 +
 .../DatePicker/Month/Month.tsx                | 30 ++++++++++---------
 .../DateTimeRangePicker.tsx                   | 14 ++++-----
 src/DateTimeRangePicker/IProps.ts             |  1 +
 .../__tests__/DateTimeRangePicker.test.tsx    |  1 +
 6 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/DateTimeRangePicker/DatePicker/IProps.ts b/src/DateTimeRangePicker/DatePicker/IProps.ts
index 54c5e2d..a02bfbd 100644
--- a/src/DateTimeRangePicker/DatePicker/IProps.ts
+++ b/src/DateTimeRangePicker/DatePicker/IProps.ts
@@ -6,7 +6,8 @@ interface IProps {
     untilDate?: moment.Moment,
     months: number,
     onFromDateChanged: (date: Moment | undefined) => void
-    onUntilDateChanged: (date: Moment | undefined) => void
+    onUntilDateChanged: (date: Moment | undefined) => void,
+    displayRanges: []
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/DatePicker/Month/IProps.ts b/src/DateTimeRangePicker/DatePicker/Month/IProps.ts
index d6a747e..411ccd2 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/IProps.ts
+++ b/src/DateTimeRangePicker/DatePicker/Month/IProps.ts
@@ -10,6 +10,7 @@ interface IProps {
     showDaysNextMonth: boolean,
     onDaySelected: (date: Moment) => void,
     onDayHover: (date?: Moment | undefined) => void
+    displayRanges: []
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
index 4fbeb35..24925f9 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
+++ b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
@@ -11,7 +11,7 @@ const Month: React.FunctionComponent<IProps> = (
         fromDate,
         untilDate,
         hoverDate,
-        showDaysPreviousMonth ,
+        showDaysPreviousMonth,
         showDaysNextMonth,
         onDaySelected,
         onDayHover
@@ -31,19 +31,21 @@ const Month: React.FunctionComponent<IProps> = (
         return dates.map((buttonDate: Moment) => {
             const classNames = []
 
-            displayRanges.forEach(displayRange => {
-                displayRange.forEach(date => {
-                    if (date.isSame(buttonDate, 'day')) {
-                        classNames.push('already-selected')
-                        if (displayRange[0].isSame(date)) {
-                            classNames.push('active-from-date')
-
-                        } else if (displayRange[displayRange.length - 1].isSame(date)) {
-                            classNames.push('active-until-date')
+            if (displayRanges.length > 0) {
+                displayRanges.forEach((displayRange: Moment[]) => {
+                    displayRange.forEach((displayRangeDate: Moment) => {
+                        if (displayRangeDate.isSame(buttonDate, 'day')) {
+                            classNames.push('already-selected')
+                            if (displayRange[0].isSame(displayRangeDate)) {
+                                classNames.push('active-from-date')
+
+                            } else if (displayRange[displayRange.length - 1].isSame(displayRangeDate)) {
+                                classNames.push('active-until-date')
+                            }
                         }
-                    }
+                    })
                 })
-            })
+            }
 
             if (!buttonDate.isSame(date, 'month')) {
                 if (buttonDate.isBefore(date) && !showDaysPreviousMonth) {
@@ -77,7 +79,7 @@ const Month: React.FunctionComponent<IProps> = (
 
             if (
                 fromDate
-                && ! untilDate
+                && !untilDate
                 && hoverDate
                 && (
                     buttonDate.isBetween(fromDate, hoverDate, 'day', '[]')
@@ -87,7 +89,7 @@ const Month: React.FunctionComponent<IProps> = (
                 classNames.push('hover-range')
             }
 
-            if (hoverDate  && buttonDate.isSame(hoverDate, 'day')) {
+            if (hoverDate && buttonDate.isSame(hoverDate, 'day')) {
                 classNames.push('hover')
 
                 if (fromDate && !untilDate) {
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index 1141d8e..2c48cca 100644
--- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -1,12 +1,11 @@
 import React, {useEffect, useState} from 'react'
-import moment, {Moment} from 'moment'
+import {Moment} from 'moment'
 
 import './DateTimeRangePicker.scss'
 import IProps from './IProps'
 import TimePicker from './TimePicker/TimePicker'
 import DatePicker from './DatePicker/DatePicker'
 import Utils from './Utils'
-import {Simulate} from 'react-dom/test-utils'
 
 const DateTimeRangePicker: React.FunctionComponent<IProps> = (
     {
@@ -33,23 +32,23 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
 
     useEffect(
         () => {
-            if (! isMounted) {
+            if (!isMounted) {
                 setIsMounted(true)
 
                 return
             }
 
-            if (! onChange) {
+            if (!onChange) {
                 return
             }
 
             const newFromDate = Utils.getDateTime(date, time, currentFromDate, currentFromTime)
-            if (! newFromDate) {
+            if (!newFromDate) {
                 return
             }
 
             const newUntilDate = Utils.getDateTime(date, time, currentUntilDate, currentUntilTime)
-            if (! newUntilDate) {
+            if (!newUntilDate) {
                 onChange(newFromDate, newFromDate)
                 return
             }
@@ -58,7 +57,6 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         [currentFromDate, currentFromTime, currentUntilDate, currentUntilTime]
     )
 
-    // return <p>test</p>
     return <div className={'date-time-range-picker'}>
         {date
             ? <DatePicker
@@ -92,7 +90,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
                             onTimeChanged={
                                 (changedTime: Moment) => {
                                     setCurrentFromTime(changedTime)
-                                    if (! range) {
+                                    if (!range) {
                                         setCurrentUntilTime(changedTime)
                                     }
                                 }
diff --git a/src/DateTimeRangePicker/IProps.ts b/src/DateTimeRangePicker/IProps.ts
index 2dbd86e..22e74be 100644
--- a/src/DateTimeRangePicker/IProps.ts
+++ b/src/DateTimeRangePicker/IProps.ts
@@ -9,6 +9,7 @@ interface IProps {
     untilDate?: Moment,
     months?: number,
     onChange?: (fromDateTime: Moment, untilDateTime?: Moment) => void
+    displayRanges?: []
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/__tests__/DateTimeRangePicker.test.tsx b/src/DateTimeRangePicker/__tests__/DateTimeRangePicker.test.tsx
index 6b4c3d2..8d2c4d2 100644
--- a/src/DateTimeRangePicker/__tests__/DateTimeRangePicker.test.tsx
+++ b/src/DateTimeRangePicker/__tests__/DateTimeRangePicker.test.tsx
@@ -14,6 +14,7 @@ describe('DateTimeRangePicker', () => {
                 time={false}
                 inline={true}
                 months={2}
+                displayRanges={[]}
             />
         )
 

From a373e19a113af04feacda4a98f153cfcebf65a59 Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Thu, 25 Mar 2021 16:33:20 +0100
Subject: [PATCH 10/13] Some cleanup

---
 src/DateTimeRangePicker/DatePicker/IProps.ts  |  3 +-
 .../DatePicker/Month/IProps.ts                |  1 +
 .../DatePicker/Month/Month.tsx                | 30 ++++++++++---------
 .../DatePicker/Month/__tests__/Month.test.tsx |  5 ++++
 .../DateTimeRangePicker.tsx                   | 14 ++++-----
 src/DateTimeRangePicker/IProps.ts             |  1 +
 .../__tests__/DateTimeRangePicker.test.tsx    |  1 +
 .../DateTimeRangePicker.test.tsx.snap         |  1 +
 8 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/DateTimeRangePicker/DatePicker/IProps.ts b/src/DateTimeRangePicker/DatePicker/IProps.ts
index 54c5e2d..a02bfbd 100644
--- a/src/DateTimeRangePicker/DatePicker/IProps.ts
+++ b/src/DateTimeRangePicker/DatePicker/IProps.ts
@@ -6,7 +6,8 @@ interface IProps {
     untilDate?: moment.Moment,
     months: number,
     onFromDateChanged: (date: Moment | undefined) => void
-    onUntilDateChanged: (date: Moment | undefined) => void
+    onUntilDateChanged: (date: Moment | undefined) => void,
+    displayRanges: []
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/DatePicker/Month/IProps.ts b/src/DateTimeRangePicker/DatePicker/Month/IProps.ts
index d6a747e..411ccd2 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/IProps.ts
+++ b/src/DateTimeRangePicker/DatePicker/Month/IProps.ts
@@ -10,6 +10,7 @@ interface IProps {
     showDaysNextMonth: boolean,
     onDaySelected: (date: Moment) => void,
     onDayHover: (date?: Moment | undefined) => void
+    displayRanges: []
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
index 4fbeb35..24925f9 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
+++ b/src/DateTimeRangePicker/DatePicker/Month/Month.tsx
@@ -11,7 +11,7 @@ const Month: React.FunctionComponent<IProps> = (
         fromDate,
         untilDate,
         hoverDate,
-        showDaysPreviousMonth ,
+        showDaysPreviousMonth,
         showDaysNextMonth,
         onDaySelected,
         onDayHover
@@ -31,19 +31,21 @@ const Month: React.FunctionComponent<IProps> = (
         return dates.map((buttonDate: Moment) => {
             const classNames = []
 
-            displayRanges.forEach(displayRange => {
-                displayRange.forEach(date => {
-                    if (date.isSame(buttonDate, 'day')) {
-                        classNames.push('already-selected')
-                        if (displayRange[0].isSame(date)) {
-                            classNames.push('active-from-date')
-
-                        } else if (displayRange[displayRange.length - 1].isSame(date)) {
-                            classNames.push('active-until-date')
+            if (displayRanges.length > 0) {
+                displayRanges.forEach((displayRange: Moment[]) => {
+                    displayRange.forEach((displayRangeDate: Moment) => {
+                        if (displayRangeDate.isSame(buttonDate, 'day')) {
+                            classNames.push('already-selected')
+                            if (displayRange[0].isSame(displayRangeDate)) {
+                                classNames.push('active-from-date')
+
+                            } else if (displayRange[displayRange.length - 1].isSame(displayRangeDate)) {
+                                classNames.push('active-until-date')
+                            }
                         }
-                    }
+                    })
                 })
-            })
+            }
 
             if (!buttonDate.isSame(date, 'month')) {
                 if (buttonDate.isBefore(date) && !showDaysPreviousMonth) {
@@ -77,7 +79,7 @@ const Month: React.FunctionComponent<IProps> = (
 
             if (
                 fromDate
-                && ! untilDate
+                && !untilDate
                 && hoverDate
                 && (
                     buttonDate.isBetween(fromDate, hoverDate, 'day', '[]')
@@ -87,7 +89,7 @@ const Month: React.FunctionComponent<IProps> = (
                 classNames.push('hover-range')
             }
 
-            if (hoverDate  && buttonDate.isSame(hoverDate, 'day')) {
+            if (hoverDate && buttonDate.isSame(hoverDate, 'day')) {
                 classNames.push('hover')
 
                 if (fromDate && !untilDate) {
diff --git a/src/DateTimeRangePicker/DatePicker/Month/__tests__/Month.test.tsx b/src/DateTimeRangePicker/DatePicker/Month/__tests__/Month.test.tsx
index 5c5406c..da9f4c5 100644
--- a/src/DateTimeRangePicker/DatePicker/Month/__tests__/Month.test.tsx
+++ b/src/DateTimeRangePicker/DatePicker/Month/__tests__/Month.test.tsx
@@ -14,6 +14,7 @@ describe('Date/time range picker month', () => {
                 showDaysNextMonth={true}
                 onDaySelected={() => undefined}
                 onDayHover={() => undefined}
+                displayRanges={[]}
             />
         )
 
@@ -31,6 +32,7 @@ describe('Date/time range picker month', () => {
                 showDaysNextMonth={true}
                 onDaySelected={onDaySelectedMock}
                 onDayHover={() => undefined}
+                displayRanges={[]}
             />
         )
 
@@ -50,6 +52,7 @@ describe('Date/time range picker month', () => {
                 showDaysNextMonth={true}
                 onDaySelected={() => undefined}
                 onDayHover={onHoverMock}
+                displayRanges={[]}
             />
         )
 
@@ -69,6 +72,7 @@ describe('Date/time range picker month', () => {
                 hoverDate={moment('2020-05-10')}
                 onDaySelected={() => undefined}
                 onDayHover={() => undefined}
+                displayRanges={[]}
             />
         )
 
@@ -86,6 +90,7 @@ describe('Date/time range picker month', () => {
                 untilDate={moment('2020-05-15')}
                 onDaySelected={() => undefined}
                 onDayHover={() => undefined}
+                displayRanges={[]}
             />
         )
 
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index 1141d8e..2c48cca 100644
--- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -1,12 +1,11 @@
 import React, {useEffect, useState} from 'react'
-import moment, {Moment} from 'moment'
+import {Moment} from 'moment'
 
 import './DateTimeRangePicker.scss'
 import IProps from './IProps'
 import TimePicker from './TimePicker/TimePicker'
 import DatePicker from './DatePicker/DatePicker'
 import Utils from './Utils'
-import {Simulate} from 'react-dom/test-utils'
 
 const DateTimeRangePicker: React.FunctionComponent<IProps> = (
     {
@@ -33,23 +32,23 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
 
     useEffect(
         () => {
-            if (! isMounted) {
+            if (!isMounted) {
                 setIsMounted(true)
 
                 return
             }
 
-            if (! onChange) {
+            if (!onChange) {
                 return
             }
 
             const newFromDate = Utils.getDateTime(date, time, currentFromDate, currentFromTime)
-            if (! newFromDate) {
+            if (!newFromDate) {
                 return
             }
 
             const newUntilDate = Utils.getDateTime(date, time, currentUntilDate, currentUntilTime)
-            if (! newUntilDate) {
+            if (!newUntilDate) {
                 onChange(newFromDate, newFromDate)
                 return
             }
@@ -58,7 +57,6 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         [currentFromDate, currentFromTime, currentUntilDate, currentUntilTime]
     )
 
-    // return <p>test</p>
     return <div className={'date-time-range-picker'}>
         {date
             ? <DatePicker
@@ -92,7 +90,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
                             onTimeChanged={
                                 (changedTime: Moment) => {
                                     setCurrentFromTime(changedTime)
-                                    if (! range) {
+                                    if (!range) {
                                         setCurrentUntilTime(changedTime)
                                     }
                                 }
diff --git a/src/DateTimeRangePicker/IProps.ts b/src/DateTimeRangePicker/IProps.ts
index 2dbd86e..22e74be 100644
--- a/src/DateTimeRangePicker/IProps.ts
+++ b/src/DateTimeRangePicker/IProps.ts
@@ -9,6 +9,7 @@ interface IProps {
     untilDate?: Moment,
     months?: number,
     onChange?: (fromDateTime: Moment, untilDateTime?: Moment) => void
+    displayRanges?: []
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/__tests__/DateTimeRangePicker.test.tsx b/src/DateTimeRangePicker/__tests__/DateTimeRangePicker.test.tsx
index 6b4c3d2..8d2c4d2 100644
--- a/src/DateTimeRangePicker/__tests__/DateTimeRangePicker.test.tsx
+++ b/src/DateTimeRangePicker/__tests__/DateTimeRangePicker.test.tsx
@@ -14,6 +14,7 @@ describe('DateTimeRangePicker', () => {
                 time={false}
                 inline={true}
                 months={2}
+                displayRanges={[]}
             />
         )
 
diff --git a/src/DateTimeRangePicker/__tests__/__snapshots__/DateTimeRangePicker.test.tsx.snap b/src/DateTimeRangePicker/__tests__/__snapshots__/DateTimeRangePicker.test.tsx.snap
index bd7974f..a0cf4be 100644
--- a/src/DateTimeRangePicker/__tests__/__snapshots__/DateTimeRangePicker.test.tsx.snap
+++ b/src/DateTimeRangePicker/__tests__/__snapshots__/DateTimeRangePicker.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`DateTimeRangePicker should render correctly 1`] = `
   className="date-time-range-picker"
 >
   <DatePicker
+    displayRanges={Array []}
     fromDate={"2019-10-15T18:23:15.000Z"}
     months={2}
     onFromDateChanged={[Function]}

From 52ee53cbf772f44bcfef655356565cb48479a8fa Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Wed, 31 Mar 2021 11:04:54 +0200
Subject: [PATCH 11/13] Update docs

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 569c983..b67e9b4 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,7 @@ Example with property Range enabled
 | `untilDate` | `Moment`        |  set a date to where the user can select to                |
 | `months`         | `number`        | the number of months you want to show default: 1                                                      |
 | `onChange`        | `function`           | pass a custom function to handle the changes detected in the calendar : (fromDate, untilDate) => console.log(fromDate, untilDate)                                                     |
+| `displayRanges`        | `array`           | pass an array of arrays. Each of those arrays are a range, consisting of a from date and until date. These only display
 
 ## Contributing
 Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
@@ -46,4 +47,4 @@ Pull requests are welcome. For major changes, please open an issue first to disc
 Please make sure to update tests as appropriate.
 
 ## License
-[GPL-3.0-or-later](https://choosealicense.com/licenses/gpl-3.0/)
\ No newline at end of file
+[GPL-3.0-or-later](https://choosealicense.com/licenses/gpl-3.0/)

From 6725fbf6d21ab36885e3ce3cf9362fce720ab682 Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Tue, 6 Apr 2021 12:02:23 +0200
Subject: [PATCH 12/13] WIP: hardcoded working example of fixed/disabled date
 and time pickers

---
 .../DateTimeRangePicker.tsx                   | 61 ++++++++++---------
 .../TimePicker/TimePicker.tsx                 | 10 +--
 2 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index 2c48cca..67ebb7f 100644
--- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react'
-import {Moment} from 'moment'
+import moment, {Moment} from 'moment'
 
 import './DateTimeRangePicker.scss'
 import IProps from './IProps'
@@ -14,10 +14,11 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         displayRanges = [],
         time = false,
         inline = true,
-        fromDate,
-        untilDate,
+        fromDate= moment(),
+        untilDate = moment().set('date', 19),
         months = 1,
-        onChange
+        onChange,
+        isDisabled = true
     }
 ) => {
     const [currentFromDate, setCurrentFromDate] = useState<Moment | undefined>(fromDate ? fromDate.clone() : undefined)
@@ -58,43 +59,44 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
     )
 
     return <div className={'date-time-range-picker'}>
-        {date
+        {date && true === isDisabled
             ? <DatePicker
                 range={range}
                 displayRanges={displayRanges}
                 months={months}
                 fromDate={currentFromDate}
                 untilDate={currentUntilDate}
-                onFromDateChanged={
-                    (changedDate: Moment | undefined) => {
-                        setCurrentFromDate(changedDate)
-                    }
-                }
-                onUntilDateChanged={
-                    (changedDate: Moment | undefined) => {
-                        setCurrentUntilDate(changedDate)
-                    }
-                }
+                // onFromDateChanged={
+                //     (changedDate: Moment | undefined) => {
+                //         setCurrentFromDate(changedDate)
+                //     }
+                // }
+                // onUntilDateChanged={
+                //     (changedDate: Moment | undefined) => {
+                //         setCurrentUntilDate(changedDate)
+                //     }
+                // }
             />
             : null
         }
 
         {
-            time
+            time && true === isDisabled
                 ? <div className={'date-time-range-picker-times'}>
                     <div>
                         <label>{range ? 'From' : 'Time'}</label>
                         <TimePicker
                             step={15}
                             time={currentFromTime}
-                            onTimeChanged={
-                                (changedTime: Moment) => {
-                                    setCurrentFromTime(changedTime)
-                                    if (!range) {
-                                        setCurrentUntilTime(changedTime)
-                                    }
-                                }
-                            }
+                            // onTimeChanged={
+                            //     (changedTime: Moment) => {
+                            //         setCurrentFromTime(changedTime)
+                            //         if (!range) {
+                            //             setCurrentUntilTime(changedTime)
+                            //         }
+                            //     }
+                            // }
+                            isDisabled={isDisabled}
                         />
                     </div>
                     {
@@ -104,11 +106,12 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
                                 <TimePicker
                                     step={15}
                                     time={currentUntilTime}
-                                    onTimeChanged={
-                                        (changedTime: Moment) => {
-                                            setCurrentUntilTime(changedTime)
-                                        }
-                                    }
+                                    // onTimeChanged={
+                                    //     (changedTime: Moment) => {
+                                    //         setCurrentUntilTime(changedTime)
+                                    //     }
+                                    // }
+                                    isDisabled={isDisabled}
                                 />
                             </div>
                             : null
diff --git a/src/DateTimeRangePicker/TimePicker/TimePicker.tsx b/src/DateTimeRangePicker/TimePicker/TimePicker.tsx
index 09c38ec..1cf7ea0 100644
--- a/src/DateTimeRangePicker/TimePicker/TimePicker.tsx
+++ b/src/DateTimeRangePicker/TimePicker/TimePicker.tsx
@@ -5,7 +5,7 @@ import moment from 'moment'
 import IProps from './IProps'
 import './TimePicker.scss'
 
-const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time}) => {
+const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time, isDisabled}) => {
     const [currentValue, setCurrentValue] = useState<string | undefined>(time ? time.format('HH:mm') : undefined)
     const [isOpen, setIsOpen] = useState<boolean>(false)
     const dropdownRef = useRef<HTMLDivElement | any>()
@@ -76,9 +76,9 @@ const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time}
     return <div className={`time-picker ${isOpen ? 'open' : null}`}>
         <Cleave options={{time: true, timePattern: ['h', 'm']}}
                 placeholder={'00:00'}
-                onChange={onChange}
-                onFocus={() => setIsOpen(true)}
-                onBlur={onBlur}
+                // onChange={onChange}
+                // onFocus={() => setIsOpen(true)}
+                // onBlur={onBlur}
                 value={currentValue}
                 className={'time-picker-input'}
                 onKeyDown={
@@ -96,7 +96,7 @@ const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time}
                     return <div key={`timeValue${index}`}
                                 className={isActive(timeValue) ? 'active' : undefined}
                                 ref={isActive(timeValue) ? activeDropdownRef : undefined}
-                                onClick={() => onSelect(timeValue)}
+                                // onClick={() => onSelect(timeValue)}
                     >
                         {timeValue}
                     </div>

From 4ee8245b48f1dba2c174551a8ddc2701a770032d Mon Sep 17 00:00:00 2001
From: De Clercq Jan <declercqjan@Des-MacBook-Pro.local>
Date: Tue, 6 Apr 2021 13:12:30 +0200
Subject: [PATCH 13/13] Make it more elegant + fix test

---
 .../DatePicker/DatePicker.tsx                 | 15 +++-
 src/DateTimeRangePicker/DatePicker/IProps.ts  |  3 +-
 .../DateTimeRangePicker.tsx                   | 59 +++++++-------
 src/DateTimeRangePicker/IProps.ts             |  3 +-
 src/DateTimeRangePicker/TimePicker/IProps.ts  |  3 +-
 .../TimePicker/TimePicker.tsx                 | 81 ++++++++++++-------
 .../TimePicker/__tests__/TimePicker.test.tsx  |  8 +-
 .../DateTimeRangePicker.test.tsx.snap         | 17 ----
 8 files changed, 101 insertions(+), 88 deletions(-)
 delete mode 100644 src/DateTimeRangePicker/__tests__/__snapshots__/DateTimeRangePicker.test.tsx.snap

diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
index 866c0b9..9e5ca7b 100644
--- a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
+++ b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
@@ -14,7 +14,8 @@ const DatePicker: React.FunctionComponent<IProps> = (
         untilDate,
         months = 1,
         onFromDateChanged,
-        onUntilDateChanged
+        onUntilDateChanged,
+        isDisabled = false
     }
 ) => {
     const [currentDate, setCurrentDate] = React.useState<Moment>(fromDate ? fromDate.clone() : moment())
@@ -47,11 +48,14 @@ const DatePicker: React.FunctionComponent<IProps> = (
                                hoverDate={hoverDate}
                                onDaySelected={
                                    (selectedDate: Moment) => {
-                                       if (!fromDate || (fromDate && untilDate)) {
-                                           onFromDateChanged(selectedDate.clone())
-                                           onUntilDateChanged(range ? undefined : selectedDate.clone())
+                                       if (isDisabled) {
                                            return
                                        }
+                                           if (!fromDate || (fromDate && untilDate)) {
+                                               onFromDateChanged(selectedDate.clone())
+                                               onUntilDateChanged(range ? undefined : selectedDate.clone())
+                                               return
+                                           }
 
                                        if (selectedDate.isBefore(fromDate)) {
                                            onFromDateChanged(selectedDate.clone())
@@ -65,6 +69,9 @@ const DatePicker: React.FunctionComponent<IProps> = (
                                }
                                onDayHover={
                                    (onHoverDate: Moment | undefined) => {
+                                       if (isDisabled) {
+                                           return
+                                       }
                                        setHoverDate(onHoverDate)
                                    }
                                }
diff --git a/src/DateTimeRangePicker/DatePicker/IProps.ts b/src/DateTimeRangePicker/DatePicker/IProps.ts
index a02bfbd..58cb569 100644
--- a/src/DateTimeRangePicker/DatePicker/IProps.ts
+++ b/src/DateTimeRangePicker/DatePicker/IProps.ts
@@ -7,7 +7,8 @@ interface IProps {
     months: number,
     onFromDateChanged: (date: Moment | undefined) => void
     onUntilDateChanged: (date: Moment | undefined) => void,
-    displayRanges: []
+    displayRanges: [],
+    isDisabled?: boolean
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
index 67ebb7f..43bec1a 100644
--- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react'
-import moment, {Moment} from 'moment'
+import {Moment} from 'moment'
 
 import './DateTimeRangePicker.scss'
 import IProps from './IProps'
@@ -14,11 +14,11 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         displayRanges = [],
         time = false,
         inline = true,
-        fromDate= moment(),
-        untilDate = moment().set('date', 19),
+        fromDate,
+        untilDate,
         months = 1,
         onChange,
-        isDisabled = true
+        isDisabled = false
     }
 ) => {
     const [currentFromDate, setCurrentFromDate] = useState<Moment | undefined>(fromDate ? fromDate.clone() : undefined)
@@ -59,43 +59,44 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
     )
 
     return <div className={'date-time-range-picker'}>
-        {date && true === isDisabled
+        {date
             ? <DatePicker
                 range={range}
                 displayRanges={displayRanges}
                 months={months}
                 fromDate={currentFromDate}
                 untilDate={currentUntilDate}
-                // onFromDateChanged={
-                //     (changedDate: Moment | undefined) => {
-                //         setCurrentFromDate(changedDate)
-                //     }
-                // }
-                // onUntilDateChanged={
-                //     (changedDate: Moment | undefined) => {
-                //         setCurrentUntilDate(changedDate)
-                //     }
-                // }
+                onFromDateChanged={
+                    (changedDate: Moment | undefined) => {
+                        setCurrentFromDate(changedDate)
+                    }
+                }
+                onUntilDateChanged={
+                    (changedDate: Moment | undefined) => {
+                        setCurrentUntilDate(changedDate)
+                    }
+                }
+                isDisabled={isDisabled}
             />
             : null
         }
 
         {
-            time && true === isDisabled
+            time
                 ? <div className={'date-time-range-picker-times'}>
                     <div>
                         <label>{range ? 'From' : 'Time'}</label>
                         <TimePicker
                             step={15}
                             time={currentFromTime}
-                            // onTimeChanged={
-                            //     (changedTime: Moment) => {
-                            //         setCurrentFromTime(changedTime)
-                            //         if (!range) {
-                            //             setCurrentUntilTime(changedTime)
-                            //         }
-                            //     }
-                            // }
+                            onTimeChanged={
+                                (changedTime: Moment) => {
+                                    setCurrentFromTime(changedTime)
+                                    if (!range) {
+                                        setCurrentUntilTime(changedTime)
+                                    }
+                                }
+                            }
                             isDisabled={isDisabled}
                         />
                     </div>
@@ -106,11 +107,11 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
                                 <TimePicker
                                     step={15}
                                     time={currentUntilTime}
-                                    // onTimeChanged={
-                                    //     (changedTime: Moment) => {
-                                    //         setCurrentUntilTime(changedTime)
-                                    //     }
-                                    // }
+                                    onTimeChanged={
+                                        (changedTime: Moment) => {
+                                            setCurrentUntilTime(changedTime)
+                                        }
+                                    }
                                     isDisabled={isDisabled}
                                 />
                             </div>
diff --git a/src/DateTimeRangePicker/IProps.ts b/src/DateTimeRangePicker/IProps.ts
index 22e74be..129aaa3 100644
--- a/src/DateTimeRangePicker/IProps.ts
+++ b/src/DateTimeRangePicker/IProps.ts
@@ -9,7 +9,8 @@ interface IProps {
     untilDate?: Moment,
     months?: number,
     onChange?: (fromDateTime: Moment, untilDateTime?: Moment) => void
-    displayRanges?: []
+    displayRanges?: [],
+    isDisabled?: boolean
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/TimePicker/IProps.ts b/src/DateTimeRangePicker/TimePicker/IProps.ts
index fb01c62..c55f890 100644
--- a/src/DateTimeRangePicker/TimePicker/IProps.ts
+++ b/src/DateTimeRangePicker/TimePicker/IProps.ts
@@ -3,7 +3,8 @@ import {Moment} from 'moment'
 interface IProps {
     time?: Moment,
     step: number,
-    onTimeChanged: (time: Moment) => void
+    onTimeChanged: (time: Moment) => void,
+    isDisabled?: boolean
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/TimePicker/TimePicker.tsx b/src/DateTimeRangePicker/TimePicker/TimePicker.tsx
index 1cf7ea0..3837415 100644
--- a/src/DateTimeRangePicker/TimePicker/TimePicker.tsx
+++ b/src/DateTimeRangePicker/TimePicker/TimePicker.tsx
@@ -5,7 +5,7 @@ import moment from 'moment'
 import IProps from './IProps'
 import './TimePicker.scss'
 
-const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time, isDisabled}) => {
+const TimePicker: FunctionComponent<IProps> = ({step = 15, onTimeChanged, time, isDisabled}) => {
     const [currentValue, setCurrentValue] = useState<string | undefined>(time ? time.format('HH:mm') : undefined)
     const [isOpen, setIsOpen] = useState<boolean>(false)
     const dropdownRef = useRef<HTMLDivElement | any>()
@@ -13,10 +13,14 @@ const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time,
     let inputRef: HTMLInputElement
 
     const onChange = (e: SyntheticEvent<HTMLInputElement>) => {
+        if (isDisabled) {
+            return
+        }
+
         setCurrentValue(e.currentTarget.value)
 
         const changedTime = moment(e.currentTarget.value, 'HH:mm')
-        if (! changedTime.isValid()) {
+        if (!changedTime.isValid()) {
             return
         }
 
@@ -30,6 +34,10 @@ const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time,
     }
 
     const onBlur = (e: SyntheticEvent<HTMLInputElement>) => {
+        if (isDisabled) {
+            return
+        }
+
         setCurrentValue(e.currentTarget.value)
         setTimeout(
             () => setIsOpen(false),
@@ -37,7 +45,7 @@ const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time,
         )
 
         const changedTime = moment(e.currentTarget.value, 'HH:mm')
-        if (! changedTime.isValid()) {
+        if (!changedTime.isValid()) {
             return
         }
 
@@ -48,6 +56,10 @@ const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time,
     }
 
     const onSelect = (timeValue: string) => {
+        if (isDisabled) {
+            return
+        }
+
         setCurrentValue(timeValue)
 
         const changedTime = moment(timeValue, 'HH:mm')
@@ -64,7 +76,7 @@ const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time,
 
     const isActive = (timeValue: string): boolean => {
         const currentTime = moment(currentValue, 'HH:mm')
-        if (! currentTime.isValid()) {
+        if (!currentTime.isValid()) {
             return false
         }
 
@@ -73,37 +85,44 @@ const TimePicker: FunctionComponent<IProps> = ({ step = 15, onTimeChanged, time,
         return currentTime.format('HH:mm') === timeValue
     }
 
-    return <div className={`time-picker ${isOpen ? 'open' : null}`}>
-        <Cleave options={{time: true, timePattern: ['h', 'm']}}
-                placeholder={'00:00'}
-                // onChange={onChange}
-                // onFocus={() => setIsOpen(true)}
-                // onBlur={onBlur}
-                value={currentValue}
-                className={'time-picker-input'}
-                onKeyDown={
-                    (e: KeyboardEvent | any) => {
-                        if (e.key === 'Enter' && inputRef) {
-                            inputRef.blur()
-                        }
-                    }
-                }
-                htmlRef={(element: HTMLInputElement) => inputRef = element}
-        />
-        <div className={'time-picker-dropdown'} ref={dropdownRef}>
+    return (
+        <div className={`time-picker ${isOpen ? 'open' : null}`}>
             {
-                timeValues.map((timeValue, index) => {
-                    return <div key={`timeValue${index}`}
-                                className={isActive(timeValue) ? 'active' : undefined}
-                                ref={isActive(timeValue) ? activeDropdownRef : undefined}
-                                // onClick={() => onSelect(timeValue)}
-                    >
-                        {timeValue}
+                <>
+                    <Cleave options={{time: true, timePattern: ['h', 'm']}}
+                            placeholder={'00:00'}
+                            onChange={onChange}
+                            onFocus={() => setIsOpen(true)}
+                            onBlur={onBlur}
+                            value={currentValue}
+                            className={'time-picker-input'}
+                            onKeyDown={
+                                (e: KeyboardEvent | any) => {
+                                    if (e.key === 'Enter' && inputRef) {
+                                        inputRef.blur()
+                                    }
+                                }
+                            }
+                            htmlRef={(element: HTMLInputElement) => inputRef = element}
+                            disabled={isDisabled}
+                    />
+                    <div className={'time-picker-dropdown'} ref={dropdownRef}>
+                        {
+                            timeValues.map((timeValue, index) => {
+                                return <div key={`timeValue${index}`}
+                                            className={isActive(timeValue) ? 'active' : undefined}
+                                            ref={isActive(timeValue) ? activeDropdownRef : undefined}
+                                            onClick={() => onSelect(timeValue)}
+                                >
+                                    {timeValue}
+                                </div>
+                            })
+                        }
                     </div>
-                })
+                </>
             }
         </div>
-    </div>
+    )
 }
 
 export default TimePicker
diff --git a/src/DateTimeRangePicker/TimePicker/__tests__/TimePicker.test.tsx b/src/DateTimeRangePicker/TimePicker/__tests__/TimePicker.test.tsx
index 42c384d..cd2ec83 100644
--- a/src/DateTimeRangePicker/TimePicker/__tests__/TimePicker.test.tsx
+++ b/src/DateTimeRangePicker/TimePicker/__tests__/TimePicker.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import {shallow} from 'enzyme'
 
 import moment from 'moment'
 import TimePicker from '../TimePicker'
@@ -18,7 +18,7 @@ describe('Date/time range picker month', () => {
         const onTimeChangedMock = jest.fn()
 
         const component = shallow(
-            <TimePicker step={20} onTimeChanged={onTimeChangedMock} />
+            <TimePicker step={20} onTimeChanged={onTimeChangedMock}/>
         )
 
         component.find('.time-picker-dropdown div').at(8).simulate('click')
@@ -29,13 +29,13 @@ describe('Date/time range picker month', () => {
         const onTimeChangedMock = jest.fn()
 
         const component = shallow(
-            <TimePicker step={20} onTimeChanged={onTimeChangedMock} />
+            <TimePicker step={20} onTimeChanged={onTimeChangedMock} isDisabled={false}/>
         )
 
         component.find('.time-picker-input').simulate('focus')
         expect(component.find('.open').length).toEqual(1)
 
-        component.find('.time-picker-input').simulate('blur', {currentTarget: { value: '14:40' }})
+        component.find('.time-picker-input').simulate('blur', {currentTarget: {value: '14:40'}})
 
         expect(onTimeChangedMock).toBeCalledTimes(1)
         expect(onTimeChangedMock.mock.calls[0][0].format('HH:mm')).toEqual('14:40')
diff --git a/src/DateTimeRangePicker/__tests__/__snapshots__/DateTimeRangePicker.test.tsx.snap b/src/DateTimeRangePicker/__tests__/__snapshots__/DateTimeRangePicker.test.tsx.snap
deleted file mode 100644
index a0cf4be..0000000
--- a/src/DateTimeRangePicker/__tests__/__snapshots__/DateTimeRangePicker.test.tsx.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DateTimeRangePicker should render correctly 1`] = `
-<div
-  className="date-time-range-picker"
->
-  <DatePicker
-    displayRanges={Array []}
-    fromDate={"2019-10-15T18:23:15.000Z"}
-    months={2}
-    onFromDateChanged={[Function]}
-    onUntilDateChanged={[Function]}
-    range={false}
-    untilDate={"2019-10-15T18:23:15.000Z"}
-  />
-</div>
-`;