add react-big-calendar

package-lock.json

@@ -12,7 +12,10 @@
         "@emotion/styled": "^11.8.1",
         "@mui/icons-material": "^5.4.2",
         "@mui/material": "^5.4.3",
+        "@types/react-big-calendar": "^0.36.2",
+        "moment": "^2.29.1",
         "react": "^17.0.2",
+        "react-big-calendar": "^0.39.3",
         "react-dom": "^17.0.2",
         "react-router-dom": "^6.2.1"
       },
@@ -2205,6 +2208,17 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@restart/hooks": {
+      "version": "0.3.27",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
+      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
@@ -2637,6 +2651,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-big-calendar": {
+      "version": "0.36.2",
+      "resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-0.36.2.tgz",
+      "integrity": "sha512-grXQJgeHWXhgcipRB28NnUwIhD6aAKFs7IacGwy2+33hC8yAcR62nsW73aa25K3qxU8RxoLflKSCrsm4QCQpuQ==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "17.0.11",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
@@ -2722,6 +2745,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "node_modules/@types/webpack": {
       "version": "5.28.0",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-5.28.0.tgz",
@@ -5153,6 +5181,11 @@
         "url": "https://github.com/imagemin/cwebp-bin?sponsor=1"
       }
     },
+    "node_modules/date-arithmetic": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz",
+      "integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg=="
+    },
     "node_modules/debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -5498,6 +5531,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -8285,6 +8326,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -8962,8 +9011,12 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -9073,6 +9126,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/memory-fs": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
@@ -9216,6 +9274,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mozjpeg": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/mozjpeg/-/mozjpeg-7.1.1.tgz",
@@ -10452,6 +10518,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-big-calendar": {
+      "version": "0.39.3",
+      "resolved": "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-0.39.3.tgz",
+      "integrity": "sha512-RLymspfoBeYNBMvKnpMSpHtUAsJhv1Cbp1sE6aE7huQ92xT0mgnFDxUSoWc//C5J8WbYWLtlld521eisNJSjNw==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.5",
+        "clsx": "^1.0.4",
+        "date-arithmetic": "^4.1.0",
+        "dom-helpers": "^5.1.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.11",
+        "lodash-es": "^4.17.11",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-overlays": "^4.1.1",
+        "uncontrollable": "^7.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.1 || ^17",
+        "react-dom": "^16.6.1 || ^17"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -10470,6 +10558,30 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-overlays": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
+      "integrity": "sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@popperjs/core": "^2.5.3",
+        "@restart/hooks": "^0.3.25",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
@@ -12214,6 +12326,20 @@
         "through": "^2.3.8"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -12361,6 +12487,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -14247,6 +14381,14 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
       "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
     },
+    "@restart/hooks": {
+      "version": "0.3.27",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
+      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
     "@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
@@ -14575,6 +14717,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-big-calendar": {
+      "version": "0.36.2",
+      "resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-0.36.2.tgz",
+      "integrity": "sha512-grXQJgeHWXhgcipRB28NnUwIhD6aAKFs7IacGwy2+33hC8yAcR62nsW73aa25K3qxU8RxoLflKSCrsm4QCQpuQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "17.0.11",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
@@ -14660,6 +14811,11 @@
         "@types/node": "*"
       }
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@types/webpack": {
       "version": "5.28.0",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-5.28.0.tgz",
@@ -16529,6 +16685,11 @@
         "bin-wrapper": "^4.0.1"
       }
     },
+    "date-arithmetic": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz",
+      "integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg=="
+    },
     "debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -16797,6 +16958,11 @@
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
       "dev": true
     },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -18916,6 +19082,14 @@
         "p-is-promise": "^1.1.0"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -19401,8 +19575,12 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -19491,6 +19669,11 @@
         "fs-monkey": "1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "memory-fs": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
@@ -19598,6 +19781,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "mozjpeg": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/mozjpeg/-/mozjpeg-7.1.1.tgz",
@@ -20506,6 +20694,24 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-big-calendar": {
+      "version": "0.39.3",
+      "resolved": "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-0.39.3.tgz",
+      "integrity": "sha512-RLymspfoBeYNBMvKnpMSpHtUAsJhv1Cbp1sE6aE7huQ92xT0mgnFDxUSoWc//C5J8WbYWLtlld521eisNJSjNw==",
+      "requires": {
+        "@babel/runtime": "^7.1.5",
+        "clsx": "^1.0.4",
+        "date-arithmetic": "^4.1.0",
+        "dom-helpers": "^5.1.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.11",
+        "lodash-es": "^4.17.11",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-overlays": "^4.1.1",
+        "uncontrollable": "^7.0.0"
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -20521,6 +20727,26 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-overlays": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
+      "integrity": "sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@popperjs/core": "^2.5.3",
+        "@restart/hooks": "^0.3.25",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-router": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
@@ -21872,6 +22098,17 @@
         "through": "^2.3.8"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -21986,6 +22223,14 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",

package.json

@@ -12,7 +12,10 @@
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.4.2",
     "@mui/material": "^5.4.3",
+    "@types/react-big-calendar": "^0.36.2",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
+    "react-big-calendar": "^0.39.3",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1"
   },

src/App.tsx

@@ -5,7 +5,7 @@ import "./styles.css";
 import Login from "./components/login/Login";
 import Home from "./components/home/Home";
 import Contacts from "./components/contacts/Contacts";
-import Calendar from "./components/calendar/Calendar";
+import CalendarPage from "./components/calendar/CalendarPage";
 import { ThemeProvider } from "@emotion/react";
 import ProtectedRoute from "./ProtectedRoute";
 import MeetingDetails from "./components/meeting-details/MeetingDetails";
@@ -28,7 +28,7 @@ const App: React.FC = () => {
               path="/contacts"
               element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
             />
-            <Route path="/calendar" element={<Calendar />} />
+            <Route path="/calendar" element={<CalendarPage />} />
           </Route>
         </Routes>
       </Router>

src/components/calendar/Calendar.tsx

@@ -1,5 +0,0 @@
-const Calendar: React.FC = () => {
-  return <span>Calendar</span>;
-};
-
-export default Calendar;

src/components/calendar/CalendarPage.tsx

@@ -0,0 +1,14 @@
+import { Toolbar } from "@mui/material";
+import UserCalendar from "./UserCalendar";
+
+const CalendarPage: React.FC = () => {
+
+  return (
+    <>
+      <Toolbar />
+      <UserCalendar />
+    </>
+  );
+};
+
+export default CalendarPage;

src/components/calendar/Events.tsx

@@ -0,0 +1,185 @@
+/*
+Test data from
+https://github.com/jquense/react-big-calendar/blob/master/examples/events.js 
+*/
+
+const now = new Date();
+
+export default [
+  {
+    id: 0,
+    title: "All Day Event very long title",
+    allDay: true,
+    start: new Date(2022, 2, 0),
+    end: new Date(2022, 2, 1),
+  },
+  {
+    id: 1,
+    title: "Long Event",
+    start: new Date(2022, 2, 7),
+    end: new Date(2022, 2, 10),
+  },
+
+  {
+    id: 2,
+    title: "DTS STARTS",
+    start: new Date(2022, 1, 13, 0, 0, 0),
+    end: new Date(2022, 1, 20, 0, 0, 0),
+  },
+
+  {
+    id: 3,
+    title: "DTS ENDS",
+    start: new Date(2022, 9, 6, 0, 0, 0),
+    end: new Date(2022, 9, 13, 0, 0, 0),
+  },
+
+  {
+    id: 4,
+    title: "Some Event",
+    start: new Date(2022, 2, 9, 0, 0, 0),
+    end: new Date(2022, 2, 10, 0, 0, 0),
+  },
+  {
+    id: 5,
+    title: "Conference",
+    start: new Date(2022, 2, 11),
+    end: new Date(2022, 2, 13),
+    desc: "Big conference for important people",
+  },
+  {
+    id: 6,
+    title: "Meeting",
+    start: new Date(2022, 2, 12, 10, 30, 0, 0),
+    end: new Date(2022, 2, 12, 12, 30, 0, 0),
+    desc: "Pre-meeting meeting, to prepare for the meeting",
+  },
+  {
+    id: 7,
+    title: "Lunch",
+    start: new Date(2022, 2, 12, 12, 0, 0, 0),
+    end: new Date(2022, 2, 12, 13, 0, 0, 0),
+    desc: "Power lunch",
+  },
+  {
+    id: 8,
+    title: "Meeting",
+    start: new Date(2022, 2, 12, 14, 0, 0, 0),
+    end: new Date(2022, 2, 12, 15, 0, 0, 0),
+  },
+  {
+    id: 9,
+    title: "Happy Hour",
+    start: new Date(2022, 2, 12, 17, 0, 0, 0),
+    end: new Date(2022, 2, 12, 17, 30, 0, 0),
+    desc: "Most important meal of the day",
+  },
+  {
+    id: 10,
+    title: "Dinner",
+    start: new Date(2022, 2, 12, 20, 0, 0, 0),
+    end: new Date(2022, 2, 12, 21, 0, 0, 0),
+  },
+  {
+    id: 11,
+    title: "Planning Meeting with Paige",
+    start: new Date(2022, 2, 13, 8, 0, 0),
+    end: new Date(2022, 2, 13, 10, 30, 0),
+  },
+  {
+    id: 11.1,
+    title: "Inconvenient multi-day Conference Call",
+    start: new Date(2022, 2, 13, 9, 30, 0),
+    end: new Date(2022, 2, 14, 1, 0, 0),
+  },
+  {
+    id: 11.2,
+    title: "Project Kickoff - Lou's Shoes",
+    start: new Date(2022, 2, 13, 11, 30, 0),
+    end: new Date(2022, 2, 13, 14, 0, 0),
+  },
+  {
+    id: 11.3,
+    title: "Quote Follow-up - Tea by Tina",
+    start: new Date(2022, 2, 13, 15, 30, 0),
+    end: new Date(2022, 2, 13, 16, 0, 0),
+  },
+  {
+    id: 12,
+    title: "Late Night Event",
+    start: new Date(2022, 2, 17, 19, 30, 0),
+    end: new Date(2022, 2, 18, 2, 0, 0),
+  },
+  {
+    id: 12.5,
+    title: "Late Same Night Event",
+    start: new Date(2022, 2, 17, 19, 30, 0),
+    end: new Date(2022, 2, 17, 23, 30, 0),
+  },
+  {
+    id: 13,
+    title: "Multi-day Event",
+    start: new Date(2022, 2, 20, 19, 30, 0),
+    end: new Date(2022, 2, 22, 2, 0, 0),
+  },
+  {
+    id: 14,
+    title: "Today",
+    start: new Date(new Date().setHours(new Date().getHours() - 3)),
+    end: new Date(new Date().setHours(new Date().getHours() + 3)),
+  },
+  {
+    id: 15,
+    title: "Point in Time Event",
+    start: now,
+    end: now,
+  },
+  {
+    id: 16,
+    title: "Video Record",
+    start: new Date(2022, 2, 14, 15, 30, 0),
+    end: new Date(2022, 2, 14, 19, 0, 0),
+  },
+  {
+    id: 17,
+    title: "Dutch Song Producing",
+    start: new Date(2022, 2, 14, 16, 30, 0),
+    end: new Date(2022, 2, 14, 20, 0, 0),
+  },
+  {
+    id: 18,
+    title: "Itaewon Halloween Meeting",
+    start: new Date(2022, 2, 14, 16, 30, 0),
+    end: new Date(2022, 2, 14, 17, 30, 0),
+  },
+  {
+    id: 19,
+    title: "Online Coding Test",
+    start: new Date(2022, 2, 14, 17, 30, 0),
+    end: new Date(2022, 2, 14, 20, 30, 0),
+  },
+  {
+    id: 20,
+    title: "An overlapped Event",
+    start: new Date(2022, 2, 14, 17, 0, 0),
+    end: new Date(2022, 2, 14, 18, 30, 0),
+  },
+  {
+    id: 21,
+    title: "Phone Interview",
+    start: new Date(2022, 2, 14, 17, 0, 0),
+    end: new Date(2022, 2, 14, 18, 30, 0),
+  },
+  {
+    id: 22,
+    title: "Cooking Class",
+    start: new Date(2022, 2, 14, 17, 30, 0),
+    end: new Date(2022, 2, 14, 19, 0, 0),
+  },
+  {
+    id: 23,
+    title: "Go to the gym",
+    start: new Date(2022, 2, 14, 18, 30, 0),
+    end: new Date(2022, 2, 14, 20, 0, 0),
+  },
+];

src/components/calendar/UserCalendar.tsx

@@ -0,0 +1,23 @@
+import { Calendar,  momentLocalizer } from "react-big-calendar";
+import moment from "moment";
+import testEvents from "./Events";
+
+import "react-big-calendar/lib/css/react-big-calendar.css";
+
+const localizer = momentLocalizer(moment);
+
+const UserCalendar: React.FC = () => {
+
+  return (
+    <Calendar
+      events={testEvents}
+      views={["month", "week", "day"]}
+      step={60}
+      showMultiDayTimes
+      localizer={localizer}
+      style={{ height: "80%" }}
+    />
+  );
+};
+
+export default UserCalendar;