├── example ├── .npmignore ├── index.html ├── tsconfig.json ├── package.json └── index.tsx ├── src ├── tailwind.css ├── index.tsx ├── shared.ts ├── Monthly │ ├── MonthlyEventItems.tsx │ ├── MonthlyCalendar.tsx │ └── MonthlyBody.tsx └── Weekly │ ├── WeeklyEventItems.tsx │ └── WeeklyCalendar.tsx ├── docs ├── favicon.ico ├── main.a929e9ffade578b84d8a.bundle.js.map ├── main.e8fd7269af112155be27.bundle.js.map ├── runtime~main.a929e9ffade578b84d8a.bundle.js.map ├── runtime~main.e8fd7269af112155be27.bundle.js.map ├── vendors~main.a929e9ffade578b84d8a.bundle.js.map ├── vendors~main.e8fd7269af112155be27.bundle.js.map ├── index.html ├── runtime~main.6a9b04192e3176eff72a.bundle.js ├── runtime~main.a929e9ffade578b84d8a.bundle.js ├── runtime~main.e8fd7269af112155be27.bundle.js ├── vendors~main.4abf29e4f956d5befb41.bundle.js.LICENSE.txt ├── vendors~main.a929e9ffade578b84d8a.bundle.js.LICENSE.txt ├── vendors~main.e8fd7269af112155be27.bundle.js.LICENSE.txt ├── iframe.html └── main.a929e9ffade578b84d8a.bundle.js ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── storybook-static ├── favicon.ico ├── main.a929e9ffade578b84d8a.bundle.js.map ├── runtime~main.a929e9ffade578b84d8a.bundle.js.map ├── vendors~main.a929e9ffade578b84d8a.bundle.js.map ├── index.html ├── runtime~main.6a9b04192e3176eff72a.bundle.js ├── runtime~main.a929e9ffade578b84d8a.bundle.js ├── vendors~main.4abf29e4f956d5befb41.bundle.js.LICENSE.txt ├── vendors~main.a929e9ffade578b84d8a.bundle.js.LICENSE.txt ├── iframe.html └── main.a929e9ffade578b84d8a.bundle.js ├── postcss.config.js ├── .storybook ├── preview.js └── main.js ├── tsdx.config.js ├── tailwind.config.js ├── tw-check.js ├── .github └── workflows │ ├── main.yml │ └── storybook.yml ├── test ├── setup.js ├── Weekly │ ├── TestComponents.tsx │ ├── OmitDays.test.tsx │ └── Events.test.tsx └── Monthly │ ├── OmitDays.test.tsx │ ├── Navigation.test.tsx │ ├── TestComponents.tsx │ ├── StartOfMonthPadding.test.tsx │ └── Events.test.tsx ├── LICENSE ├── stories ├── dummyEvents.ts ├── Weekly.stories.tsx └── Monthly.stories.tsx ├── tsconfig.json ├── package.json └── README.md /example/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | dist -------------------------------------------------------------------------------- /src/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zackify/react-calendar/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | 'prettier/prettier': 0, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | .cache 5 | dist 6 | .parcel-cache 7 | coverage -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | test 2 | storybook-static 3 | stories 4 | example 5 | docs 6 | .storybook 7 | .github -------------------------------------------------------------------------------- /storybook-static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zackify/react-calendar/HEAD/storybook-static/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /docs/main.a929e9ffade578b84d8a.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.a929e9ffade578b84d8a.bundle.js","sources":["webpack:///main.a929e9ffade578b84d8a.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /docs/main.e8fd7269af112155be27.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.e8fd7269af112155be27.bundle.js","sources":["webpack:///main.e8fd7269af112155be27.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /storybook-static/main.a929e9ffade578b84d8a.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.a929e9ffade578b84d8a.bundle.js","sources":["webpack:///main.a929e9ffade578b84d8a.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /docs/runtime~main.a929e9ffade578b84d8a.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"runtime~main.a929e9ffade578b84d8a.bundle.js","sources":["webpack:///runtime~main.a929e9ffade578b84d8a.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /docs/runtime~main.e8fd7269af112155be27.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"runtime~main.e8fd7269af112155be27.bundle.js","sources":["webpack:///runtime~main.e8fd7269af112155be27.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /docs/vendors~main.a929e9ffade578b84d8a.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vendors~main.a929e9ffade578b84d8a.bundle.js","sources":["webpack:///vendors~main.a929e9ffade578b84d8a.bundle.js"],"mappings":";AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /docs/vendors~main.e8fd7269af112155be27.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vendors~main.e8fd7269af112155be27.bundle.js","sources":["webpack:///vendors~main.e8fd7269af112155be27.bundle.js"],"mappings":";AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /storybook-static/runtime~main.a929e9ffade578b84d8a.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"runtime~main.a929e9ffade578b84d8a.bundle.js","sources":["webpack:///runtime~main.a929e9ffade578b84d8a.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /storybook-static/vendors~main.a929e9ffade578b84d8a.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vendors~main.a929e9ffade578b84d8a.bundle.js","sources":["webpack:///vendors~main.a929e9ffade578b84d8a.bundle.js"],"mappings":";AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Monthly/MonthlyCalendar'; 2 | export * from './Monthly/MonthlyBody'; 3 | export * from './Monthly/MonthlyEventItems'; 4 | 5 | export * from './Weekly/WeeklyCalendar'; 6 | export * from './Weekly/WeeklyEventItems'; 7 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters 2 | export const parameters = { 3 | // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args 4 | actions: { argTypesRegex: '^on.*' }, 5 | }; 6 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'], 3 | addons: ['@storybook/addon-links', '@storybook/addon-essentials'], 4 | // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration 5 | typescript: { 6 | check: true, // type-check stories during Storybook build 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Playground 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /tsdx.config.js: -------------------------------------------------------------------------------- 1 | const postcss = require('rollup-plugin-postcss'); 2 | 3 | module.exports = { 4 | rollup(config, options) { 5 | config.plugins.push( 6 | postcss({ 7 | config: { 8 | path: './postcss.config.js', 9 | }, 10 | extensions: ['.css'], 11 | minimize: true, 12 | inject: { 13 | insertAt: 'top', 14 | }, 15 | }) 16 | ); 17 | return config; 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | prefix: 'rc-', 3 | corePlugins: { 4 | preflight: process.env.TW_PREFLIGHT == 'false' ? false : true, 5 | }, 6 | purge: { 7 | content: ['./src/**/*.tsx'], 8 | options: { 9 | keyframes: true, 10 | fontFace: true, 11 | }, 12 | }, 13 | darkMode: false, // or 'media' or 'class' 14 | theme: { 15 | extend: {}, 16 | }, 17 | variants: { 18 | extend: {}, 19 | }, 20 | plugins: [], 21 | }; 22 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": false, 4 | "target": "es5", 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "moduleResolution": "node", 8 | "noImplicitAny": false, 9 | "noUnusedLocals": false, 10 | "noUnusedParameters": false, 11 | "removeComments": true, 12 | "strictNullChecks": true, 13 | "preserveConstEnums": true, 14 | "sourceMap": true, 15 | "lib": ["es2015", "es2016", "dom"], 16 | "types": ["node"] 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/shared.ts: -------------------------------------------------------------------------------- 1 | import { Locale } from 'date-fns'; 2 | import { enUS } from 'date-fns/locale'; 3 | 4 | type DaysInWeekProps = { 5 | locale?: Locale; 6 | }; 7 | 8 | export const daysInWeek = ({ locale = enUS }: DaysInWeekProps) => [ 9 | { day: 0, label: locale.localize?.day(0) }, 10 | { day: 1, label: locale.localize?.day(1) }, 11 | { day: 2, label: locale.localize?.day(2) }, 12 | { day: 3, label: locale.localize?.day(3) }, 13 | { day: 4, label: locale.localize?.day(4) }, 14 | { day: 5, label: locale.localize?.day(5) }, 15 | { day: 6, label: locale.localize?.day(6) }, 16 | ]; 17 | -------------------------------------------------------------------------------- /src/Monthly/MonthlyEventItems.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /* 4 | Over time there may be more useful event item components that can be included 5 | in the library 6 | */ 7 | 8 | type DefaultEventItemProps = { 9 | title: string; 10 | date: string; 11 | }; 12 | 13 | export const DefaultMonthlyEventItem = ({ 14 | title, 15 | date, 16 | }: DefaultEventItemProps) => { 17 | return ( 18 |
  • 19 |
    20 |

    {title}

    21 |

    {date}

    22 |
    23 |
    • 24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /src/Weekly/WeeklyEventItems.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /* 4 | Over time there may be more useful event item components that can be included 5 | in the library 6 | */ 7 | 8 | type DefaultWeeklyEventItemProps = { 9 | title: string; 10 | date: string; 11 | }; 12 | 13 | export const DefaultWeeklyEventItem = ({ 14 | title, 15 | date, 16 | }: DefaultWeeklyEventItemProps) => { 17 | return ( 18 |
  • 19 |
    20 |

    {title}

    21 |

    {date}

    22 |
    23 |
    • 24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": { 11 | "react-app-polyfill": "^1.0.0" 12 | }, 13 | "alias": { 14 | "react": "../node_modules/react", 15 | "react-dom": "../node_modules/react-dom/profiling", 16 | "scheduler/tracing": "../node_modules/scheduler/tracing-profiling" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^16.9.11", 20 | "@types/react-dom": "^16.8.4", 21 | "parcel": "^2.0.0-beta.1", 22 | "typescript": "^3.4.5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /tw-check.js: -------------------------------------------------------------------------------- 1 | let localDir = __dirname; 2 | let installedDir = process.env.INIT_CWD; 3 | 4 | const fs = require('fs'); 5 | 6 | let check = () => { 7 | if (localDir === installedDir) return; 8 | 9 | //if they are not using tailwind return early 10 | if (!fs.existsSync(`${installedDir}/tailwind.config.js`) && !fs.existsSync(`${installedDir}/tailwind.config.ts`)) 11 | return console.log('no tw'); 12 | 13 | const files = [ 14 | 'react-calendar.cjs.development.js', 15 | 'react-calendar.cjs.production.min.js', 16 | 'react-calendar.esm.js', 17 | ]; 18 | 19 | for (let file of files) { 20 | let filePath = `${localDir}/dist/${file}`; 21 | let contents = fs.readFileSync(filePath, { encoding: 'utf8' }); 22 | fs.writeFileSync(filePath, contents.replace(/rc-/g, '')); 23 | } 24 | }; 25 | check(); 26 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Tests 2 | on: [push] 3 | jobs: 4 | build: 5 | name: test on Node ${{ matrix.node }} and ${{ matrix.os }} 6 | 7 | runs-on: ${{ matrix.os }} 8 | strategy: 9 | matrix: 10 | node: ['18.x'] 11 | os: [ubuntu-latest] 12 | 13 | steps: 14 | - name: Checkout repo 15 | uses: actions/checkout@v2 16 | 17 | - name: Use Node ${{ matrix.node }} 18 | uses: actions/setup-node@v1 19 | with: 20 | node-version: ${{ matrix.node }} 21 | 22 | - name: Install deps and build (with cache) 23 | uses: bahmutov/npm-install@v1 24 | 25 | - name: Lint 26 | run: yarn lint 27 | 28 | - name: Test 29 | run: yarn test --ci --coverage --maxWorkers=2 30 | 31 | - name: Build 32 | run: yarn build 33 | -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | // Set the year to 2021 globally so that these tests pass if they run in future years 2 | var FakeTimers = require('@sinonjs/fake-timers'); 3 | FakeTimers.install({ now: new Date(2021, 2, 2) }); 4 | 5 | jest.mock( 6 | 'date-fns', 7 | () => 8 | new Proxy( 9 | {}, 10 | { 11 | get: (_, method) => { 12 | return (date, ...args) => { 13 | if (!date.toISOString) { 14 | return jest.requireActual('date-fns')[method](date, ...args); 15 | } 16 | const [year, month, day] = date 17 | .toISOString() 18 | .substr(0, 10) 19 | .split('-'); 20 | 21 | return jest 22 | .requireActual('date-fns') 23 | [method](new Date(year, month - 1, day), ...args); 24 | }; 25 | }, 26 | } 27 | ) 28 | ); 29 | -------------------------------------------------------------------------------- /.github/workflows/storybook.yml: -------------------------------------------------------------------------------- 1 | name: Build Storybook for GH Pages 2 | on: 3 | push: 4 | paths: ['stories/**', 'src/**'] # Trigger the action only when files change in the folders defined here 5 | jobs: 6 | build-and-deploy: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Checkout 🛎️ 10 | uses: actions/checkout@v2.3.1 11 | with: 12 | persist-credentials: false 13 | - name: Install and Build 🔧 14 | run: | # Install npm packages and build the Storybook files 15 | yarn 16 | yarn build-storybook 17 | - name: Deploy 🚀 18 | uses: JamesIves/github-pages-deploy-action@3.6.2 19 | with: 20 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 21 | BRANCH: master 22 | FOLDER: storybook-static # The folder that the build-storybook script generates files. 23 | CLEAN: true # Automatically remove deleted files from the deploy branch 24 | TARGET_FOLDER: docs # The folder that we serve our Storybook files from 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Zach Silveira 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /stories/dummyEvents.ts: -------------------------------------------------------------------------------- 1 | import { 2 | startOfMonth, 3 | addMonths, 4 | addHours, 5 | subHours, 6 | addDays, 7 | subDays, 8 | } from 'date-fns'; 9 | 10 | export type EventType = { 11 | title: string; 12 | date: Date; 13 | }; 14 | /* 15 | You should load an array of events per month from your backend 16 | This lets us render the calendar without loading too much at once 17 | Return an array of items with the date of the event, 18 | and any extra properties you want 19 | */ 20 | 21 | export const events: { [key: string]: EventType[] } = { 22 | firstMonth: [ 23 | { title: 'Call John', date: subHours(new Date(), 2) }, 24 | { title: 'Call John', date: subHours(new Date(), 1) }, 25 | { title: 'Meeting with Bob', date: new Date() }, 26 | { title: 'Bike Appt', date: addHours(new Date(), 3) }, 27 | { title: 'John Hilmer', date: addDays(new Date(), 3) }, 28 | { title: 'Jane Call', date: subDays(new Date(), 4) }, 29 | { title: 'Sound alarm', date: addDays(new Date(), 6) }, 30 | { title: 'Soccer Practice', date: subDays(new Date(), 3) }, 31 | { title: 'Alert', date: addHours(subDays(new Date(), 4), 4) }, 32 | { title: 'Donation', date: addDays(new Date(), 6) }, 33 | ], 34 | secondMonth: [ 35 | { title: 'Meeting Next Month', date: addMonths(new Date(), 1) }, 36 | ], 37 | }; 38 | -------------------------------------------------------------------------------- /test/Weekly/TestComponents.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { format } from 'date-fns'; 3 | import { 4 | WeeklyCalendar, 5 | WeeklyDays, 6 | WeeklyBody, 7 | DefaultWeeklyEventItem, 8 | WeeklyContainer, 9 | } from '../../src'; 10 | 11 | type Props = { 12 | week: Date; 13 | omitDays?: number[]; 14 | locale?: Locale; 15 | events: { title: string; date: Date }[]; 16 | }; 17 | export const WeeklyCalendarTest = ({ 18 | week, 19 | events, 20 | omitDays, 21 | locale, 22 | }: Props) => { 23 | return ( 24 |
    25 | 26 | 27 | 28 | ( 31 | 40 | )} 41 | /> 42 | 43 | 44 |
    45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /example/index.tsx: -------------------------------------------------------------------------------- 1 | import { format, startOfMonth } from 'date-fns'; 2 | import * as React from 'react'; 3 | import { useState } from 'react'; 4 | import * as ReactDOM from 'react-dom'; 5 | import { events } from '../stories/dummyEvents'; 6 | import { 7 | MonthlyCalendar, 8 | MonthlyNav, 9 | MonthlyBody, 10 | DefaultMonthlyEventItem, 11 | } from '../src'; 12 | import '../dist/calendar-tailwind.css'; 13 | 14 | export const MyMonthlyCalendar = () => { 15 | let [currentMonth, setCurrentMonth] = useState( 16 | startOfMonth(new Date()) 17 | ); 18 | let eventItems = events[currentMonth.toISOString()]; 19 | 20 | return ( 21 | setCurrentMonth(date)} 24 | > 25 | 26 | 29 | data.map((item, index) => ( 30 | 35 | )) 36 | } 37 | /> 38 | 39 | ); 40 | }; 41 | 42 | const App = () => { 43 | return ( 44 |
    45 | 46 |
    47 | ); 48 | }; 49 | 50 | ReactDOM.render(, document.getElementById('root')); 51 | -------------------------------------------------------------------------------- /test/Weekly/OmitDays.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { screen, render } from '@testing-library/react'; 3 | import { subDays, subHours } from 'date-fns'; 4 | import { WeeklyCalendarTest } from './TestComponents'; 5 | 6 | let testDate = '2021-03-03T00:39:27.448Z'; 7 | test('Renders all days of the week', () => { 8 | render( 9 | 17 | ); 18 | 19 | expect(screen.getAllByLabelText('Day of Week').length).toEqual(7); 20 | }); 21 | 22 | test('Omits the weekends', () => { 23 | render( 24 | 33 | ); 34 | 35 | expect(screen.getAllByLabelText('Day of Week').length).toEqual(5); 36 | 37 | expect(screen.queryByText('Saturday 6th')).toEqual(null); 38 | expect(screen.queryByText('Sunday 28th')).toEqual(null); 39 | }); 40 | -------------------------------------------------------------------------------- /test/Monthly/OmitDays.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { screen, render } from '@testing-library/react'; 3 | import { startOfMonth } from 'date-fns'; 4 | import { MonthlyCalendarTest } from './TestComponents'; 5 | 6 | test('Renders all 7 days', () => { 7 | render( 8 | true} 12 | /> 13 | ); 14 | 15 | let totalDays = screen.getAllByLabelText('Day of Week'); 16 | 17 | expect(totalDays.length).toEqual(7); 18 | }); 19 | 20 | describe('March 2021', () => { 21 | test('Omits sunday', () => { 22 | render( 23 | true} 28 | /> 29 | ); 30 | 31 | let totalDays = screen.getAllByLabelText('Day of Week'); 32 | expect(totalDays.length).toEqual(6); 33 | 34 | //check that the header is gone 35 | let sunday = screen.queryByText('Sunday'); 36 | expect(sunday).toEqual(null); 37 | 38 | //ensure the days that fall on sunday are also gone 39 | expect(screen.queryByText('7')).toEqual(null); 40 | expect(screen.queryByText('14')).toEqual(null); 41 | expect(screen.queryByText('21')).toEqual(null); 42 | expect(screen.queryByText('28')).toEqual(null); 43 | }); 44 | }); 45 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs 3 | "include": ["src", "types"], 4 | "compilerOptions": { 5 | "module": "esnext", 6 | "lib": ["dom", "esnext"], 7 | "importHelpers": true, 8 | // output .d.ts declaration files for consumers 9 | "declaration": true, 10 | // output .js.map sourcemap files for consumers 11 | "sourceMap": true, 12 | // match output dir to input dir. e.g. dist/index instead of dist/src/index 13 | "rootDir": "./src", 14 | // stricter type-checking for stronger correctness. Recommended by TS 15 | "strict": true, 16 | // linter checks for common issues 17 | "noImplicitReturns": true, 18 | "noFallthroughCasesInSwitch": true, 19 | // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | // use Node's module resolution algorithm, instead of the legacy TS one 23 | "moduleResolution": "node", 24 | // transpile JSX to React.createElement 25 | "jsx": "react", 26 | // interop between ESM and CJS modules. Recommended by TS 27 | "esModuleInterop": true, 28 | // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS 29 | "skipLibCheck": true, 30 | // error out if import and file system have a casing mismatch. Recommended by TS 31 | "forceConsistentCasingInFileNames": true, 32 | // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc` 33 | "noEmit": true, 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /test/Monthly/Navigation.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { screen, render, fireEvent } from '@testing-library/react'; 3 | import { startOfMonth } from 'date-fns'; 4 | import { MonthlyCalendarWithDateChange } from './TestComponents'; 5 | 6 | test('Previous goes back 1 month', () => { 7 | let spy = jest.fn(); 8 | render( 9 | 15 | ); 16 | 17 | fireEvent.click(screen.getByText('Previous')); 18 | screen.getByText('March'); 19 | expect(spy.mock.calls[0][0].toISOString()).toContain('2021-03-01'); 20 | }); 21 | 22 | test('Next goes forward 1 month', () => { 23 | let spy = jest.fn(); 24 | render( 25 | 31 | ); 32 | 33 | fireEvent.click(screen.getByText('Next')); 34 | screen.getByText('May'); 35 | 36 | expect(spy.mock.calls[0][0].toISOString()).toContain('2021-05-01'); 37 | }); 38 | 39 | test('If on the previous year, it shows the year with month', () => { 40 | render( 41 | 46 | ); 47 | 48 | fireEvent.click(screen.getByText('Previous')); 49 | fireEvent.click(screen.getByText('Previous')); 50 | fireEvent.click(screen.getByText('Previous')); 51 | screen.getByText('December 2020'); 52 | }); 53 | 54 | test('If on the next year, it shows the year with month', () => { 55 | render( 56 | 61 | ); 62 | 63 | fireEvent.click(screen.getByText('Next')); 64 | screen.getByText('January 2022'); 65 | }); 66 | -------------------------------------------------------------------------------- /test/Monthly/TestComponents.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { format } from 'date-fns'; 3 | import { 4 | DefaultMonthlyEventItem, 5 | MonthlyBody, 6 | MonthlyCalendar, 7 | MonthlyDay, 8 | MonthlyNav, 9 | } from '../../src'; 10 | 11 | type Props = { 12 | locale?: Locale; 13 | currentMonth: Date; 14 | onCurrentMonthChange: (date: Date) => any; 15 | omitDays?: number[]; 16 | events: { title: string; date: Date }[]; 17 | }; 18 | 19 | export const MonthlyCalendarTest = ({ 20 | locale, 21 | currentMonth, 22 | onCurrentMonthChange, 23 | omitDays, 24 | events, 25 | }: Props) => { 26 | return ( 27 | 32 | 33 | 34 | 35 | renderDay={data => 36 | data.map((item, index) => ( 37 | 42 | )) 43 | } 44 | /> 45 | 46 | 47 | ); 48 | }; 49 | 50 | type WithDateChangeProps = Omit & { 51 | onCurrentMonthChange?: (date: Date) => any; 52 | }; 53 | 54 | export const MonthlyCalendarWithDateChange = ({ 55 | omitDays, 56 | events, 57 | currentMonth: initialMonth, 58 | onCurrentMonthChange, 59 | }: WithDateChangeProps) => { 60 | let [currentMonth, setCurrentMonth] = useState(initialMonth); 61 | return ( 62 | { 67 | setCurrentMonth(date); 68 | onCurrentMonthChange?.(date); 69 | }} 70 | /> 71 | ); 72 | }; 73 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Storybook
    -------------------------------------------------------------------------------- /storybook-static/index.html: -------------------------------------------------------------------------------- 1 | Storybook
    -------------------------------------------------------------------------------- /src/Monthly/MonthlyCalendar.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | eachDayOfInterval, 3 | startOfMonth, 4 | endOfMonth, 5 | format, 6 | subMonths, 7 | addMonths, 8 | getYear, 9 | } from 'date-fns'; 10 | import React, { ReactNode, useContext } from 'react'; 11 | 12 | type CalendarState = { 13 | days: Date[]; 14 | currentMonth: Date; 15 | locale?: Locale; 16 | onCurrentMonthChange: (date: Date) => any; 17 | }; 18 | 19 | const MonthlyCalendarContext = React.createContext( 20 | {} as CalendarState 21 | ); 22 | 23 | export const useMonthlyCalendar = () => useContext(MonthlyCalendarContext); 24 | 25 | type Props = { 26 | locale?: Locale; 27 | children: ReactNode; 28 | currentMonth: Date; 29 | onCurrentMonthChange: (date: Date) => any; 30 | }; 31 | 32 | export const MonthlyCalendar = ({ 33 | locale, 34 | currentMonth, 35 | onCurrentMonthChange, 36 | children, 37 | }: Props) => { 38 | let monthStart = startOfMonth(currentMonth); 39 | let days = eachDayOfInterval({ 40 | start: monthStart, 41 | end: endOfMonth(monthStart), 42 | }); 43 | 44 | return ( 45 | 53 | {children} 54 | 55 | ); 56 | }; 57 | 58 | export const MonthlyNav = () => { 59 | let { locale, currentMonth, onCurrentMonthChange } = useMonthlyCalendar(); 60 | 61 | return ( 62 |
    63 | 69 |
    73 | {format( 74 | currentMonth, 75 | getYear(currentMonth) === getYear(new Date()) ? 'LLLL' : 'LLLL yyyy', 76 | { locale } 77 | )} 78 |
    79 | 85 |
    86 | ); 87 | }; 88 | -------------------------------------------------------------------------------- /test/Monthly/StartOfMonthPadding.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { screen, render } from '@testing-library/react'; 3 | import { startOfMonth } from 'date-fns'; 4 | import { MonthlyCalendarTest } from './TestComponents'; 5 | 6 | describe('March 2021', () => { 7 | test('renders 1 empty day', () => { 8 | render( 9 | true} 13 | /> 14 | ); 15 | 16 | let totalPadded = screen.getAllByLabelText('Empty Day'); 17 | 18 | expect(totalPadded.length).toEqual(1); 19 | }); 20 | test('renders 0 empty days if I omit sunday', () => { 21 | render( 22 | true} 27 | /> 28 | ); 29 | 30 | let totalPadded = screen.queryAllByLabelText('Empty Day'); 31 | 32 | expect(totalPadded.length).toEqual(0); 33 | }); 34 | }); 35 | describe('April 2021', () => { 36 | test('renders 4 empty days', () => { 37 | render( 38 | true} 42 | /> 43 | ); 44 | 45 | let totalPadded = screen.getAllByLabelText('Empty Day'); 46 | 47 | expect(totalPadded.length).toEqual(4); 48 | }); 49 | test('renders 3 empty days if I omit sunday', () => { 50 | render( 51 | true} 56 | /> 57 | ); 58 | 59 | let totalPadded = screen.queryAllByLabelText('Empty Day'); 60 | 61 | expect(totalPadded.length).toEqual(3); 62 | }); 63 | test('renders 2 empty days if I omit sunday and monday', () => { 64 | render( 65 | true} 70 | /> 71 | ); 72 | 73 | let totalPadded = screen.queryAllByLabelText('Empty Day'); 74 | 75 | expect(totalPadded.length).toEqual(2); 76 | }); 77 | }); 78 | -------------------------------------------------------------------------------- /stories/Weekly.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Meta, Story } from '@storybook/react'; 3 | import { addDays, format, startOfWeek, subDays, subHours } from 'date-fns'; 4 | import { 5 | WeeklyCalendar, 6 | WeeklyDays, 7 | WeeklyBody, 8 | DefaultWeeklyEventItem, 9 | WeeklyContainer, 10 | WeeklyResponsiveContainer, 11 | } from '../src'; 12 | import '../src/tailwind.css'; 13 | 14 | export const BasicWeeklyCalendar: Story = args => { 15 | return ( 16 | 17 | 18 | 19 | 20 | ( 38 | 47 | )} 48 | /> 49 | 50 | 51 | 52 | ); 53 | }; 54 | 55 | export default { 56 | title: 'Weekly Calendar', 57 | component: BasicWeeklyCalendar, 58 | parameters: { 59 | controls: { expanded: true }, 60 | }, 61 | argTypes: { 62 | hideWeekend: { 63 | description: 64 | 'Sets an array of days to hide, 0 is Sunday, 1 is monday, etc', 65 | control: 'boolean', 66 | }, 67 | week: { 68 | description: 'The current week to view', 69 | control: 'date', 70 | defaultValue: startOfWeek(new Date()), 71 | }, 72 | }, 73 | } as Meta; 74 | -------------------------------------------------------------------------------- /docs/runtime~main.6a9b04192e3176eff72a.bundle.js: -------------------------------------------------------------------------------- 1 | !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i=10" 14 | }, 15 | "scripts": { 16 | "start": "tsdx watch", 17 | "build": "tsdx build && npm run build-tailwind", 18 | "test": "tsdx test", 19 | "postinstall": "node tw-check.js", 20 | "lint": "tsdx lint", 21 | "prepare": "tsdx build && npm run build-tailwind", 22 | "size": "size-limit", 23 | "analyze": "size-limit --why", 24 | "storybook": "start-storybook -p 6006", 25 | "build-storybook": "build-storybook", 26 | "build-tailwind": "NODE_ENV=production tailwindcss build src/tailwind.css -o dist/calendar-tailwind.css && NODE_ENV=production TW_PREFLIGHT=false tailwindcss build src/tailwind.css -o dist/calendar-tailwind-no-reset.css" 27 | }, 28 | "peerDependencies": { 29 | "date-fns": ">=2", 30 | "react": ">=16" 31 | }, 32 | "husky": { 33 | "hooks": { 34 | "pre-commit": "tsdx lint" 35 | } 36 | }, 37 | "prettier": { 38 | "printWidth": 80, 39 | "semi": true, 40 | "singleQuote": true, 41 | "trailingComma": "es5" 42 | }, 43 | "author": "Zach Silveira", 44 | "module": "dist/react-calendar.esm.js", 45 | "size-limit": [ 46 | { 47 | "path": "dist/react-calendar.cjs.production.min.js", 48 | "limit": "10 KB" 49 | }, 50 | { 51 | "path": "dist/react-calendar.esm.js", 52 | "limit": "10 KB" 53 | } 54 | ], 55 | "devDependencies": { 56 | "@babel/core": "^7.13.8", 57 | "@sinonjs/fake-timers": "^7.0.2", 58 | "@size-limit/preset-small-lib": "^4.10.1", 59 | "@storybook/addon-essentials": "^6.1.21", 60 | "@storybook/addon-info": "^5.3.21", 61 | "@storybook/addon-links": "^6.1.21", 62 | "@storybook/addons": "^6.1.21", 63 | "@storybook/react": "^6.1.21", 64 | "@tailwindcss/postcss7-compat": "^2.0.3", 65 | "@testing-library/jest-dom": "^5.11.9", 66 | "@testing-library/react": "^11.2.5", 67 | "@types/jest": "^26.0.20", 68 | "@types/react": "^17.0.3", 69 | "@types/react-dom": "^17.0.1", 70 | "autoprefixer": "^9", 71 | "babel-loader": "^8.2.2", 72 | "date-fns": "^2.19.0", 73 | "husky": "^5.1.3", 74 | "identity-obj-proxy": "^3.0.0", 75 | "postcss": "^7", 76 | "react": "^17.0.1", 77 | "react-dom": "^17.0.1", 78 | "react-is": "^17.0.1", 79 | "rollup-plugin-postcss": "^4.0.0", 80 | "size-limit": "^4.10.1", 81 | "tailwindcss": "npm:@tailwindcss/postcss7-compat", 82 | "tsdx": "^0.14.1", 83 | "tslib": "^2.1.0", 84 | "typescript": "^4.2.3" 85 | }, 86 | "jest": { 87 | "setupFiles": [ 88 | "./test/setup.js" 89 | ], 90 | "moduleNameMapper": { 91 | "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", 92 | "\\.(css|less|scss|sass)$": "identity-obj-proxy" 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /docs/vendors~main.4abf29e4f956d5befb41.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | Copyright (c) 2017 Jed Watson. 9 | Licensed under the MIT License (MIT), see 10 | http://jedwatson.github.io/classnames 11 | */ 12 | 13 | /*! 14 | * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io) 15 | * 16 | * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me) 17 | * All Rights Reserved. Apache Software License 2.0 18 | * 19 | * http://www.apache.org/licenses/LICENSE-2.0 20 | */ 21 | 22 | /*! 23 | * OverlayScrollbars 24 | * https://github.com/KingSora/OverlayScrollbars 25 | * 26 | * Version: 1.12.0 27 | * 28 | * Copyright KingSora | Rene Haas. 29 | * https://github.com/KingSora 30 | * 31 | * Released under the MIT license. 32 | * Date: 05.04.2020 33 | */ 34 | 35 | /*! 36 | * https://github.com/es-shims/es5-shim 37 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 38 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 39 | */ 40 | 41 | /*! 42 | * https://github.com/paulmillr/es6-shim 43 | * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) 44 | * and contributors, MIT License 45 | * es6-shim: v0.35.4 46 | * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE 47 | * Details and documentation: 48 | * https://github.com/paulmillr/es6-shim/ 49 | */ 50 | 51 | /*! 52 | * isobject 53 | * 54 | * Copyright (c) 2014-2017, Jon Schlinkert. 55 | * Released under the MIT License. 56 | */ 57 | 58 | /** 59 | * Prism: Lightweight, robust, elegant syntax highlighting 60 | * 61 | * @license MIT 62 | * @author Lea Verou 63 | * @namespace 64 | * @public 65 | */ 66 | 67 | /** @license React v0.19.1 68 | * scheduler.production.min.js 69 | * 70 | * Copyright (c) Facebook, Inc. and its affiliates. 71 | * 72 | * This source code is licensed under the MIT license found in the 73 | * LICENSE file in the root directory of this source tree. 74 | */ 75 | 76 | /** @license React v16.13.1 77 | * react-dom.production.min.js 78 | * 79 | * Copyright (c) Facebook, Inc. and its affiliates. 80 | * 81 | * This source code is licensed under the MIT license found in the 82 | * LICENSE file in the root directory of this source tree. 83 | */ 84 | 85 | /** @license React v16.13.1 86 | * react-is.production.min.js 87 | * 88 | * Copyright (c) Facebook, Inc. and its affiliates. 89 | * 90 | * This source code is licensed under the MIT license found in the 91 | * LICENSE file in the root directory of this source tree. 92 | */ 93 | 94 | /** @license React v16.13.1 95 | * react.production.min.js 96 | * 97 | * Copyright (c) Facebook, Inc. and its affiliates. 98 | * 99 | * This source code is licensed under the MIT license found in the 100 | * LICENSE file in the root directory of this source tree. 101 | */ 102 | 103 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 104 | 105 | //! © 2018 Angry Bytes and contributors. MIT licensed. 106 | -------------------------------------------------------------------------------- /storybook-static/vendors~main.4abf29e4f956d5befb41.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | Copyright (c) 2017 Jed Watson. 9 | Licensed under the MIT License (MIT), see 10 | http://jedwatson.github.io/classnames 11 | */ 12 | 13 | /*! 14 | * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io) 15 | * 16 | * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me) 17 | * All Rights Reserved. Apache Software License 2.0 18 | * 19 | * http://www.apache.org/licenses/LICENSE-2.0 20 | */ 21 | 22 | /*! 23 | * OverlayScrollbars 24 | * https://github.com/KingSora/OverlayScrollbars 25 | * 26 | * Version: 1.12.0 27 | * 28 | * Copyright KingSora | Rene Haas. 29 | * https://github.com/KingSora 30 | * 31 | * Released under the MIT license. 32 | * Date: 05.04.2020 33 | */ 34 | 35 | /*! 36 | * https://github.com/es-shims/es5-shim 37 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 38 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 39 | */ 40 | 41 | /*! 42 | * https://github.com/paulmillr/es6-shim 43 | * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) 44 | * and contributors, MIT License 45 | * es6-shim: v0.35.4 46 | * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE 47 | * Details and documentation: 48 | * https://github.com/paulmillr/es6-shim/ 49 | */ 50 | 51 | /*! 52 | * isobject 53 | * 54 | * Copyright (c) 2014-2017, Jon Schlinkert. 55 | * Released under the MIT License. 56 | */ 57 | 58 | /** 59 | * Prism: Lightweight, robust, elegant syntax highlighting 60 | * 61 | * @license MIT 62 | * @author Lea Verou 63 | * @namespace 64 | * @public 65 | */ 66 | 67 | /** @license React v0.19.1 68 | * scheduler.production.min.js 69 | * 70 | * Copyright (c) Facebook, Inc. and its affiliates. 71 | * 72 | * This source code is licensed under the MIT license found in the 73 | * LICENSE file in the root directory of this source tree. 74 | */ 75 | 76 | /** @license React v16.13.1 77 | * react-dom.production.min.js 78 | * 79 | * Copyright (c) Facebook, Inc. and its affiliates. 80 | * 81 | * This source code is licensed under the MIT license found in the 82 | * LICENSE file in the root directory of this source tree. 83 | */ 84 | 85 | /** @license React v16.13.1 86 | * react-is.production.min.js 87 | * 88 | * Copyright (c) Facebook, Inc. and its affiliates. 89 | * 90 | * This source code is licensed under the MIT license found in the 91 | * LICENSE file in the root directory of this source tree. 92 | */ 93 | 94 | /** @license React v16.13.1 95 | * react.production.min.js 96 | * 97 | * Copyright (c) Facebook, Inc. and its affiliates. 98 | * 99 | * This source code is licensed under the MIT license found in the 100 | * LICENSE file in the root directory of this source tree. 101 | */ 102 | 103 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 104 | 105 | //! © 2018 Angry Bytes and contributors. MIT licensed. 106 | -------------------------------------------------------------------------------- /docs/vendors~main.a929e9ffade578b84d8a.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * OverlayScrollbars 9 | * https://github.com/KingSora/OverlayScrollbars 10 | * 11 | * Version: 1.13.0 12 | * 13 | * Copyright KingSora | Rene Haas. 14 | * https://github.com/KingSora 15 | * 16 | * Released under the MIT license. 17 | * Date: 02.08.2020 18 | */ 19 | 20 | /*! 21 | * The buffer module from node.js, for the browser. 22 | * 23 | * @author Feross Aboukhadijeh 24 | * @license MIT 25 | */ 26 | 27 | /*! 28 | * https://github.com/es-shims/es5-shim 29 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 30 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 31 | */ 32 | 33 | /*! 34 | * https://github.com/paulmillr/es6-shim 35 | * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) 36 | * and contributors, MIT License 37 | * es6-shim: v0.35.4 38 | * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE 39 | * Details and documentation: 40 | * https://github.com/paulmillr/es6-shim/ 41 | */ 42 | 43 | /*! 44 | * is-plain-object 45 | * 46 | * Copyright (c) 2014-2017, Jon Schlinkert. 47 | * Released under the MIT License. 48 | */ 49 | 50 | /*! 51 | * isobject 52 | * 53 | * Copyright (c) 2014-2017, Jon Schlinkert. 54 | * Released under the MIT License. 55 | */ 56 | 57 | /** 58 | * Prism: Lightweight, robust, elegant syntax highlighting 59 | * 60 | * @license MIT 61 | * @author Lea Verou 62 | * @namespace 63 | * @public 64 | */ 65 | 66 | /** @license React v0.20.1 67 | * scheduler.production.min.js 68 | * 69 | * Copyright (c) Facebook, Inc. and its affiliates. 70 | * 71 | * This source code is licensed under the MIT license found in the 72 | * LICENSE file in the root directory of this source tree. 73 | */ 74 | 75 | /** @license React v16.13.1 76 | * react-is.production.min.js 77 | * 78 | * Copyright (c) Facebook, Inc. and its affiliates. 79 | * 80 | * This source code is licensed under the MIT license found in the 81 | * LICENSE file in the root directory of this source tree. 82 | */ 83 | 84 | /** @license React v17.0.1 85 | * react-dom.production.min.js 86 | * 87 | * Copyright (c) Facebook, Inc. and its affiliates. 88 | * 89 | * This source code is licensed under the MIT license found in the 90 | * LICENSE file in the root directory of this source tree. 91 | */ 92 | 93 | /** @license React v17.0.1 94 | * react-jsx-runtime.production.min.js 95 | * 96 | * Copyright (c) Facebook, Inc. and its affiliates. 97 | * 98 | * This source code is licensed under the MIT license found in the 99 | * LICENSE file in the root directory of this source tree. 100 | */ 101 | 102 | /** @license React v17.0.1 103 | * react.production.min.js 104 | * 105 | * Copyright (c) Facebook, Inc. and its affiliates. 106 | * 107 | * This source code is licensed under the MIT license found in the 108 | * LICENSE file in the root directory of this source tree. 109 | */ 110 | 111 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 112 | 113 | //! © 2018 Angry Bytes and contributors. MIT licensed. 114 | -------------------------------------------------------------------------------- /docs/vendors~main.e8fd7269af112155be27.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * OverlayScrollbars 9 | * https://github.com/KingSora/OverlayScrollbars 10 | * 11 | * Version: 1.13.0 12 | * 13 | * Copyright KingSora | Rene Haas. 14 | * https://github.com/KingSora 15 | * 16 | * Released under the MIT license. 17 | * Date: 02.08.2020 18 | */ 19 | 20 | /*! 21 | * The buffer module from node.js, for the browser. 22 | * 23 | * @author Feross Aboukhadijeh 24 | * @license MIT 25 | */ 26 | 27 | /*! 28 | * https://github.com/es-shims/es5-shim 29 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 30 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 31 | */ 32 | 33 | /*! 34 | * https://github.com/paulmillr/es6-shim 35 | * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) 36 | * and contributors, MIT License 37 | * es6-shim: v0.35.4 38 | * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE 39 | * Details and documentation: 40 | * https://github.com/paulmillr/es6-shim/ 41 | */ 42 | 43 | /*! 44 | * is-plain-object 45 | * 46 | * Copyright (c) 2014-2017, Jon Schlinkert. 47 | * Released under the MIT License. 48 | */ 49 | 50 | /*! 51 | * isobject 52 | * 53 | * Copyright (c) 2014-2017, Jon Schlinkert. 54 | * Released under the MIT License. 55 | */ 56 | 57 | /** 58 | * Prism: Lightweight, robust, elegant syntax highlighting 59 | * 60 | * @license MIT 61 | * @author Lea Verou 62 | * @namespace 63 | * @public 64 | */ 65 | 66 | /** @license React v0.20.1 67 | * scheduler.production.min.js 68 | * 69 | * Copyright (c) Facebook, Inc. and its affiliates. 70 | * 71 | * This source code is licensed under the MIT license found in the 72 | * LICENSE file in the root directory of this source tree. 73 | */ 74 | 75 | /** @license React v16.13.1 76 | * react-is.production.min.js 77 | * 78 | * Copyright (c) Facebook, Inc. and its affiliates. 79 | * 80 | * This source code is licensed under the MIT license found in the 81 | * LICENSE file in the root directory of this source tree. 82 | */ 83 | 84 | /** @license React v17.0.1 85 | * react-dom.production.min.js 86 | * 87 | * Copyright (c) Facebook, Inc. and its affiliates. 88 | * 89 | * This source code is licensed under the MIT license found in the 90 | * LICENSE file in the root directory of this source tree. 91 | */ 92 | 93 | /** @license React v17.0.1 94 | * react-jsx-runtime.production.min.js 95 | * 96 | * Copyright (c) Facebook, Inc. and its affiliates. 97 | * 98 | * This source code is licensed under the MIT license found in the 99 | * LICENSE file in the root directory of this source tree. 100 | */ 101 | 102 | /** @license React v17.0.1 103 | * react.production.min.js 104 | * 105 | * Copyright (c) Facebook, Inc. and its affiliates. 106 | * 107 | * This source code is licensed under the MIT license found in the 108 | * LICENSE file in the root directory of this source tree. 109 | */ 110 | 111 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 112 | 113 | //! © 2018 Angry Bytes and contributors. MIT licensed. 114 | -------------------------------------------------------------------------------- /storybook-static/vendors~main.a929e9ffade578b84d8a.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * OverlayScrollbars 9 | * https://github.com/KingSora/OverlayScrollbars 10 | * 11 | * Version: 1.13.0 12 | * 13 | * Copyright KingSora | Rene Haas. 14 | * https://github.com/KingSora 15 | * 16 | * Released under the MIT license. 17 | * Date: 02.08.2020 18 | */ 19 | 20 | /*! 21 | * The buffer module from node.js, for the browser. 22 | * 23 | * @author Feross Aboukhadijeh 24 | * @license MIT 25 | */ 26 | 27 | /*! 28 | * https://github.com/es-shims/es5-shim 29 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 30 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 31 | */ 32 | 33 | /*! 34 | * https://github.com/paulmillr/es6-shim 35 | * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) 36 | * and contributors, MIT License 37 | * es6-shim: v0.35.4 38 | * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE 39 | * Details and documentation: 40 | * https://github.com/paulmillr/es6-shim/ 41 | */ 42 | 43 | /*! 44 | * is-plain-object 45 | * 46 | * Copyright (c) 2014-2017, Jon Schlinkert. 47 | * Released under the MIT License. 48 | */ 49 | 50 | /*! 51 | * isobject 52 | * 53 | * Copyright (c) 2014-2017, Jon Schlinkert. 54 | * Released under the MIT License. 55 | */ 56 | 57 | /** 58 | * Prism: Lightweight, robust, elegant syntax highlighting 59 | * 60 | * @license MIT 61 | * @author Lea Verou 62 | * @namespace 63 | * @public 64 | */ 65 | 66 | /** @license React v0.20.1 67 | * scheduler.production.min.js 68 | * 69 | * Copyright (c) Facebook, Inc. and its affiliates. 70 | * 71 | * This source code is licensed under the MIT license found in the 72 | * LICENSE file in the root directory of this source tree. 73 | */ 74 | 75 | /** @license React v16.13.1 76 | * react-is.production.min.js 77 | * 78 | * Copyright (c) Facebook, Inc. and its affiliates. 79 | * 80 | * This source code is licensed under the MIT license found in the 81 | * LICENSE file in the root directory of this source tree. 82 | */ 83 | 84 | /** @license React v17.0.1 85 | * react-dom.production.min.js 86 | * 87 | * Copyright (c) Facebook, Inc. and its affiliates. 88 | * 89 | * This source code is licensed under the MIT license found in the 90 | * LICENSE file in the root directory of this source tree. 91 | */ 92 | 93 | /** @license React v17.0.1 94 | * react-jsx-runtime.production.min.js 95 | * 96 | * Copyright (c) Facebook, Inc. and its affiliates. 97 | * 98 | * This source code is licensed under the MIT license found in the 99 | * LICENSE file in the root directory of this source tree. 100 | */ 101 | 102 | /** @license React v17.0.1 103 | * react.production.min.js 104 | * 105 | * Copyright (c) Facebook, Inc. and its affiliates. 106 | * 107 | * This source code is licensed under the MIT license found in the 108 | * LICENSE file in the root directory of this source tree. 109 | */ 110 | 111 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 112 | 113 | //! © 2018 Angry Bytes and contributors. MIT licensed. 114 | -------------------------------------------------------------------------------- /test/Monthly/Events.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { screen, render, fireEvent } from '@testing-library/react'; 3 | import { startOfMonth } from 'date-fns'; 4 | import { 5 | MonthlyCalendarTest, 6 | MonthlyCalendarWithDateChange, 7 | } from './TestComponents'; 8 | import { es, zhCN } from 'date-fns/locale'; 9 | 10 | test('Renders event on correct day', () => { 11 | render( 12 | true} 16 | /> 17 | ); 18 | 19 | //check the html inside the event day 20 | let eventDay = screen.getByLabelText('Events for day 4').textContent; 21 | expect(eventDay).toContain('Call bob'); 22 | 23 | let eventItem = screen.getAllByText('Call bob'); 24 | expect(eventItem.length).toEqual(1); 25 | }); 26 | 27 | test('Hides event when the month changes', () => { 28 | render( 29 | 33 | ); 34 | 35 | //check the html inside the event day 36 | let eventDay = screen.getByLabelText('Events for day 4').textContent; 37 | expect(eventDay).toContain('Call bob'); 38 | 39 | let eventItem = screen.getAllByText('Call bob'); 40 | expect(eventItem.length).toEqual(1); 41 | 42 | fireEvent.click(screen.getByText('Next')); 43 | 44 | expect(screen.queryByText('Call bob')).toEqual(null); 45 | }); 46 | 47 | test('Renders event with locale', () => { 48 | render( 49 | true} 54 | /> 55 | ); 56 | 57 | //check that the month nav date is in chinese 58 | screen.getByText('四月'); 59 | 60 | //check the html inside the event day 61 | let eventDay = screen.getByLabelText('Events for day 4').textContent; 62 | expect(eventDay).toContain('Call bob'); 63 | 64 | let eventItem = screen.getAllByText('Call bob'); 65 | expect(eventItem.length).toEqual(1); 66 | }); 67 | 68 | test('Renders weekdays in english', () => { 69 | render( 70 | true} 74 | /> 75 | ); 76 | 77 | //check that the month nav date is in chinese 78 | screen.getAllByText('Monday'); 79 | screen.getAllByText('Tuesday'); 80 | screen.getAllByText('Wednesday'); 81 | screen.getAllByText('Thursday'); 82 | screen.getAllByText('Friday'); 83 | screen.getAllByText('Saturday'); 84 | screen.getAllByText('Sunday'); 85 | }); 86 | 87 | test('Renders weekdays in spanish', () => { 88 | render( 89 | true} 94 | /> 95 | ); 96 | 97 | //check that the month nav date is in chinese 98 | screen.getAllByText('domingo'); 99 | screen.getAllByText('lunes'); 100 | screen.getAllByText('martes'); 101 | screen.getAllByText('miércoles'); 102 | screen.getAllByText('jueves'); 103 | screen.getAllByText('viernes'); 104 | screen.getAllByText('sábado'); 105 | }); 106 | -------------------------------------------------------------------------------- /test/Weekly/Events.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { screen, render, fireEvent } from '@testing-library/react'; 3 | import { addDays, subDays, subHours } from 'date-fns'; 4 | import { WeeklyCalendarTest } from './TestComponents'; 5 | import { WeeklyResponsiveContainer } from '../../src'; 6 | import { zhCN } from 'date-fns/locale'; 7 | 8 | let testDate = '2021-03-03T00:39:27.448Z'; 9 | test('Renders full week initially', () => { 10 | render( 11 | 19 | ); 20 | 21 | // check that all 3 are on screen 22 | screen.getByText('Janet smith'); 23 | screen.getByText('Max Smith'); 24 | screen.getByText('Code'); 25 | 26 | screen.getByText('Mar 1st 24:00'); 27 | }); 28 | 29 | test('Hides event from next week', () => { 30 | render( 31 | 40 | ); 41 | 42 | // check that all 3 are on screen 43 | screen.getByText('Janet smith'); 44 | screen.getByText('Max Smith'); 45 | screen.getByText('Code'); 46 | 47 | screen.getByText('Mar 1st 24:00'); 48 | expect(screen.queryByText('Next week')).toEqual(null); 49 | }); 50 | 51 | test('Renders single day after click', () => { 52 | render( 53 | 54 | 62 | 63 | ); 64 | 65 | fireEvent.click(screen.getByText('Sunday 28th')); 66 | 67 | screen.getByText('Janet smith'); 68 | expect(screen.queryByText('Max Smith')).toEqual(null); 69 | expect(screen.queryByText('Code')).toEqual(null); 70 | 71 | screen.getByText('24:00'); 72 | }); 73 | 74 | test('Renders week after clicking a selected day', () => { 75 | render( 76 | 84 | ); 85 | 86 | fireEvent.click(screen.getByText('Sunday 28th')); 87 | 88 | screen.getByText('Janet smith'); 89 | expect(screen.queryByText('Max Smith')).toEqual(null); 90 | expect(screen.queryByText('Code')).toEqual(null); 91 | 92 | fireEvent.click(screen.getByText('Sunday 28th')); 93 | 94 | // check that all 3 are on screen 95 | screen.getByText('Janet smith'); 96 | screen.getByText('Max Smith'); 97 | screen.getByText('Code'); 98 | }); 99 | 100 | test('Renders using a custom locale', () => { 101 | render( 102 | 111 | ); 112 | // check that all 3 are on screen 113 | screen.getByText('Janet smith'); 114 | screen.getByText('Max Smith'); 115 | screen.getByText('Code'); 116 | 117 | screen.getByText('3月 1日 24:00'); 118 | }); 119 | -------------------------------------------------------------------------------- /src/Monthly/MonthlyBody.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode, useContext } from 'react'; 2 | import { useMonthlyCalendar } from './MonthlyCalendar'; 3 | import { daysInWeek } from '../shared'; 4 | import { format, getDay, isSameDay, Locale } from 'date-fns'; 5 | 6 | const MonthlyBodyContext = React.createContext({} as any); 7 | type BodyState = { 8 | day: Date; 9 | events: DayData[]; 10 | }; 11 | 12 | export function useMonthlyBody() { 13 | return useContext>(MonthlyBodyContext); 14 | } 15 | 16 | type OmittedDaysProps = { 17 | days: Date[]; 18 | omitDays?: number[]; 19 | locale?: Locale; 20 | }; 21 | 22 | export const handleOmittedDays = ({ 23 | days, 24 | omitDays, 25 | locale, 26 | }: OmittedDaysProps) => { 27 | let headings = daysInWeek({ locale }); 28 | let daysToRender = days; 29 | 30 | //omit the headings and days of the week that were passed in 31 | if (omitDays) { 32 | headings = daysInWeek({ locale }).filter( 33 | day => !omitDays.includes(day.day) 34 | ); 35 | daysToRender = days.filter(day => !omitDays.includes(getDay(day))); 36 | } 37 | 38 | // omit the padding if an omitted day was before the start of the month 39 | let firstDayOfMonth = getDay(daysToRender[0]) as number; 40 | if (omitDays) { 41 | let subtractOmittedDays = omitDays.filter(day => day < firstDayOfMonth) 42 | .length; 43 | firstDayOfMonth = firstDayOfMonth - subtractOmittedDays; 44 | } 45 | let padding = new Array(firstDayOfMonth).fill(0); 46 | 47 | return { headings, daysToRender, padding }; 48 | }; 49 | 50 | //to prevent these from being purged in production, we make a lookup object 51 | const headingClasses = { 52 | l3: 'lg:rc-grid-cols-3', 53 | l4: 'lg:rc-grid-cols-4', 54 | l5: 'lg:rc-grid-cols-5', 55 | l6: 'lg:rc-grid-cols-6', 56 | l7: 'lg:rc-grid-cols-7', 57 | }; 58 | 59 | type MonthlyBodyProps = { 60 | /* 61 | skip days, an array of days, starts at sunday (0), saturday is 6 62 | ex: [0,6] would remove sunday and saturday from rendering 63 | */ 64 | omitDays?: number[]; 65 | events: (DayData & { date: Date })[]; 66 | children: ReactNode; 67 | }; 68 | 69 | export function MonthlyBody({ 70 | omitDays, 71 | events, 72 | children, 73 | }: MonthlyBodyProps) { 74 | let { days, locale } = useMonthlyCalendar(); 75 | let { headings, daysToRender, padding } = handleOmittedDays({ 76 | days, 77 | omitDays, 78 | locale, 79 | }); 80 | 81 | let headingClassName = 82 | 'rc-border-b-2 rc-p-2 rc-border-r-2 lg:rc-block rc-hidden'; 83 | return ( 84 |
    85 |
    91 | {headings.map(day => ( 92 |
    97 | {day.label} 98 |
    99 | ))} 100 | {padding.map((_, index) => ( 101 |
    106 | ))} 107 | {daysToRender.map(day => ( 108 | isSameDay(data.date, day)), 113 | }} 114 | > 115 | {children} 116 | 117 | ))} 118 |
    119 |
    120 | ); 121 | } 122 | 123 | type MonthlyDayProps = { 124 | renderDay: (events: DayData[]) => ReactNode; 125 | }; 126 | export function MonthlyDay({ renderDay }: MonthlyDayProps) { 127 | let { locale } = useMonthlyCalendar(); 128 | let { day, events } = useMonthlyBody(); 129 | let dayNumber = format(day, 'd', { locale }); 130 | 131 | return ( 132 |
    136 |
    137 |
    {dayNumber}
    138 |
    139 | {format(day, 'EEEE', { locale })} 140 |
    141 |
    142 |
      143 | {renderDay(events)} 144 |
    145 |
    146 | ); 147 | } 148 | -------------------------------------------------------------------------------- /stories/Monthly.stories.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { Meta, Story } from '@storybook/react'; 3 | import { format, startOfMonth, subHours } from 'date-fns'; 4 | import { 5 | MonthlyBody, 6 | MonthlyCalendar, 7 | MonthlyNav, 8 | DefaultMonthlyEventItem, 9 | MonthlyDay, 10 | } from '../src'; 11 | import '../src/tailwind.css'; 12 | import { EventType, events } from './dummyEvents'; 13 | 14 | export const BasicMonthlyCalendar: Story = args => { 15 | let [currentMonth, setCurrentMonth] = useState( 16 | startOfMonth(new Date()) 17 | ); 18 | 19 | return ( 20 | 24 | 25 | 33 | 34 | renderDay={data => 35 | data.map((item, index) => ( 36 | 41 | )) 42 | } 43 | /> 44 | 45 | 46 | ); 47 | }; 48 | 49 | export const MyMonthlyCalendar: Story = args => { 50 | let [currentMonth, setCurrentMonth] = useState( 51 | startOfMonth(new Date()) 52 | ); 53 | let eventItems = 54 | //use firstMonth array if its the current month 55 | currentMonth.toISOString() == startOfMonth(new Date()).toISOString() 56 | ? events.firstMonth 57 | : events.secondMonth; 58 | 59 | return ( 60 | 64 | 65 | 69 | 70 | renderDay={data => 71 | data.map((item, index) => ( 72 | 77 | )) 78 | } 79 | /> 80 | 81 | 82 | ); 83 | }; 84 | 85 | /* 86 | Use your own source of data, 87 | we pass you the timestamp for the start of the month, 88 | you return an array of items with anything you want 89 | the items must at least have a `date` key with the timestamp of the event time 90 | */ 91 | 92 | const useEventsByMonth = (currentMonth: Date) => { 93 | let [eventsForMonth, setEvents] = useState([]); 94 | 95 | useEffect(() => { 96 | const getEvents = async () => { 97 | await new Promise(resolve => setTimeout(resolve, 2000)); 98 | let nextEventItems = 99 | //use firstMonth array if its the current month 100 | currentMonth.toISOString() == startOfMonth(new Date()).toISOString() 101 | ? events.firstMonth 102 | : events.secondMonth; 103 | 104 | setEvents(nextEventItems); 105 | }; 106 | getEvents(); 107 | }, [currentMonth]); 108 | 109 | return eventsForMonth; 110 | }; 111 | export const AsyncEvents: Story = args => { 112 | let [currentMonth, setCurrentMonth] = useState( 113 | startOfMonth(new Date()) 114 | ); 115 | let myEvents = useEventsByMonth(currentMonth); 116 | 117 | return ( 118 | 122 | 123 | 127 | 128 | renderDay={data => 129 | data.map((item, index) => ( 130 | 135 | )) 136 | } 137 | /> 138 | 139 | 140 | ); 141 | }; 142 | export default { 143 | title: 'Monthly Calendar', 144 | component: MyMonthlyCalendar, 145 | parameters: { 146 | controls: { expanded: true }, 147 | }, 148 | argTypes: { 149 | hideWeekend: { 150 | description: 151 | 'Sets an array of days to hide, 0 is Sunday, 1 is monday, etc', 152 | control: 'boolean', 153 | }, 154 | }, 155 | } as Meta; 156 | -------------------------------------------------------------------------------- /src/Weekly/WeeklyCalendar.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | startOfWeek, 3 | format, 4 | isSameDay, 5 | getDay, 6 | setDay, 7 | isSameWeek, 8 | } from 'date-fns'; 9 | import React, { 10 | CSSProperties, 11 | ReactNode, 12 | useContext, 13 | useEffect, 14 | useState, 15 | } from 'react'; 16 | import { daysInWeek } from '../shared'; 17 | 18 | type State = { 19 | week: Date; 20 | selectedDay?: Date; 21 | locale?: Locale; 22 | changeSelectedDay: (day?: Date) => any; 23 | }; 24 | 25 | const WeeklyContext = React.createContext({} as State); 26 | export const useWeeklyCalendar = () => useContext(WeeklyContext); 27 | 28 | type WeeklyCalendarProps = { 29 | week: Date; 30 | children: ReactNode; 31 | locale?: Locale; 32 | }; 33 | 34 | export const WeeklyCalendar = ({ 35 | locale, 36 | week, 37 | children, 38 | }: WeeklyCalendarProps) => { 39 | let [selectedDay, setSelectedDay] = useState(); 40 | 41 | //clear the selected day if the week changes 42 | useEffect(() => { 43 | setSelectedDay(undefined); 44 | }, [week]); 45 | 46 | return ( 47 | 55 | {children} 56 | 57 | ); 58 | }; 59 | 60 | type WeeklyContainerProps = { 61 | children: ReactNode; 62 | }; 63 | export const WeeklyContainer = ({ children }: WeeklyContainerProps) => { 64 | return
    {children}
    ; 65 | }; 66 | 67 | type DayButtonProps = { 68 | day: { day: number; label: string }; 69 | }; 70 | 71 | const DayButton = ({ day }: DayButtonProps) => { 72 | let { locale, week, selectedDay, changeSelectedDay } = useWeeklyCalendar(); 73 | let isSelected = selectedDay ? getDay(selectedDay) === day.day : false; 74 | let currentDate = setDay(week, day.day, { locale }); 75 | return ( 76 |
  • changeSelectedDay(isSelected ? undefined : currentDate)} 78 | className="rc-bg-white rc-cursor-pointer" 79 | title="Day of Week" 80 | > 81 |
    88 |

    89 | {day.label} {format(currentDate, 'do', { locale })} 90 |

    91 |
    92 |
    • 93 | ); 94 | }; 95 | 96 | type WeeklyDaysProps = { 97 | omitDays?: number[]; 98 | }; 99 | 100 | export const WeeklyDays = ({ omitDays }: WeeklyDaysProps) => { 101 | let { locale } = useWeeklyCalendar(); 102 | let daysToRender = daysInWeek({ locale }); 103 | 104 | if (omitDays) { 105 | daysToRender = daysInWeek({ locale }).filter( 106 | day => !omitDays.includes(day.day) 107 | ); 108 | } 109 | return ( 110 |
      111 | {daysToRender.map(day => ( 112 | 113 | ))} 114 |
    115 | ); 116 | }; 117 | 118 | type RenderItemProps = { 119 | item: EventItem & { date: Date }; 120 | /* 121 | boolean indicating if a full week is being shwown 122 | vs having a single day selected 123 | */ 124 | showingFullWeek: boolean; 125 | }; 126 | 127 | type WeeklyBodyProps = { 128 | style?: CSSProperties; 129 | events: (EventItem & { date: Date })[]; 130 | renderItem: (item: RenderItemProps) => ReactNode; 131 | }; 132 | 133 | export function WeeklyBody({ 134 | events, 135 | renderItem, 136 | style, 137 | }: WeeklyBodyProps) { 138 | let { week, selectedDay } = useWeeklyCalendar(); 139 | return ( 140 |
    141 |
      142 | {events.map(item => { 143 | // If they select a single day, filter out events for different days 144 | if (selectedDay) { 145 | if (!isSameDay(selectedDay, item.date)) return null; 146 | } 147 | //if an event is for a different week, filter it out 148 | if (!isSameWeek(week, item.date)) return null; 149 | 150 | //return the remeaining events! 151 | return renderItem({ 152 | item, 153 | showingFullWeek: selectedDay === undefined, 154 | }); 155 | })} 156 |
    157 |
    158 | ); 159 | } 160 | 161 | export const WeeklyResponsiveContainer = ({ 162 | children, 163 | }: { 164 | children: ReactNode; 165 | }) => { 166 | return ( 167 |
    168 | {children} 169 |
    170 | ); 171 | }; 172 | -------------------------------------------------------------------------------- /docs/iframe.html: -------------------------------------------------------------------------------- 1 | Storybook

    No Preview

    Sorry, but you either have no stories or none are selected somehow.

    • Please check the Storybook config.
    • Try reloading the page.

    If the problem persists, check the browser console, or the terminal you've run Storybook from.

    


--------------------------------------------------------------------------------
/storybook-static/iframe.html:
--------------------------------------------------------------------------------
  1 | Storybook
    No Preview
    Sorry, but you either have no stories or none are selected somehow.
    • Please check the Storybook config.
    • Try reloading the page.
    If the problem persists, check the browser console, or the terminal you've run Storybook from.
    


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Calendar
  2 | 
  3 | 100% test coverage, responsive, and flexible event calendar for React.
  4 | 
  5 | [See In Action](https://zackify.github.io/react-calendar/?path=/story/monthly-calendar--basic-monthly-calendar)
  6 | 
  7 | Backstory: After using react-big-calendar for years, I decided to create my own that is simpler to use, allows for easy customization, and uses modern React (no deprecated methods).
  8 | 
  9 | ```
 10 | npm install @zach.codes/react-calendar date-fns
 11 | ```
 12 | 
 13 | - [Basic Usage](#Basic-Usage)
 14 | - [Styling](#Styling)
 15 | - [Monthly Calendar](#MonthlyCalendar)
 16 | - [Weekly Calendar](#WeeklyCalendar)
 17 | - [Full Control](#Full-Control)
 18 | 
 19 | ## Basic Usage
 20 | 
 21 | [See this code in action](https://zackify.github.io/react-calendar/?path=/story/monthly-calendar--basic-monthly-calendar)
 22 | 
 23 | ```tsx
 24 | import { format, subHours, startOfMonth } from 'date-fns';
 25 | import {
 26 |   MonthlyBody,
 27 |   MonthlyDay,
 28 |   MonthlyCalendar,
 29 |   MonthlyNav,
 30 |   DefaultMonthlyEventItem,
 31 | } from '@zach.codes/react-calendar';
 32 | 
 33 | export const MyMonthlyCalendar = () => {
 34 |   let [currentMonth, setCurrentMonth] = useState(
 35 |     startOfMonth(new Date())
 36 |   );
 37 | 
 38 |   return (
 39 |      setCurrentMonth(date)}
 42 |     >
 43 |       
 44 |       
 51 |         
 52 |           renderDay={data =>
 53 |             data.map((item, index) => (
 54 |               
 60 |             ))
 61 |           }
 62 |         />
 63 |       
 64 |     
 65 |   );
 66 | };
 67 | ```
 68 | 
 69 | This renders a monthly calendar view in its simplest form. Whenever a user presses `next` or `previous` on the `` the `onCurrentMonthChange` callback will be invoked, and it's up to you to control the state.
 70 | 
 71 | This approach gives you full flexibilty to do anything you want. In my applications, I will refetch a graphql query anytime the month changes, and load `events` for that month.
 72 | 
 73 | The events get passed into `MonthlyBody` and then `renderDay` is called for every day on the calendar that has events. You can render any React component you wish, giving you as much freedom as possible.
 74 | 
 75 | ## Styling
 76 | 
 77 | This library uses [Tailwind](https://tailwindcss.com/). This gives you two options for including the necessary CSS for the components.
 78 | 
 79 | ### I'm already using Tailwind
 80 | 
 81 | Awesome! You need to add `node_modules/@zach.codes/react-calendar/dist/**/*.js` to your `tailwind.config.js` to ensure the required classes aren't purged on your production build.
 82 | 
 83 | ### I'm not using Tailwind
 84 | 
 85 | No problem! The library includes the minimal CSS required to render the components. Somewhere in your app, you need to import our CSS:
 86 | 
 87 | ```js
 88 | import '@zach.codes/react-calendar/dist/calendar-tailwind.css';
 89 | ```
 90 | 
 91 | If you already have a CSS reset in your app, you can import from:
 92 | 
 93 | ```js
 94 | import '@zach.codes/react-calendar/dist/calendar-tailwind-no-reset.css';
 95 | ```
 96 | 
 97 | But some styles may not look the same as storybook. You can take the resets you want from the main file and put them into your app to get the styling you prefer.
 98 | 
 99 | ## MonthlyCalendar
100 | 
101 | This is a monthly view similar to react-big-calendar or a Calendar application. It makes it easy to load events 1 month at a time, and render custom elements on each day.
102 | 
103 | [See in action](https://zackify.github.io/react-calendar/?path=/story/monthly-calendar--basic-monthly-calendar)
104 | 
105 | ### Props
106 | 
107 | `MonthlyCalendar`
108 | 
109 | - `currentMonth` this must be a Date instance representing the first of the month you wish to view
110 | - `onCurrentMonthChange` is called any time the month is changing from the Navigation area
111 | 
112 | `MonthlyNav`
113 | 
114 | No props at this time
115 | 
116 | `MonthlyBody`
117 | 
118 | - `omitDays` lets you hide certain days from the calendar, for instance, hide Saturday and Sunday. Days are represented as 0-6, as seen in the [date-fns](https://date-fns.org/v2.19.0/docs/getDay#returns) documentation. Hiding Monday would be `omitDays={[1]}` Hiding the weekend would be `omitDays={[0, 6]}`
119 | - `events` this is an array of events, the only thing required inside each object is a `date` field with a Date object representing the exact time of the event
120 | 
121 | `MonthlyDay`
122 | 
123 | - `renderDay` callback function that is passed an array of events for each day displayed, letting you render the events for the day
124 | 
125 | ## WeeklyCalendar
126 | 
127 | View 1 week at a time, useful for scheduling appointments, or rendering events in a smaller area of the screen
128 | 
129 | [See in action](https://zackify.github.io/react-calendar/?path=/story/weekly-calendar--basic-weekly-calendar)
130 | 
131 | ```js
132 | 
133 |   
134 |     
135 |      (
138 |         
147 |       )}
148 |     />
149 |   
150 | 
151 | ```
152 | 
153 | This code renders an event for the current date. When you are in the week view, it displays the day and time. When you drill into a single day, it displays the time only.
154 | 
155 | ### Props
156 | 
157 | `WeeklyCalendar`
158 | 
159 | - `week` a date object to initialize for the weekly view
160 | 
161 | `WeeklyContainer`
162 | 
163 | A view only component to flex the buttons and content area
164 | 
165 | `WeeklyDays`
166 | 
167 | Renders the buttons to view an individual day
168 | 
169 | - `omitDays`, same as the `MonthlyBody` prop
170 | 
171 | `WeeklyBody`
172 | 
173 | - `style` optional style info for setting the container height
174 | - `events` array of events with a date field, and anything else you want.
175 | - `renderItem` callback to render individual items on the side.
176 | 
177 | ## Full Control
178 | 
179 | This library has very few props to understand. It takes a component-first approach instead of endless prop options.
180 | 
181 | Building a calendar is highly opinionated. This library lets you easily customize any piece of it. Let's take a look at the `MonthlyNav` component:
182 | 
183 | ```tsx
184 | import { useMonthlyCalendar } from '@zach.codes/react-calendar';
185 | 
186 | export const MonthlyNav = () => {
187 |   let { currentMonth, onCurrentMonthChange } = useMonthlyCalendar();
188 | 
189 |   return (
190 |     
    
191 |       
197 |       
    
198 |         {format(
199 |           currentMonth,
200 |           getYear(currentMonth) === getYear(new Date()) ? 'LLLL' : 'LLLL yyyy'
201 |         )}
202 |       
    
203 |       
209 |     
    
210 |   );
211 | };
212 | ```
213 | 
214 | It's rendering some button elements, and then the current month. If it's not the current year, it renders the year as well.
215 | 
216 | You can copy / paste this component into your own repo. The magic piece is `useMonthlyCalendar`. This hook will let you access anything from the calendar context.
217 | 
218 | With this in mind, you can fully replace any of the default components to have custom behavior for your own app.
219 | 


--------------------------------------------------------------------------------
/docs/main.a929e9ffade578b84d8a.bundle.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1085:function(module,exports,__webpack_require__){"use strict";__webpack_require__(10),__webpack_require__(3),__webpack_require__(50),__webpack_require__(1086),__webpack_require__(44),__webpack_require__(45),__webpack_require__(1087),__webpack_require__(35),__webpack_require__(46);var _clientApi=__webpack_require__(60),_clientLogger=__webpack_require__(39),_configFilename=__webpack_require__(1088);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i where the content\n *    is wrapped by a div with box-sizing set to `content-box`.\n *\n *    https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n *    By default, the way the browser specifies that an element should have no\n *    border is by setting it's border-style to `none` in the user-agent\n *    stylesheet.\n *\n *    In order to easily add borders to elements by just setting the `border-width`\n *    property, we change the default border-style for all elements to `solid`, and\n *    use border-width to hide them instead. This way our `border` utilities only\n *    need to set the `border-width` property instead of the entire `border`\n *    shorthand, making our border utilities much more straightforward to compose.\n *\n *    https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n  border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n  border-style: solid;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton {\n  cursor: pointer;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their instrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-y-reverse: 0;\n  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n\n.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-opacity: 1;\n  border-color: rgba(229, 231, 235, var(--tw-divide-opacity));\n}\n\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n}\n\n.border-indigo-600 {\n  --tw-border-opacity: 1;\n  border-color: rgba(79, 70, 229, var(--tw-border-opacity));\n}\n\n.hover\\:border-gray-500:hover {\n  --tw-border-opacity: 1;\n  border-color: rgba(107, 114, 128, var(--tw-border-opacity));\n}\n\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-t-2 {\n  border-top-width: 2px;\n}\n\n.border-r-2 {\n  border-right-width: 2px;\n}\n\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n\n.border-l-2 {\n  border-left-width: 2px;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.block {\n  display: block;\n}\n\n.flex {\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.grid {\n  display: grid;\n}\n\n.hidden {\n  display: none;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.flex-1 {\n  flex: 1 1 0%;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-bold {\n  font-weight: 700;\n}\n\n.h-48 {\n  height: 12rem;\n}\n\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.mr-4 {\n  margin-right: 1rem;\n}\n\n.mb-4 {\n  margin-bottom: 1rem;\n}\n\n.ml-4 {\n  margin-left: 1rem;\n}\n\n.max-h-36 {\n  max-height: 9rem;\n}\n\n.max-h-96 {\n  max-height: 24rem;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-scroll {\n  overflow-x: scroll;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n.p-2 {\n  padding: 0.5rem;\n}\n\n.p-4 {\n  padding: 1rem;\n}\n\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n* {\n  --tw-shadow: 0 0 #0000;\n}\n\n* {\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgba(107, 114, 128, var(--tw-text-opacity));\n}\n\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgba(31, 41, 55, var(--tw-text-opacity));\n}\n\n.w-32 {\n  width: 8rem;\n}\n\n.w-72 {\n  width: 18rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.gap-2 {\n  gap: 0.5rem;\n}\n\n.grid-cols-1 {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n@media (min-width: 640px) {\n  .sm\\:w-36 {\n    width: 9rem;\n  }\n\n  .sm\\:grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (min-width: 768px) {\n  .md\\:flex {\n    display: flex;\n  }\n\n  .md\\:justify-between {\n    justify-content: space-between;\n  }\n\n  .md\\:w-3\\/4 {\n    width: 75%;\n  }\n\n  .md\\:grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n\n  .md\\:grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n}\n\n@media (min-width: 1024px) {\n  .lg\\:block {\n    display: block;\n  }\n\n  .lg\\:hidden {\n    display: none;\n  }\n\n  .lg\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .lg\\:grid-cols-5 {\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n  }\n\n  .lg\\:grid-cols-6 {\n    grid-template-columns: repeat(6, minmax(0, 1fr));\n  }\n\n  .lg\\:grid-cols-7 {\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n  }\n}\n\n@media (min-width: 1280px) {\n}\n\n@media (min-width: 1536px) {\n}\n",""]),module.exports=exports},1100:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"BasicWeeklyCalendar",(function(){return BasicWeeklyCalendar}));__webpack_require__(19),__webpack_require__(322),__webpack_require__(4),__webpack_require__(0);var date_fns__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(220),date_fns__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(219),date_fns__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(105),date_fns__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(487),date_fns__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(218),_src__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(49),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__=(__webpack_require__(476),__webpack_require__(6)),BasicWeeklyCalendar=function BasicWeeklyCalendar(args){return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div",{className:"border p-4 md:w-3/4 lg:w-1/2 w-full",children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_src__WEBPACK_IMPORTED_MODULE_9__.g,{week:args.week,children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(_src__WEBPACK_IMPORTED_MODULE_9__.h,{children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_src__WEBPACK_IMPORTED_MODULE_9__.i,{omitDays:args.hideWeekend?[0,6]:void 0}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_src__WEBPACK_IMPORTED_MODULE_9__.f,{style:{maxHeight:args.hideWeekend?"18rem":"26rem"},events:[{title:"Janet smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_4__.a)(new Date,3)},{title:"Max Smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_4__.a)(new Date,1)},{title:"Code",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_5__.a)(new Date,4)},{title:"Call Emma",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_5__.a)(new Date,3)},{title:"Eat lunch",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_5__.a)(new Date,2)},{title:"Sleep",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_5__.a)(new Date,1)},{title:"Meeting with Bob",date:new Date},{title:"John smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_6__.a)(new Date,1)},{title:"Jane doe",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_6__.a)(new Date,3)},{title:"Janet smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_4__.a)(new Date,4)},{title:"Max Smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_4__.a)(new Date,5)},{title:"John smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_6__.a)(new Date,4)},{title:"Jane doe",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_6__.a)(new Date,5)}],renderItem:function renderItem(_ref){var item=_ref.item,showingFullWeek=_ref.showingFullWeek;return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_src__WEBPACK_IMPORTED_MODULE_9__.b,{title:item.title,date:showingFullWeek?Object(date_fns__WEBPACK_IMPORTED_MODULE_7__.a)(item.date,"MMM do k:mm"):Object(date_fns__WEBPACK_IMPORTED_MODULE_7__.a)(item.date,"k:mm")},item.date.toISOString())}})]})})})};BasicWeeklyCalendar.displayName="BasicWeeklyCalendar",__webpack_exports__.default={title:"Weekly Calendar",component:BasicWeeklyCalendar,parameters:{controls:{expanded:!0}},argTypes:{hideWeekend:{description:"Sets an array of days to hide, 0 is Sunday, 1 is monday, etc",control:"boolean"},week:{description:"The current week to view",control:"date",defaultValue:Object(date_fns__WEBPACK_IMPORTED_MODULE_8__.a)(new Date)}}},BasicWeeklyCalendar.parameters=Object.assign({storySource:{source:"args => {\n  return (\n    
    \n      \n        \n          \n           (\n              \n            )}\n          />\n        \n      \n    
    \n  );\n}"}},BasicWeeklyCalendar.parameters)},1105:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"BasicMonthlyCalendar",(function(){return Monthly_stories_BasicMonthlyCalendar})),__webpack_require__.d(__webpack_exports__,"MyMonthlyCalendar",(function(){return Monthly_stories_MyMonthlyCalendar})),__webpack_require__.d(__webpack_exports__,"AsyncEvents",(function(){return Monthly_stories_AsyncEvents}));__webpack_require__(121),__webpack_require__(19),__webpack_require__(20),__webpack_require__(322),__webpack_require__(100),__webpack_require__(14),__webpack_require__(294),__webpack_require__(4),__webpack_require__(17),__webpack_require__(3),__webpack_require__(12),__webpack_require__(23),__webpack_require__(16),__webpack_require__(15),__webpack_require__(18),__webpack_require__(13),__webpack_require__(5),__webpack_require__(29);var react=__webpack_require__(0),startOfMonth=__webpack_require__(1112),subHours=__webpack_require__(219),format=__webpack_require__(487),src=__webpack_require__(49),addHours=(__webpack_require__(476),__webpack_require__(486)),addDays=__webpack_require__(105),subDays=__webpack_require__(220),addMonths=__webpack_require__(485),events={firstMonth:[{title:"Call John",date:Object(subHours.a)(new Date,2)},{title:"Call John",date:Object(subHours.a)(new Date,1)},{title:"Meeting with Bob",date:new Date},{title:"Bike Appt",date:Object(addHours.a)(new Date,3)},{title:"John Hilmer",date:Object(addDays.a)(new Date,3)},{title:"Jane Call",date:Object(subDays.a)(new Date,4)},{title:"Sound alarm",date:Object(addDays.a)(new Date,6)},{title:"Soccer Practice",date:Object(subDays.a)(new Date,3)},{title:"Alert",date:Object(addHours.a)(Object(subDays.a)(new Date,4),4)},{title:"Donation",date:Object(addDays.a)(new Date,6)}],secondMonth:[{title:"Meeting Next Month",date:Object(addMonths.a)(new Date,1)}]},jsx_runtime=__webpack_require__(6);function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n  let [currentMonth, setCurrentMonth] = useState(\n    startOfMonth(new Date())\n  );\n\n  return (\n    \n      \n      \n          data.map((item, index) => (\n            \n          ))\n        }\n      />\n    \n  );\n}"}},Monthly_stories_BasicMonthlyCalendar.parameters),Monthly_stories_MyMonthlyCalendar.parameters=Object.assign({storySource:{source:"args => {\n  let [currentMonth, setCurrentMonth] = useState(\n    startOfMonth(new Date())\n  );\n  let eventItems =\n    //use firstMonth array if its the current month\n    currentMonth.toISOString() == startOfMonth(new Date()).toISOString()\n      ? events.firstMonth\n      : events.secondMonth;\n\n  return (\n    \n      \n      \n          data.map((item, index) => (\n            \n          ))\n        }\n      />\n    \n  );\n}"}},Monthly_stories_MyMonthlyCalendar.parameters),Monthly_stories_AsyncEvents.parameters=Object.assign({storySource:{source:"args => {\n  let [currentMonth, setCurrentMonth] = useState(\n    startOfMonth(new Date())\n  );\n  let myEvents = useEventsByMonth(currentMonth);\n\n  return (\n    \n      \n      \n          data.map((item, index) => (\n            \n          ))\n        }\n      />\n    \n  );\n}"}},Monthly_stories_AsyncEvents.parameters)},476:function(module,exports,__webpack_require__){var api=__webpack_require__(1097),content=__webpack_require__(1098);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},49:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"d",(function(){return MonthlyCalendar_MonthlyCalendar})),__webpack_require__.d(__webpack_exports__,"e",(function(){return MonthlyCalendar_MonthlyNav})),__webpack_require__.d(__webpack_exports__,"c",(function(){return MonthlyCalendar_MonthlyBody})),__webpack_require__.d(__webpack_exports__,"a",(function(){return MonthlyEventItems_DefaultMonthlyEventItem})),__webpack_require__.d(__webpack_exports__,"g",(function(){return WeeklyCalendar_WeeklyCalendar})),__webpack_require__.d(__webpack_exports__,"h",(function(){return WeeklyCalendar_WeeklyContainer})),__webpack_require__.d(__webpack_exports__,"i",(function(){return WeeklyCalendar_WeeklyDays})),__webpack_require__.d(__webpack_exports__,"f",(function(){return WeeklyCalendar_WeeklyBody})),__webpack_require__.d(__webpack_exports__,"b",(function(){return WeeklyEventItems_DefaultWeeklyEventItem}));__webpack_require__(19),__webpack_require__(50),__webpack_require__(66),__webpack_require__(74),__webpack_require__(1094),__webpack_require__(20),__webpack_require__(322);var startOfMonth=__webpack_require__(1112),eachDayOfInterval=__webpack_require__(1113),endOfMonth=__webpack_require__(1114),subMonths=__webpack_require__(1115),format=__webpack_require__(487),getYear=__webpack_require__(1116),addMonths=__webpack_require__(485),getDay=__webpack_require__(1117),isSameDay=__webpack_require__(1120),react=__webpack_require__(0),react_default=__webpack_require__.n(react),daysInWeek=[{day:0,label:"Sunday"},{day:1,label:"Monday"},{day:2,label:"Tuesday"},{day:3,label:"Wednesday"},{day:4,label:"Thursday"},{day:5,label:"Friday"},{day:6,label:"Saturday"}],jsx_runtime=__webpack_require__(6),MonthlyCalendarContext=react_default.a.createContext({}),MonthlyCalendar_useMonthlyCalendar=function useMonthlyCalendar(){return Object(react.useContext)(MonthlyCalendarContext)},MonthlyCalendar_MonthlyCalendar=function MonthlyCalendar(_ref){var currentMonth=_ref.currentMonth,onCurrentMonthChange=_ref.onCurrentMonthChange,children=_ref.children,monthStart=Object(startOfMonth.a)(currentMonth),days=Object(eachDayOfInterval.a)({start:monthStart,end:Object(endOfMonth.a)(monthStart)});return Object(jsx_runtime.jsx)(MonthlyCalendarContext.Provider,{value:{days:days,onCurrentMonthChange:onCurrentMonthChange,currentMonth:monthStart},children:children})};MonthlyCalendar_MonthlyCalendar.displayName="MonthlyCalendar";var MonthlyCalendar_MonthlyNav=function MonthlyNav(){var _useMonthlyCalendar=MonthlyCalendar_useMonthlyCalendar(),currentMonth=_useMonthlyCalendar.currentMonth,onCurrentMonthChange=_useMonthlyCalendar.onCurrentMonthChange;return Object(jsx_runtime.jsxs)("div",{className:"flex justify-end mb-4",children:[Object(jsx_runtime.jsx)("button",{onClick:function onClick(){return onCurrentMonthChange(Object(subMonths.a)(currentMonth,1))},className:"cursor-pointer",children:"Previous"}),Object(jsx_runtime.jsx)("div",{className:"ml-4 mr-4 w-32 text-center","aria-label":"Current Month",children:Object(format.a)(currentMonth,Object(getYear.a)(currentMonth)===Object(getYear.a)(new Date)?"LLLL":"LLLL yyyy")}),Object(jsx_runtime.jsx)("button",{onClick:function onClick(){return onCurrentMonthChange(Object(addMonths.a)(currentMonth,1))},className:"cursor-pointer",children:"Next"})]})};MonthlyCalendar_MonthlyNav.displayName="MonthlyNav";function MonthlyCalendar_MonthlyBody(_ref3){var omitDays=_ref3.omitDays,events=_ref3.events,renderDay=_ref3.renderDay,_handleOmittedDays=function handleOmittedDays(_ref2){var days=_ref2.days,omitDays=_ref2.omitDays,headings=daysInWeek,daysToRender=days;omitDays&&(headings=daysInWeek.filter((function(day){return!omitDays.includes(day.day)})),daysToRender=days.filter((function(day){return!omitDays.includes(Object(getDay.a)(day))})));var firstDayOfMonth=Object(getDay.a)(daysToRender[0]);if(omitDays){var subtractOmittedDays=omitDays.filter((function(day){return day ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Monthly/MonthlyCalendar.tsx#MonthlyBody"]={docgenInfo:MonthlyCalendar_MonthlyBody.__docgenInfo,name:"MonthlyBody",path:"src/Monthly/MonthlyCalendar.tsx#MonthlyBody"})}catch(__react_docgen_typescript_loader_error){}try{MonthlyCalendar_MonthlyCalendar.displayName="MonthlyCalendar",MonthlyCalendar_MonthlyCalendar.__docgenInfo={description:"",displayName:"MonthlyCalendar",props:{currentMonth:{defaultValue:null,description:"",name:"currentMonth",required:!0,type:{name:"Date"}},onCurrentMonthChange:{defaultValue:null,description:"",name:"onCurrentMonthChange",required:!0,type:{name:"(date: Date) => any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Monthly/MonthlyCalendar.tsx#MonthlyCalendar"]={docgenInfo:MonthlyCalendar_MonthlyCalendar.__docgenInfo,name:"MonthlyCalendar",path:"src/Monthly/MonthlyCalendar.tsx#MonthlyCalendar"})}catch(__react_docgen_typescript_loader_error){}var MonthlyEventItems_DefaultMonthlyEventItem=function DefaultMonthlyEventItem(_ref){var title=_ref.title,date=_ref.date;return Object(jsx_runtime.jsx)("li",{className:"py-2",children:Object(jsx_runtime.jsxs)("div",{className:"flex text-sm flex-1 justify-between",children:[Object(jsx_runtime.jsx)("h3",{className:"font-medium",children:title}),Object(jsx_runtime.jsx)("p",{className:"text-gray-500",children:date})]})})};MonthlyEventItems_DefaultMonthlyEventItem.displayName="DefaultMonthlyEventItem";try{MonthlyEventItems_DefaultMonthlyEventItem.displayName="DefaultMonthlyEventItem",MonthlyEventItems_DefaultMonthlyEventItem.__docgenInfo={description:"",displayName:"DefaultMonthlyEventItem",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},date:{defaultValue:null,description:"",name:"date",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Monthly/MonthlyEventItems.tsx#DefaultMonthlyEventItem"]={docgenInfo:MonthlyEventItems_DefaultMonthlyEventItem.__docgenInfo,name:"DefaultMonthlyEventItem",path:"src/Monthly/MonthlyEventItems.tsx#DefaultMonthlyEventItem"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__(17),__webpack_require__(3),__webpack_require__(12),__webpack_require__(14),__webpack_require__(23),__webpack_require__(16),__webpack_require__(15),__webpack_require__(18),__webpack_require__(13),__webpack_require__(5),__webpack_require__(29);var startOfWeek=__webpack_require__(218),setDay=__webpack_require__(1118),isSameWeek=__webpack_require__(1119);function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i) => ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Weekly/WeeklyCalendar.tsx#WeeklyBody"]={docgenInfo:WeeklyCalendar_WeeklyBody.__docgenInfo,name:"WeeklyBody",path:"src/Weekly/WeeklyCalendar.tsx#WeeklyBody"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyCalendar_WeeklyCalendar.displayName="WeeklyCalendar",WeeklyCalendar_WeeklyCalendar.__docgenInfo={description:"",displayName:"WeeklyCalendar",props:{week:{defaultValue:null,description:"",name:"week",required:!0,type:{name:"Date"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Weekly/WeeklyCalendar.tsx#WeeklyCalendar"]={docgenInfo:WeeklyCalendar_WeeklyCalendar.__docgenInfo,name:"WeeklyCalendar",path:"src/Weekly/WeeklyCalendar.tsx#WeeklyCalendar"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyCalendar_WeeklyContainer.displayName="WeeklyContainer",WeeklyCalendar_WeeklyContainer.__docgenInfo={description:"",displayName:"WeeklyContainer",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Weekly/WeeklyCalendar.tsx#WeeklyContainer"]={docgenInfo:WeeklyCalendar_WeeklyContainer.__docgenInfo,name:"WeeklyContainer",path:"src/Weekly/WeeklyCalendar.tsx#WeeklyContainer"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyCalendar_WeeklyDays.displayName="WeeklyDays",WeeklyCalendar_WeeklyDays.__docgenInfo={description:"",displayName:"WeeklyDays",props:{omitDays:{defaultValue:null,description:"",name:"omitDays",required:!1,type:{name:"number[]"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Weekly/WeeklyCalendar.tsx#WeeklyDays"]={docgenInfo:WeeklyCalendar_WeeklyDays.__docgenInfo,name:"WeeklyDays",path:"src/Weekly/WeeklyCalendar.tsx#WeeklyDays"})}catch(__react_docgen_typescript_loader_error){}var WeeklyEventItems_DefaultWeeklyEventItem=function DefaultWeeklyEventItem(_ref){var title=_ref.title,date=_ref.date;return Object(jsx_runtime.jsx)("li",{className:"py-4 w-72",children:Object(jsx_runtime.jsxs)("div",{className:"text-sm flex justify-between",children:[Object(jsx_runtime.jsx)("h3",{className:"font-medium",children:title}),Object(jsx_runtime.jsx)("p",{className:"text-gray-500",children:date})]})})};WeeklyEventItems_DefaultWeeklyEventItem.displayName="DefaultWeeklyEventItem";try{WeeklyEventItems_DefaultWeeklyEventItem.displayName="DefaultWeeklyEventItem",WeeklyEventItems_DefaultWeeklyEventItem.__docgenInfo={description:"",displayName:"DefaultWeeklyEventItem",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},date:{defaultValue:null,description:"",name:"date",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Weekly/WeeklyEventItems.tsx#DefaultWeeklyEventItem"]={docgenInfo:WeeklyEventItems_DefaultWeeklyEventItem.__docgenInfo,name:"DefaultWeeklyEventItem",path:"src/Weekly/WeeklyEventItems.tsx#DefaultWeeklyEventItem"})}catch(__react_docgen_typescript_loader_error){}try{MonthlyBody.displayName="MonthlyBody",MonthlyBody.__docgenInfo={description:"",displayName:"MonthlyBody",props:{omitDays:{defaultValue:null,description:"",name:"omitDays",required:!1,type:{name:"number[]"}},events:{defaultValue:null,description:"",name:"events",required:!0,type:{name:"(MonthData & ExtraMonthData)[]"}},renderDay:{defaultValue:null,description:"",name:"renderDay",required:!0,type:{name:"(data: (MonthData & ExtraMonthData)[]) => ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#MonthlyBody"]={docgenInfo:MonthlyBody.__docgenInfo,name:"MonthlyBody",path:"src/index.tsx#MonthlyBody"})}catch(__react_docgen_typescript_loader_error){}try{MonthlyCalendar.displayName="MonthlyCalendar",MonthlyCalendar.__docgenInfo={description:"",displayName:"MonthlyCalendar",props:{currentMonth:{defaultValue:null,description:"",name:"currentMonth",required:!0,type:{name:"Date"}},onCurrentMonthChange:{defaultValue:null,description:"",name:"onCurrentMonthChange",required:!0,type:{name:"(date: Date) => any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#MonthlyCalendar"]={docgenInfo:MonthlyCalendar.__docgenInfo,name:"MonthlyCalendar",path:"src/index.tsx#MonthlyCalendar"})}catch(__react_docgen_typescript_loader_error){}try{DefaultMonthlyEventItem.displayName="DefaultMonthlyEventItem",DefaultMonthlyEventItem.__docgenInfo={description:"",displayName:"DefaultMonthlyEventItem",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},date:{defaultValue:null,description:"",name:"date",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#DefaultMonthlyEventItem"]={docgenInfo:DefaultMonthlyEventItem.__docgenInfo,name:"DefaultMonthlyEventItem",path:"src/index.tsx#DefaultMonthlyEventItem"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyBody.displayName="WeeklyBody",WeeklyBody.__docgenInfo={description:"",displayName:"WeeklyBody",props:{style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}},events:{defaultValue:null,description:"",name:"events",required:!0,type:{name:"(EventItem & { date: Date; })[]"}},renderItem:{defaultValue:null,description:"",name:"renderItem",required:!0,type:{name:"(item: RenderItemProps) => ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#WeeklyBody"]={docgenInfo:WeeklyBody.__docgenInfo,name:"WeeklyBody",path:"src/index.tsx#WeeklyBody"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyCalendar.displayName="WeeklyCalendar",WeeklyCalendar.__docgenInfo={description:"",displayName:"WeeklyCalendar",props:{week:{defaultValue:null,description:"",name:"week",required:!0,type:{name:"Date"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#WeeklyCalendar"]={docgenInfo:WeeklyCalendar.__docgenInfo,name:"WeeklyCalendar",path:"src/index.tsx#WeeklyCalendar"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyContainer.displayName="WeeklyContainer",WeeklyContainer.__docgenInfo={description:"",displayName:"WeeklyContainer",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#WeeklyContainer"]={docgenInfo:WeeklyContainer.__docgenInfo,name:"WeeklyContainer",path:"src/index.tsx#WeeklyContainer"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyDays.displayName="WeeklyDays",WeeklyDays.__docgenInfo={description:"",displayName:"WeeklyDays",props:{omitDays:{defaultValue:null,description:"",name:"omitDays",required:!1,type:{name:"number[]"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#WeeklyDays"]={docgenInfo:WeeklyDays.__docgenInfo,name:"WeeklyDays",path:"src/index.tsx#WeeklyDays"})}catch(__react_docgen_typescript_loader_error){}try{DefaultWeeklyEventItem.displayName="DefaultWeeklyEventItem",DefaultWeeklyEventItem.__docgenInfo={description:"",displayName:"DefaultWeeklyEventItem",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},date:{defaultValue:null,description:"",name:"date",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#DefaultWeeklyEventItem"]={docgenInfo:DefaultWeeklyEventItem.__docgenInfo,name:"DefaultWeeklyEventItem",path:"src/index.tsx#DefaultWeeklyEventItem"})}catch(__react_docgen_typescript_loader_error){}},490:function(module,exports,__webpack_require__){__webpack_require__(491),__webpack_require__(647),__webpack_require__(648),__webpack_require__(806),__webpack_require__(1026),__webpack_require__(1059),__webpack_require__(1064),__webpack_require__(1076),__webpack_require__(1078),__webpack_require__(1083),__webpack_require__(1085),module.exports=__webpack_require__(1089)},558:function(module,exports){},648:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(368)}},[[490,1,2]]]);
2 | //# sourceMappingURL=main.a929e9ffade578b84d8a.bundle.js.map


--------------------------------------------------------------------------------
/storybook-static/main.a929e9ffade578b84d8a.bundle.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1085:function(module,exports,__webpack_require__){"use strict";__webpack_require__(10),__webpack_require__(3),__webpack_require__(50),__webpack_require__(1086),__webpack_require__(44),__webpack_require__(45),__webpack_require__(1087),__webpack_require__(35),__webpack_require__(46);var _clientApi=__webpack_require__(60),_clientLogger=__webpack_require__(39),_configFilename=__webpack_require__(1088);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i where the content\n *    is wrapped by a div with box-sizing set to `content-box`.\n *\n *    https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n *    By default, the way the browser specifies that an element should have no\n *    border is by setting it's border-style to `none` in the user-agent\n *    stylesheet.\n *\n *    In order to easily add borders to elements by just setting the `border-width`\n *    property, we change the default border-style for all elements to `solid`, and\n *    use border-width to hide them instead. This way our `border` utilities only\n *    need to set the `border-width` property instead of the entire `border`\n *    shorthand, making our border utilities much more straightforward to compose.\n *\n *    https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n  border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n  border-style: solid;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton {\n  cursor: pointer;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their instrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-y-reverse: 0;\n  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n\n.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-opacity: 1;\n  border-color: rgba(229, 231, 235, var(--tw-divide-opacity));\n}\n\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n}\n\n.border-indigo-600 {\n  --tw-border-opacity: 1;\n  border-color: rgba(79, 70, 229, var(--tw-border-opacity));\n}\n\n.hover\\:border-gray-500:hover {\n  --tw-border-opacity: 1;\n  border-color: rgba(107, 114, 128, var(--tw-border-opacity));\n}\n\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-t-2 {\n  border-top-width: 2px;\n}\n\n.border-r-2 {\n  border-right-width: 2px;\n}\n\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n\n.border-l-2 {\n  border-left-width: 2px;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.block {\n  display: block;\n}\n\n.flex {\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.grid {\n  display: grid;\n}\n\n.hidden {\n  display: none;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.flex-1 {\n  flex: 1 1 0%;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-bold {\n  font-weight: 700;\n}\n\n.h-48 {\n  height: 12rem;\n}\n\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.mr-4 {\n  margin-right: 1rem;\n}\n\n.mb-4 {\n  margin-bottom: 1rem;\n}\n\n.ml-4 {\n  margin-left: 1rem;\n}\n\n.max-h-36 {\n  max-height: 9rem;\n}\n\n.max-h-96 {\n  max-height: 24rem;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-scroll {\n  overflow-x: scroll;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n.p-2 {\n  padding: 0.5rem;\n}\n\n.p-4 {\n  padding: 1rem;\n}\n\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n* {\n  --tw-shadow: 0 0 #0000;\n}\n\n* {\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgba(107, 114, 128, var(--tw-text-opacity));\n}\n\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgba(31, 41, 55, var(--tw-text-opacity));\n}\n\n.w-32 {\n  width: 8rem;\n}\n\n.w-72 {\n  width: 18rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.gap-2 {\n  gap: 0.5rem;\n}\n\n.grid-cols-1 {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n@media (min-width: 640px) {\n  .sm\\:w-36 {\n    width: 9rem;\n  }\n\n  .sm\\:grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (min-width: 768px) {\n  .md\\:flex {\n    display: flex;\n  }\n\n  .md\\:justify-between {\n    justify-content: space-between;\n  }\n\n  .md\\:w-3\\/4 {\n    width: 75%;\n  }\n\n  .md\\:grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n\n  .md\\:grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n}\n\n@media (min-width: 1024px) {\n  .lg\\:block {\n    display: block;\n  }\n\n  .lg\\:hidden {\n    display: none;\n  }\n\n  .lg\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .lg\\:grid-cols-5 {\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n  }\n\n  .lg\\:grid-cols-6 {\n    grid-template-columns: repeat(6, minmax(0, 1fr));\n  }\n\n  .lg\\:grid-cols-7 {\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n  }\n}\n\n@media (min-width: 1280px) {\n}\n\n@media (min-width: 1536px) {\n}\n",""]),module.exports=exports},1100:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"BasicWeeklyCalendar",(function(){return BasicWeeklyCalendar}));__webpack_require__(19),__webpack_require__(322),__webpack_require__(4),__webpack_require__(0);var date_fns__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(220),date_fns__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(219),date_fns__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(105),date_fns__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(487),date_fns__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(218),_src__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(49),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__=(__webpack_require__(476),__webpack_require__(6)),BasicWeeklyCalendar=function BasicWeeklyCalendar(args){return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div",{className:"border p-4 md:w-3/4 lg:w-1/2 w-full",children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_src__WEBPACK_IMPORTED_MODULE_9__.g,{week:args.week,children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(_src__WEBPACK_IMPORTED_MODULE_9__.h,{children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_src__WEBPACK_IMPORTED_MODULE_9__.i,{omitDays:args.hideWeekend?[0,6]:void 0}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_src__WEBPACK_IMPORTED_MODULE_9__.f,{style:{maxHeight:args.hideWeekend?"18rem":"26rem"},events:[{title:"Janet smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_4__.a)(new Date,3)},{title:"Max Smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_4__.a)(new Date,1)},{title:"Code",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_5__.a)(new Date,4)},{title:"Call Emma",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_5__.a)(new Date,3)},{title:"Eat lunch",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_5__.a)(new Date,2)},{title:"Sleep",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_5__.a)(new Date,1)},{title:"Meeting with Bob",date:new Date},{title:"John smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_6__.a)(new Date,1)},{title:"Jane doe",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_6__.a)(new Date,3)},{title:"Janet smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_4__.a)(new Date,4)},{title:"Max Smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_4__.a)(new Date,5)},{title:"John smith",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_6__.a)(new Date,4)},{title:"Jane doe",date:Object(date_fns__WEBPACK_IMPORTED_MODULE_6__.a)(new Date,5)}],renderItem:function renderItem(_ref){var item=_ref.item,showingFullWeek=_ref.showingFullWeek;return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_src__WEBPACK_IMPORTED_MODULE_9__.b,{title:item.title,date:showingFullWeek?Object(date_fns__WEBPACK_IMPORTED_MODULE_7__.a)(item.date,"MMM do k:mm"):Object(date_fns__WEBPACK_IMPORTED_MODULE_7__.a)(item.date,"k:mm")},item.date.toISOString())}})]})})})};BasicWeeklyCalendar.displayName="BasicWeeklyCalendar",__webpack_exports__.default={title:"Weekly Calendar",component:BasicWeeklyCalendar,parameters:{controls:{expanded:!0}},argTypes:{hideWeekend:{description:"Sets an array of days to hide, 0 is Sunday, 1 is monday, etc",control:"boolean"},week:{description:"The current week to view",control:"date",defaultValue:Object(date_fns__WEBPACK_IMPORTED_MODULE_8__.a)(new Date)}}},BasicWeeklyCalendar.parameters=Object.assign({storySource:{source:"args => {\n  return (\n    
    \n      \n        \n          \n           (\n              \n            )}\n          />\n        \n      \n    
    \n  );\n}"}},BasicWeeklyCalendar.parameters)},1105:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"BasicMonthlyCalendar",(function(){return Monthly_stories_BasicMonthlyCalendar})),__webpack_require__.d(__webpack_exports__,"MyMonthlyCalendar",(function(){return Monthly_stories_MyMonthlyCalendar})),__webpack_require__.d(__webpack_exports__,"AsyncEvents",(function(){return Monthly_stories_AsyncEvents}));__webpack_require__(121),__webpack_require__(19),__webpack_require__(20),__webpack_require__(322),__webpack_require__(100),__webpack_require__(14),__webpack_require__(294),__webpack_require__(4),__webpack_require__(17),__webpack_require__(3),__webpack_require__(12),__webpack_require__(23),__webpack_require__(16),__webpack_require__(15),__webpack_require__(18),__webpack_require__(13),__webpack_require__(5),__webpack_require__(29);var react=__webpack_require__(0),startOfMonth=__webpack_require__(1112),subHours=__webpack_require__(219),format=__webpack_require__(487),src=__webpack_require__(49),addHours=(__webpack_require__(476),__webpack_require__(486)),addDays=__webpack_require__(105),subDays=__webpack_require__(220),addMonths=__webpack_require__(485),events={firstMonth:[{title:"Call John",date:Object(subHours.a)(new Date,2)},{title:"Call John",date:Object(subHours.a)(new Date,1)},{title:"Meeting with Bob",date:new Date},{title:"Bike Appt",date:Object(addHours.a)(new Date,3)},{title:"John Hilmer",date:Object(addDays.a)(new Date,3)},{title:"Jane Call",date:Object(subDays.a)(new Date,4)},{title:"Sound alarm",date:Object(addDays.a)(new Date,6)},{title:"Soccer Practice",date:Object(subDays.a)(new Date,3)},{title:"Alert",date:Object(addHours.a)(Object(subDays.a)(new Date,4),4)},{title:"Donation",date:Object(addDays.a)(new Date,6)}],secondMonth:[{title:"Meeting Next Month",date:Object(addMonths.a)(new Date,1)}]},jsx_runtime=__webpack_require__(6);function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n  let [currentMonth, setCurrentMonth] = useState(\n    startOfMonth(new Date())\n  );\n\n  return (\n    \n      \n      \n          data.map((item, index) => (\n            \n          ))\n        }\n      />\n    \n  );\n}"}},Monthly_stories_BasicMonthlyCalendar.parameters),Monthly_stories_MyMonthlyCalendar.parameters=Object.assign({storySource:{source:"args => {\n  let [currentMonth, setCurrentMonth] = useState(\n    startOfMonth(new Date())\n  );\n  let eventItems =\n    //use firstMonth array if its the current month\n    currentMonth.toISOString() == startOfMonth(new Date()).toISOString()\n      ? events.firstMonth\n      : events.secondMonth;\n\n  return (\n    \n      \n      \n          data.map((item, index) => (\n            \n          ))\n        }\n      />\n    \n  );\n}"}},Monthly_stories_MyMonthlyCalendar.parameters),Monthly_stories_AsyncEvents.parameters=Object.assign({storySource:{source:"args => {\n  let [currentMonth, setCurrentMonth] = useState(\n    startOfMonth(new Date())\n  );\n  let myEvents = useEventsByMonth(currentMonth);\n\n  return (\n    \n      \n      \n          data.map((item, index) => (\n            \n          ))\n        }\n      />\n    \n  );\n}"}},Monthly_stories_AsyncEvents.parameters)},476:function(module,exports,__webpack_require__){var api=__webpack_require__(1097),content=__webpack_require__(1098);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},49:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"d",(function(){return MonthlyCalendar_MonthlyCalendar})),__webpack_require__.d(__webpack_exports__,"e",(function(){return MonthlyCalendar_MonthlyNav})),__webpack_require__.d(__webpack_exports__,"c",(function(){return MonthlyCalendar_MonthlyBody})),__webpack_require__.d(__webpack_exports__,"a",(function(){return MonthlyEventItems_DefaultMonthlyEventItem})),__webpack_require__.d(__webpack_exports__,"g",(function(){return WeeklyCalendar_WeeklyCalendar})),__webpack_require__.d(__webpack_exports__,"h",(function(){return WeeklyCalendar_WeeklyContainer})),__webpack_require__.d(__webpack_exports__,"i",(function(){return WeeklyCalendar_WeeklyDays})),__webpack_require__.d(__webpack_exports__,"f",(function(){return WeeklyCalendar_WeeklyBody})),__webpack_require__.d(__webpack_exports__,"b",(function(){return WeeklyEventItems_DefaultWeeklyEventItem}));__webpack_require__(19),__webpack_require__(50),__webpack_require__(66),__webpack_require__(74),__webpack_require__(1094),__webpack_require__(20),__webpack_require__(322);var startOfMonth=__webpack_require__(1112),eachDayOfInterval=__webpack_require__(1113),endOfMonth=__webpack_require__(1114),subMonths=__webpack_require__(1115),format=__webpack_require__(487),getYear=__webpack_require__(1116),addMonths=__webpack_require__(485),getDay=__webpack_require__(1117),isSameDay=__webpack_require__(1120),react=__webpack_require__(0),react_default=__webpack_require__.n(react),daysInWeek=[{day:0,label:"Sunday"},{day:1,label:"Monday"},{day:2,label:"Tuesday"},{day:3,label:"Wednesday"},{day:4,label:"Thursday"},{day:5,label:"Friday"},{day:6,label:"Saturday"}],jsx_runtime=__webpack_require__(6),MonthlyCalendarContext=react_default.a.createContext({}),MonthlyCalendar_useMonthlyCalendar=function useMonthlyCalendar(){return Object(react.useContext)(MonthlyCalendarContext)},MonthlyCalendar_MonthlyCalendar=function MonthlyCalendar(_ref){var currentMonth=_ref.currentMonth,onCurrentMonthChange=_ref.onCurrentMonthChange,children=_ref.children,monthStart=Object(startOfMonth.a)(currentMonth),days=Object(eachDayOfInterval.a)({start:monthStart,end:Object(endOfMonth.a)(monthStart)});return Object(jsx_runtime.jsx)(MonthlyCalendarContext.Provider,{value:{days:days,onCurrentMonthChange:onCurrentMonthChange,currentMonth:monthStart},children:children})};MonthlyCalendar_MonthlyCalendar.displayName="MonthlyCalendar";var MonthlyCalendar_MonthlyNav=function MonthlyNav(){var _useMonthlyCalendar=MonthlyCalendar_useMonthlyCalendar(),currentMonth=_useMonthlyCalendar.currentMonth,onCurrentMonthChange=_useMonthlyCalendar.onCurrentMonthChange;return Object(jsx_runtime.jsxs)("div",{className:"flex justify-end mb-4",children:[Object(jsx_runtime.jsx)("button",{onClick:function onClick(){return onCurrentMonthChange(Object(subMonths.a)(currentMonth,1))},className:"cursor-pointer",children:"Previous"}),Object(jsx_runtime.jsx)("div",{className:"ml-4 mr-4 w-32 text-center","aria-label":"Current Month",children:Object(format.a)(currentMonth,Object(getYear.a)(currentMonth)===Object(getYear.a)(new Date)?"LLLL":"LLLL yyyy")}),Object(jsx_runtime.jsx)("button",{onClick:function onClick(){return onCurrentMonthChange(Object(addMonths.a)(currentMonth,1))},className:"cursor-pointer",children:"Next"})]})};MonthlyCalendar_MonthlyNav.displayName="MonthlyNav";function MonthlyCalendar_MonthlyBody(_ref3){var omitDays=_ref3.omitDays,events=_ref3.events,renderDay=_ref3.renderDay,_handleOmittedDays=function handleOmittedDays(_ref2){var days=_ref2.days,omitDays=_ref2.omitDays,headings=daysInWeek,daysToRender=days;omitDays&&(headings=daysInWeek.filter((function(day){return!omitDays.includes(day.day)})),daysToRender=days.filter((function(day){return!omitDays.includes(Object(getDay.a)(day))})));var firstDayOfMonth=Object(getDay.a)(daysToRender[0]);if(omitDays){var subtractOmittedDays=omitDays.filter((function(day){return day ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Monthly/MonthlyCalendar.tsx#MonthlyBody"]={docgenInfo:MonthlyCalendar_MonthlyBody.__docgenInfo,name:"MonthlyBody",path:"src/Monthly/MonthlyCalendar.tsx#MonthlyBody"})}catch(__react_docgen_typescript_loader_error){}try{MonthlyCalendar_MonthlyCalendar.displayName="MonthlyCalendar",MonthlyCalendar_MonthlyCalendar.__docgenInfo={description:"",displayName:"MonthlyCalendar",props:{currentMonth:{defaultValue:null,description:"",name:"currentMonth",required:!0,type:{name:"Date"}},onCurrentMonthChange:{defaultValue:null,description:"",name:"onCurrentMonthChange",required:!0,type:{name:"(date: Date) => any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Monthly/MonthlyCalendar.tsx#MonthlyCalendar"]={docgenInfo:MonthlyCalendar_MonthlyCalendar.__docgenInfo,name:"MonthlyCalendar",path:"src/Monthly/MonthlyCalendar.tsx#MonthlyCalendar"})}catch(__react_docgen_typescript_loader_error){}var MonthlyEventItems_DefaultMonthlyEventItem=function DefaultMonthlyEventItem(_ref){var title=_ref.title,date=_ref.date;return Object(jsx_runtime.jsx)("li",{className:"py-2",children:Object(jsx_runtime.jsxs)("div",{className:"flex text-sm flex-1 justify-between",children:[Object(jsx_runtime.jsx)("h3",{className:"font-medium",children:title}),Object(jsx_runtime.jsx)("p",{className:"text-gray-500",children:date})]})})};MonthlyEventItems_DefaultMonthlyEventItem.displayName="DefaultMonthlyEventItem";try{MonthlyEventItems_DefaultMonthlyEventItem.displayName="DefaultMonthlyEventItem",MonthlyEventItems_DefaultMonthlyEventItem.__docgenInfo={description:"",displayName:"DefaultMonthlyEventItem",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},date:{defaultValue:null,description:"",name:"date",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Monthly/MonthlyEventItems.tsx#DefaultMonthlyEventItem"]={docgenInfo:MonthlyEventItems_DefaultMonthlyEventItem.__docgenInfo,name:"DefaultMonthlyEventItem",path:"src/Monthly/MonthlyEventItems.tsx#DefaultMonthlyEventItem"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__(17),__webpack_require__(3),__webpack_require__(12),__webpack_require__(14),__webpack_require__(23),__webpack_require__(16),__webpack_require__(15),__webpack_require__(18),__webpack_require__(13),__webpack_require__(5),__webpack_require__(29);var startOfWeek=__webpack_require__(218),setDay=__webpack_require__(1118),isSameWeek=__webpack_require__(1119);function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i) => ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Weekly/WeeklyCalendar.tsx#WeeklyBody"]={docgenInfo:WeeklyCalendar_WeeklyBody.__docgenInfo,name:"WeeklyBody",path:"src/Weekly/WeeklyCalendar.tsx#WeeklyBody"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyCalendar_WeeklyCalendar.displayName="WeeklyCalendar",WeeklyCalendar_WeeklyCalendar.__docgenInfo={description:"",displayName:"WeeklyCalendar",props:{week:{defaultValue:null,description:"",name:"week",required:!0,type:{name:"Date"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Weekly/WeeklyCalendar.tsx#WeeklyCalendar"]={docgenInfo:WeeklyCalendar_WeeklyCalendar.__docgenInfo,name:"WeeklyCalendar",path:"src/Weekly/WeeklyCalendar.tsx#WeeklyCalendar"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyCalendar_WeeklyContainer.displayName="WeeklyContainer",WeeklyCalendar_WeeklyContainer.__docgenInfo={description:"",displayName:"WeeklyContainer",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Weekly/WeeklyCalendar.tsx#WeeklyContainer"]={docgenInfo:WeeklyCalendar_WeeklyContainer.__docgenInfo,name:"WeeklyContainer",path:"src/Weekly/WeeklyCalendar.tsx#WeeklyContainer"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyCalendar_WeeklyDays.displayName="WeeklyDays",WeeklyCalendar_WeeklyDays.__docgenInfo={description:"",displayName:"WeeklyDays",props:{omitDays:{defaultValue:null,description:"",name:"omitDays",required:!1,type:{name:"number[]"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Weekly/WeeklyCalendar.tsx#WeeklyDays"]={docgenInfo:WeeklyCalendar_WeeklyDays.__docgenInfo,name:"WeeklyDays",path:"src/Weekly/WeeklyCalendar.tsx#WeeklyDays"})}catch(__react_docgen_typescript_loader_error){}var WeeklyEventItems_DefaultWeeklyEventItem=function DefaultWeeklyEventItem(_ref){var title=_ref.title,date=_ref.date;return Object(jsx_runtime.jsx)("li",{className:"py-4 w-72",children:Object(jsx_runtime.jsxs)("div",{className:"text-sm flex justify-between",children:[Object(jsx_runtime.jsx)("h3",{className:"font-medium",children:title}),Object(jsx_runtime.jsx)("p",{className:"text-gray-500",children:date})]})})};WeeklyEventItems_DefaultWeeklyEventItem.displayName="DefaultWeeklyEventItem";try{WeeklyEventItems_DefaultWeeklyEventItem.displayName="DefaultWeeklyEventItem",WeeklyEventItems_DefaultWeeklyEventItem.__docgenInfo={description:"",displayName:"DefaultWeeklyEventItem",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},date:{defaultValue:null,description:"",name:"date",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Weekly/WeeklyEventItems.tsx#DefaultWeeklyEventItem"]={docgenInfo:WeeklyEventItems_DefaultWeeklyEventItem.__docgenInfo,name:"DefaultWeeklyEventItem",path:"src/Weekly/WeeklyEventItems.tsx#DefaultWeeklyEventItem"})}catch(__react_docgen_typescript_loader_error){}try{MonthlyBody.displayName="MonthlyBody",MonthlyBody.__docgenInfo={description:"",displayName:"MonthlyBody",props:{omitDays:{defaultValue:null,description:"",name:"omitDays",required:!1,type:{name:"number[]"}},events:{defaultValue:null,description:"",name:"events",required:!0,type:{name:"(MonthData & ExtraMonthData)[]"}},renderDay:{defaultValue:null,description:"",name:"renderDay",required:!0,type:{name:"(data: (MonthData & ExtraMonthData)[]) => ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#MonthlyBody"]={docgenInfo:MonthlyBody.__docgenInfo,name:"MonthlyBody",path:"src/index.tsx#MonthlyBody"})}catch(__react_docgen_typescript_loader_error){}try{MonthlyCalendar.displayName="MonthlyCalendar",MonthlyCalendar.__docgenInfo={description:"",displayName:"MonthlyCalendar",props:{currentMonth:{defaultValue:null,description:"",name:"currentMonth",required:!0,type:{name:"Date"}},onCurrentMonthChange:{defaultValue:null,description:"",name:"onCurrentMonthChange",required:!0,type:{name:"(date: Date) => any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#MonthlyCalendar"]={docgenInfo:MonthlyCalendar.__docgenInfo,name:"MonthlyCalendar",path:"src/index.tsx#MonthlyCalendar"})}catch(__react_docgen_typescript_loader_error){}try{DefaultMonthlyEventItem.displayName="DefaultMonthlyEventItem",DefaultMonthlyEventItem.__docgenInfo={description:"",displayName:"DefaultMonthlyEventItem",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},date:{defaultValue:null,description:"",name:"date",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#DefaultMonthlyEventItem"]={docgenInfo:DefaultMonthlyEventItem.__docgenInfo,name:"DefaultMonthlyEventItem",path:"src/index.tsx#DefaultMonthlyEventItem"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyBody.displayName="WeeklyBody",WeeklyBody.__docgenInfo={description:"",displayName:"WeeklyBody",props:{style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}},events:{defaultValue:null,description:"",name:"events",required:!0,type:{name:"(EventItem & { date: Date; })[]"}},renderItem:{defaultValue:null,description:"",name:"renderItem",required:!0,type:{name:"(item: RenderItemProps) => ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#WeeklyBody"]={docgenInfo:WeeklyBody.__docgenInfo,name:"WeeklyBody",path:"src/index.tsx#WeeklyBody"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyCalendar.displayName="WeeklyCalendar",WeeklyCalendar.__docgenInfo={description:"",displayName:"WeeklyCalendar",props:{week:{defaultValue:null,description:"",name:"week",required:!0,type:{name:"Date"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#WeeklyCalendar"]={docgenInfo:WeeklyCalendar.__docgenInfo,name:"WeeklyCalendar",path:"src/index.tsx#WeeklyCalendar"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyContainer.displayName="WeeklyContainer",WeeklyContainer.__docgenInfo={description:"",displayName:"WeeklyContainer",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#WeeklyContainer"]={docgenInfo:WeeklyContainer.__docgenInfo,name:"WeeklyContainer",path:"src/index.tsx#WeeklyContainer"})}catch(__react_docgen_typescript_loader_error){}try{WeeklyDays.displayName="WeeklyDays",WeeklyDays.__docgenInfo={description:"",displayName:"WeeklyDays",props:{omitDays:{defaultValue:null,description:"",name:"omitDays",required:!1,type:{name:"number[]"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#WeeklyDays"]={docgenInfo:WeeklyDays.__docgenInfo,name:"WeeklyDays",path:"src/index.tsx#WeeklyDays"})}catch(__react_docgen_typescript_loader_error){}try{DefaultWeeklyEventItem.displayName="DefaultWeeklyEventItem",DefaultWeeklyEventItem.__docgenInfo={description:"",displayName:"DefaultWeeklyEventItem",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},date:{defaultValue:null,description:"",name:"date",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/index.tsx#DefaultWeeklyEventItem"]={docgenInfo:DefaultWeeklyEventItem.__docgenInfo,name:"DefaultWeeklyEventItem",path:"src/index.tsx#DefaultWeeklyEventItem"})}catch(__react_docgen_typescript_loader_error){}},490:function(module,exports,__webpack_require__){__webpack_require__(491),__webpack_require__(647),__webpack_require__(648),__webpack_require__(806),__webpack_require__(1026),__webpack_require__(1059),__webpack_require__(1064),__webpack_require__(1076),__webpack_require__(1078),__webpack_require__(1083),__webpack_require__(1085),module.exports=__webpack_require__(1089)},558:function(module,exports){},648:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(368)}},[[490,1,2]]]);
2 | //# sourceMappingURL=main.a929e9ffade578b84d8a.bundle.js.map


--------------------------------------------------------------------------------