Added calendar days array constructor including day number and event list
This commit is contained in:
parent
fd28aaee6c
commit
c56f11e78a
@ -1,10 +1,12 @@
|
||||
import React from "react";
|
||||
import Calendar from "react-eventful-calendar";
|
||||
|
||||
import events from './events.json'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Calendar />
|
||||
<Calendar eventList={events} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
8
example/src/events.json
Normal file
8
example/src/events.json
Normal file
@ -0,0 +1,8 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"title": "Test",
|
||||
"startDate": "Wed Oct 28 2020 17:00:00 GMT+0500 (Yekaterinburg Standard Time)",
|
||||
"endDate": "Wed Oct 28 2020 20:00:00 GMT+0500 (Yekaterinburg Standard Time)"
|
||||
}
|
||||
]
|
||||
@ -963,7 +963,7 @@
|
||||
core-js-pure "^3.0.0"
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@7.12.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@7.12.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
|
||||
version "7.12.1"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
|
||||
integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
|
||||
@ -1454,59 +1454,11 @@
|
||||
"@svgr/plugin-svgo" "^5.4.0"
|
||||
loader-utils "^2.0.0"
|
||||
|
||||
"@testing-library/dom@^7.26.0":
|
||||
version "7.26.3"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.26.3.tgz#5554ee985f712d621bd676104b879f85d9a7a0ef"
|
||||
integrity sha512-/1P6taENE/H12TofJaS3L1J28HnXx8ZFhc338+XPR5y1E3g5ttOgu86DsGnV9/n2iPrfJQVUZ8eiGYZGSxculw==
|
||||
dependencies:
|
||||
"@babel/code-frame" "^7.10.4"
|
||||
"@babel/runtime" "^7.10.3"
|
||||
"@types/aria-query" "^4.2.0"
|
||||
aria-query "^4.2.2"
|
||||
chalk "^4.1.0"
|
||||
dom-accessibility-api "^0.5.1"
|
||||
lz-string "^1.4.4"
|
||||
pretty-format "^26.4.2"
|
||||
|
||||
"@testing-library/jest-dom@^5.11.4":
|
||||
version "5.11.5"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.5.tgz#44010f37f4b1e15f9d433963b515db0b05182fc8"
|
||||
integrity sha512-XI+ClHR864i6p2kRCEyhvpVejuer+ObVUF4cjCvRSF88eOMIfqw7RoS9+qoRhyigGswMfT64L6Nt0Ufotxbwtg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@types/testing-library__jest-dom" "^5.9.1"
|
||||
aria-query "^4.2.2"
|
||||
chalk "^3.0.0"
|
||||
css "^3.0.0"
|
||||
css.escape "^1.5.1"
|
||||
lodash "^4.17.15"
|
||||
redent "^3.0.0"
|
||||
|
||||
"@testing-library/react@^11.1.0":
|
||||
version "11.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.1.0.tgz#dfb4b3177d05a8ccf156b5fd14a5550e91d7ebe4"
|
||||
integrity sha512-Nfz58jGzW0tgg3irmTB7sa02JLkLnCk+QN3XG6WiaGQYb0Qc4Ok00aujgjdxlIQWZHbb4Zj5ZOIeE9yKFSs4sA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.11.2"
|
||||
"@testing-library/dom" "^7.26.0"
|
||||
|
||||
"@testing-library/user-event@^12.1.10":
|
||||
version "12.1.10"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.1.10.tgz#e043ef5aa10e4b3e56b434e383d2fbfef1fcfb7f"
|
||||
integrity sha512-StlNdKHp2Rpb7yrny/5/CGpz8bR3jLa1Ge59ODGU6TmAhkrxSpvR6tCD1gaMFkkjEUWkmmye8BaXsZPcaiJ6Ug==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.10.2"
|
||||
|
||||
"@types/anymatch@*":
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
|
||||
integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
|
||||
|
||||
"@types/aria-query@^4.2.0":
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
|
||||
integrity sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==
|
||||
|
||||
"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
|
||||
version "7.1.10"
|
||||
resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.10.tgz#ca58fc195dd9734e77e57c6f2df565623636ab40"
|
||||
@ -1597,14 +1549,6 @@
|
||||
dependencies:
|
||||
"@types/istanbul-lib-report" "*"
|
||||
|
||||
"@types/jest@*", "@types/jest@^26.0.15":
|
||||
version "26.0.15"
|
||||
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.15.tgz#12e02c0372ad0548e07b9f4e19132b834cb1effe"
|
||||
integrity sha512-s2VMReFXRg9XXxV+CW9e5Nz8fH2K1aEhwgjUqPPbQd7g95T0laAcvLv032EhFHIa5GHsZ8W7iJEQVaJq6k3Gog==
|
||||
dependencies:
|
||||
jest-diff "^26.0.0"
|
||||
pretty-format "^26.0.0"
|
||||
|
||||
"@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
|
||||
version "7.0.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
|
||||
@ -1692,13 +1636,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
|
||||
integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
|
||||
|
||||
"@types/testing-library__jest-dom@^5.9.1":
|
||||
version "5.9.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz#5bf25c91ad2d7b38f264b12275e5c92a66d849b0"
|
||||
integrity sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==
|
||||
dependencies:
|
||||
"@types/jest" "*"
|
||||
|
||||
"@types/uglify-js@*":
|
||||
version "3.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.11.0.tgz#2868d405cc45cd9dc3069179052103032c33afbc"
|
||||
@ -2971,14 +2908,6 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
|
||||
escape-string-regexp "^1.0.5"
|
||||
supports-color "^5.3.0"
|
||||
|
||||
chalk@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
|
||||
integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
|
||||
dependencies:
|
||||
ansi-styles "^4.1.0"
|
||||
supports-color "^7.1.0"
|
||||
|
||||
chalk@^4.0.0, chalk@^4.1.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
|
||||
@ -3591,11 +3520,6 @@ css-what@^3.2.1:
|
||||
resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
|
||||
integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
|
||||
|
||||
css.escape@^1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
|
||||
integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
|
||||
|
||||
css@^2.0.0:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
|
||||
@ -3606,15 +3530,6 @@ css@^2.0.0:
|
||||
source-map-resolve "^0.5.2"
|
||||
urix "^0.1.0"
|
||||
|
||||
css@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
|
||||
integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
|
||||
dependencies:
|
||||
inherits "^2.0.4"
|
||||
source-map "^0.6.1"
|
||||
source-map-resolve "^0.6.0"
|
||||
|
||||
cssdb@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
|
||||
@ -3978,11 +3893,6 @@ doctrine@^3.0.0:
|
||||
dependencies:
|
||||
esutils "^2.0.2"
|
||||
|
||||
dom-accessibility-api@^0.5.1:
|
||||
version "0.5.4"
|
||||
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
|
||||
integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
|
||||
|
||||
dom-converter@^0.2:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
|
||||
@ -6170,7 +6080,7 @@ jest-config@^26.6.1:
|
||||
micromatch "^4.0.2"
|
||||
pretty-format "^26.6.1"
|
||||
|
||||
jest-diff@^26.0.0, jest-diff@^26.6.1:
|
||||
jest-diff@^26.6.1:
|
||||
version "26.6.1"
|
||||
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.1.tgz#38aa194979f454619bb39bdee299fb64ede5300c"
|
||||
integrity sha512-BBNy/zin2m4kG5In126O8chOBxLLS/XMTuuM2+YhgyHk87ewPzKTuTJcqj3lOWOi03NNgrl+DkMeV/exdvG9gg==
|
||||
@ -6919,11 +6829,6 @@ lru-cache@^6.0.0:
|
||||
dependencies:
|
||||
yallist "^4.0.0"
|
||||
|
||||
lz-string@^1.4.4:
|
||||
version "1.4.4"
|
||||
resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
|
||||
integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
|
||||
|
||||
magic-string@^0.25.0, magic-string@^0.25.5:
|
||||
version "0.25.7"
|
||||
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
|
||||
@ -7106,11 +7011,6 @@ mimic-fn@^2.1.0:
|
||||
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
|
||||
integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
|
||||
|
||||
min-indent@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
|
||||
integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
|
||||
|
||||
mini-css-extract-plugin@0.11.3:
|
||||
version "0.11.3"
|
||||
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
|
||||
@ -8692,7 +8592,7 @@ pretty-error@^2.1.1:
|
||||
lodash "^4.17.20"
|
||||
renderkid "^2.0.4"
|
||||
|
||||
pretty-format@^26.0.0, pretty-format@^26.4.2, pretty-format@^26.6.0, pretty-format@^26.6.1:
|
||||
pretty-format@^26.6.0, pretty-format@^26.6.1:
|
||||
version "26.6.1"
|
||||
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.1.tgz#af9a2f63493a856acddeeb11ba6bcf61989660a8"
|
||||
integrity sha512-MeqqsP5PYcRBbGMvwzsyBdmAJ4EFX7pWFyl7x4+dMVg5pE0ZDdBIvEH2ergvIO+Gvwv1wh64YuOY9y5LuyY/GA==
|
||||
@ -8947,7 +8847,7 @@ react-error-overlay@^6.0.8:
|
||||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
|
||||
integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
|
||||
|
||||
react-eventful-calendar@../:
|
||||
react-eventful-calendar@../.:
|
||||
version "1.0.0"
|
||||
|
||||
react-is@^16.8.1:
|
||||
@ -9119,14 +9019,6 @@ recursive-readdir@2.2.2:
|
||||
dependencies:
|
||||
minimatch "3.0.4"
|
||||
|
||||
redent@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
|
||||
integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
|
||||
dependencies:
|
||||
indent-string "^4.0.0"
|
||||
strip-indent "^3.0.0"
|
||||
|
||||
regenerate-unicode-properties@^8.2.0:
|
||||
version "8.2.0"
|
||||
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
|
||||
@ -9881,14 +9773,6 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
|
||||
source-map-url "^0.4.0"
|
||||
urix "^0.1.0"
|
||||
|
||||
source-map-resolve@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
|
||||
integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
|
||||
dependencies:
|
||||
atob "^2.1.2"
|
||||
decode-uri-component "^0.2.0"
|
||||
|
||||
source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.19:
|
||||
version "0.5.19"
|
||||
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
|
||||
@ -10215,13 +10099,6 @@ strip-final-newline@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
|
||||
integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
|
||||
|
||||
strip-indent@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
|
||||
integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
|
||||
dependencies:
|
||||
min-indent "^1.0.0"
|
||||
|
||||
strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
|
||||
@ -10942,11 +10819,6 @@ wbuf@^1.1.0, wbuf@^1.7.3:
|
||||
dependencies:
|
||||
minimalistic-assert "^1.0.0"
|
||||
|
||||
web-vitals@^0.2.4:
|
||||
version "0.2.4"
|
||||
resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-0.2.4.tgz#ec3df43c834a207fd7cdefd732b2987896e08511"
|
||||
integrity sha512-6BjspCO9VriYy12z356nL6JBS0GYeEcA457YyRzD+dD6XYCQ75NKhcOHUMHentOE7OcVCIXXDvOm0jKFfQG2Gg==
|
||||
|
||||
webidl-conversions@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
|
||||
|
||||
62
src/CalendarInContext.tsx
Normal file
62
src/CalendarInContext.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
|
||||
import Day from './Day'
|
||||
import { CalendarContext } from './context'
|
||||
import { DayT, ICalendarProps } from './types'
|
||||
|
||||
const CalendarInContext: React.FC<ICalendarProps> = ({ eventList }) => {
|
||||
const context = useContext(CalendarContext)
|
||||
|
||||
const { month } = context.state
|
||||
|
||||
const [monthDaysState, setMonthDaysState] = useState<DayT[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
const daysNumbersArray = [
|
||||
Array.from(
|
||||
Array(month.firstDayOfWeek - 1 > 0 ? month.firstDayOfWeek - 1 : 0)
|
||||
).map(
|
||||
(_, index) =>
|
||||
month.previousMonthLength - month.firstDayOfWeek + index + 2
|
||||
),
|
||||
Array.from(Array(month.numberOfDays)).map((_, index) => index + 1),
|
||||
Array.from(Array(7 - month.lastDayOfWeek)).map((_, index) => index + 1),
|
||||
]
|
||||
|
||||
setMonthDaysState(
|
||||
daysNumbersArray.flatMap((month, index) =>
|
||||
month.map<DayT>((dayNumber) => ({
|
||||
number: dayNumber,
|
||||
events: eventList.filter((event) => {
|
||||
if (index != 1) return false
|
||||
|
||||
const eventDate = new Date(event.startDate)
|
||||
|
||||
return (
|
||||
eventDate.getDate() == dayNumber &&
|
||||
eventDate.getMonth() == context.state.month.number
|
||||
)
|
||||
}),
|
||||
}))
|
||||
)
|
||||
)
|
||||
}, [context.state])
|
||||
|
||||
return (
|
||||
<div>
|
||||
{monthDaysState.map((day, dayIndex) => (
|
||||
<Day
|
||||
key={dayIndex}
|
||||
dayNumber={day.number}
|
||||
events={day.events}
|
||||
shaded={
|
||||
dayIndex < month.firstDayOfWeek - 1 ||
|
||||
dayIndex > month.numberOfDays + month.firstDayOfWeek - 2
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CalendarInContext
|
||||
18
src/Day.tsx
Normal file
18
src/Day.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
|
||||
import { IDayProps } from './types'
|
||||
|
||||
const Day: React.FC<IDayProps> = ({ dayNumber, events, shaded }) => {
|
||||
return (
|
||||
<div style={shaded ? { background: '#EEEEEE' } : {}}>
|
||||
<h6>{dayNumber}</h6>
|
||||
<ul>
|
||||
{events.map((event, key) => (
|
||||
<li key={key}>{event.title}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Day
|
||||
@ -1,38 +1,47 @@
|
||||
import React, { createContext, Dispatch, SetStateAction, useState } from 'react'
|
||||
import React, { createContext, useEffect, useState } from 'react'
|
||||
|
||||
type CalendarContextStateT = {
|
||||
month: number
|
||||
year: number
|
||||
firstDayOfMonth: number
|
||||
lastDayOfMonth: number
|
||||
numberOfDays: number
|
||||
}
|
||||
|
||||
type CalendarContextT = {
|
||||
state: CalendarContextStateT
|
||||
setState?: Dispatch<SetStateAction<CalendarContextStateT>>
|
||||
}
|
||||
import { CalendarContextStateT, CalendarContextT } from './types'
|
||||
import { getCurrentMonth } from './utils'
|
||||
|
||||
const initialCalendarContextState: CalendarContextStateT = {
|
||||
month: 1,
|
||||
month: {
|
||||
number: 1,
|
||||
firstDayOfWeek: 1,
|
||||
lastDayOfWeek: 1,
|
||||
numberOfDays: 1,
|
||||
previousMonthLength: 1,
|
||||
},
|
||||
year: 1,
|
||||
firstDayOfMonth: 0,
|
||||
lastDayOfMonth: 0,
|
||||
numberOfDays: 0,
|
||||
day: 1,
|
||||
}
|
||||
|
||||
export const CalendarContext = createContext<CalendarContextT>({
|
||||
const CalendarContext = createContext<CalendarContextT>({
|
||||
state: initialCalendarContextState,
|
||||
})
|
||||
|
||||
export const CalendarProvider: React.FC = ({ children }) => {
|
||||
const CalendarProvider: React.FC = ({ children }) => {
|
||||
const [state, setState] = useState<CalendarContextStateT>(
|
||||
initialCalendarContextState
|
||||
)
|
||||
|
||||
const [now] = useState<Date>(new Date())
|
||||
|
||||
useEffect(
|
||||
() =>
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
month: getCurrentMonth(now),
|
||||
year: now.getFullYear(),
|
||||
day: now.getDate(),
|
||||
})),
|
||||
[]
|
||||
)
|
||||
|
||||
return (
|
||||
<CalendarContext.Provider value={{ state, setState }}>
|
||||
{children}
|
||||
</CalendarContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export { CalendarContext, CalendarProvider }
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import React from 'react'
|
||||
import CalendarInContext from './CalendarInContext'
|
||||
import { CalendarProvider as CalendarContextProvider } from './context'
|
||||
import { ICalendarProps } from './types'
|
||||
|
||||
const Calendar: React.FC = () => {
|
||||
const Calendar: React.FC<ICalendarProps> = ({ eventList }) => {
|
||||
return (
|
||||
<CalendarContextProvider>
|
||||
<div></div>
|
||||
<CalendarInContext eventList={eventList} />
|
||||
</CalendarContextProvider>
|
||||
)
|
||||
}
|
||||
|
||||
50
src/types.ts
Normal file
50
src/types.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { Dispatch, SetStateAction } from 'react'
|
||||
|
||||
// Context
|
||||
|
||||
export type CalendarContextStateT = {
|
||||
month: MonthContextT
|
||||
year: number
|
||||
day: number
|
||||
}
|
||||
|
||||
export type MonthContextT = {
|
||||
number: number
|
||||
firstDayOfWeek: number
|
||||
lastDayOfWeek: number
|
||||
numberOfDays: number
|
||||
previousMonthLength: number
|
||||
}
|
||||
|
||||
export type CalendarContextT = {
|
||||
state: CalendarContextStateT
|
||||
setState?: Dispatch<SetStateAction<CalendarContextStateT>>
|
||||
}
|
||||
|
||||
// Calendar component
|
||||
|
||||
export interface ICalendarProps {
|
||||
eventList: EventT[]
|
||||
}
|
||||
|
||||
// Day
|
||||
|
||||
export type DayT = {
|
||||
number: number
|
||||
events: EventT[]
|
||||
}
|
||||
|
||||
export interface IDayProps {
|
||||
dayNumber: number
|
||||
events: EventT[]
|
||||
shaded: boolean
|
||||
}
|
||||
|
||||
// Event
|
||||
|
||||
export type EventT = {
|
||||
id: number
|
||||
title: string
|
||||
startDate: string
|
||||
endDate: string
|
||||
}
|
||||
31
src/utils.ts
Normal file
31
src/utils.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { MonthContextT } from './types'
|
||||
|
||||
const getCurrentMonth = (currentDay: Date): MonthContextT => {
|
||||
const monthInfo = getMonthInfo(
|
||||
currentDay.getFullYear(),
|
||||
currentDay.getMonth()
|
||||
)
|
||||
|
||||
return {
|
||||
number: currentDay.getMonth(),
|
||||
...monthInfo,
|
||||
}
|
||||
}
|
||||
|
||||
const getMonthInfo = (
|
||||
year: number,
|
||||
month: number
|
||||
): Omit<MonthContextT, 'number'> => {
|
||||
const firstDayOfMonth = new Date(year, month, 1)
|
||||
const lastDayOfMonth = new Date(year, month + 1, 0)
|
||||
const prevMonth = new Date(year, month, 0)
|
||||
|
||||
return {
|
||||
firstDayOfWeek: firstDayOfMonth.getDay(),
|
||||
lastDayOfWeek: lastDayOfMonth.getDay(),
|
||||
numberOfDays: lastDayOfMonth.getDate(),
|
||||
previousMonthLength: prevMonth.getDate(),
|
||||
}
|
||||
}
|
||||
|
||||
export { getCurrentMonth, getMonthInfo }
|
||||
@ -4,7 +4,7 @@
|
||||
"outDir": "build",
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"lib": ["es6", "dom", "es2016", "es2017"],
|
||||
"lib": ["es6", "dom", "es2016", "es2017", "ES2019"],
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
||||
42
yarn.lock
42
yarn.lock
@ -138,11 +138,6 @@ is-reference@^1.1.2:
|
||||
dependencies:
|
||||
"@types/estree" "*"
|
||||
|
||||
"js-tokens@^3.0.0 || ^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
||||
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
|
||||
|
||||
jsonfile@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
|
||||
@ -157,13 +152,6 @@ locate-path@^5.0.0:
|
||||
dependencies:
|
||||
p-locate "^4.1.0"
|
||||
|
||||
loose-envify@^1.1.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
|
||||
dependencies:
|
||||
js-tokens "^3.0.0 || ^4.0.0"
|
||||
|
||||
magic-string@^0.25.2:
|
||||
version "0.25.7"
|
||||
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
|
||||
@ -178,11 +166,6 @@ make-dir@^3.0.2:
|
||||
dependencies:
|
||||
semver "^6.0.0"
|
||||
|
||||
object-assign@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
|
||||
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
|
||||
|
||||
p-limit@^2.2.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
|
||||
@ -224,23 +207,6 @@ pkg-dir@^4.1.0:
|
||||
dependencies:
|
||||
find-up "^4.0.0"
|
||||
|
||||
react-dom@^17.0.1:
|
||||
version "17.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
|
||||
integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
scheduler "^0.20.1"
|
||||
|
||||
react@^17.0.1:
|
||||
version "17.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
|
||||
integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
resolve@1.17.0:
|
||||
version "1.17.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
|
||||
@ -308,14 +274,6 @@ rollup@^2.32.1:
|
||||
optionalDependencies:
|
||||
fsevents "~2.1.2"
|
||||
|
||||
scheduler@^0.20.1:
|
||||
version "0.20.1"
|
||||
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
|
||||
integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
semver@^6.0.0:
|
||||
version "6.3.0"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user