From c56f11e78afd609fb4893b9e607f11e6c36968a6 Mon Sep 17 00:00:00 2001 From: Dm1tr1y147 Date: Wed, 28 Oct 2020 18:56:02 +0500 Subject: [PATCH] Added calendar days array constructor including day number and event list --- example/src/App.tsx | 4 +- example/src/events.json | 8 +++ example/yarn.lock | 136 ++------------------------------------ src/CalendarInContext.tsx | 62 +++++++++++++++++ src/Day.tsx | 18 +++++ src/context.tsx | 47 +++++++------ src/index.tsx | 6 +- src/types.ts | 50 ++++++++++++++ src/utils.ts | 31 +++++++++ tsconfig.json | 2 +- yarn.lock | 42 ------------ 11 files changed, 209 insertions(+), 197 deletions(-) create mode 100644 example/src/events.json create mode 100644 src/CalendarInContext.tsx create mode 100644 src/Day.tsx create mode 100644 src/types.ts create mode 100644 src/utils.ts diff --git a/example/src/App.tsx b/example/src/App.tsx index e3418e7..64c2e79 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,10 +1,12 @@ import React from "react"; import Calendar from "react-eventful-calendar"; +import events from './events.json' + function App() { return (
- +
); } diff --git a/example/src/events.json b/example/src/events.json new file mode 100644 index 0000000..9f5f8e0 --- /dev/null +++ b/example/src/events.json @@ -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)" + } +] diff --git a/example/yarn.lock b/example/yarn.lock index 6460650..c455357 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -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" diff --git a/src/CalendarInContext.tsx b/src/CalendarInContext.tsx new file mode 100644 index 0000000..c57f838 --- /dev/null +++ b/src/CalendarInContext.tsx @@ -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 = ({ eventList }) => { + const context = useContext(CalendarContext) + + const { month } = context.state + + const [monthDaysState, setMonthDaysState] = useState([]) + + 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((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 ( +
+ {monthDaysState.map((day, dayIndex) => ( + month.numberOfDays + month.firstDayOfWeek - 2 + } + /> + ))} +
+ ) +} + +export default CalendarInContext diff --git a/src/Day.tsx b/src/Day.tsx new file mode 100644 index 0000000..686a5ae --- /dev/null +++ b/src/Day.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +import { IDayProps } from './types' + +const Day: React.FC = ({ dayNumber, events, shaded }) => { + return ( +
+
{dayNumber}
+
    + {events.map((event, key) => ( +
  • {event.title}
    • + ))} +
+
+ ) +} + +export default Day diff --git a/src/context.tsx b/src/context.tsx index 0d7fd14..2d30843 100644 --- a/src/context.tsx +++ b/src/context.tsx @@ -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> -} +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({ +const CalendarContext = createContext({ state: initialCalendarContextState, }) -export const CalendarProvider: React.FC = ({ children }) => { +const CalendarProvider: React.FC = ({ children }) => { const [state, setState] = useState( initialCalendarContextState ) + const [now] = useState(new Date()) + + useEffect( + () => + setState((prev) => ({ + ...prev, + month: getCurrentMonth(now), + year: now.getFullYear(), + day: now.getDate(), + })), + [] + ) + return ( {children} ) } + +export { CalendarContext, CalendarProvider } diff --git a/src/index.tsx b/src/index.tsx index ec3932e..d90c12c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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 = ({ eventList }) => { return ( -
+ ) } diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..cce6f68 --- /dev/null +++ b/src/types.ts @@ -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> +} + +// 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 +} diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..ae29b21 --- /dev/null +++ b/src/utils.ts @@ -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 => { + 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 } diff --git a/tsconfig.json b/tsconfig.json index 6228e2d..f078017 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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, diff --git a/yarn.lock b/yarn.lock index 2531899..22482ce 100644 --- a/yarn.lock +++ b/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"