{"id":17775169,"url":"https://github.com/erikthedeveloper/react-calendar-components","last_synced_at":"2025-04-21T23:31:27.059Z","repository":{"id":76762679,"uuid":"78643335","full_name":"erikthedeveloper/react-calendar-components","owner":"erikthedeveloper","description":"An experiment exploring composing UI and behavior in React using higher order components for a customizable calendar UI","archived":false,"fork":false,"pushed_at":"2019-05-08T16:14:19.000Z","size":2599,"stargazers_count":23,"open_issues_count":1,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-01T16:55:56.433Z","etag":null,"topics":["experiment","react"],"latest_commit_sha":null,"homepage":"https://erikthedeveloper.github.io/react-calendar-components/?path=/story/calendar--select-range-day-indicators","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erikthedeveloper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-11T13:49:46.000Z","updated_at":"2022-04-20T00:01:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"b9d9f045-8a3d-4721-925e-cb66ab092af8","html_url":"https://github.com/erikthedeveloper/react-calendar-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikthedeveloper%2Freact-calendar-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikthedeveloper%2Freact-calendar-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikthedeveloper%2Freact-calendar-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikthedeveloper%2Freact-calendar-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erikthedeveloper","download_url":"https://codeload.github.com/erikthedeveloper/react-calendar-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250150708,"owners_count":21383215,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["experiment","react"],"created_at":"2024-10-26T21:54:59.035Z","updated_at":"2025-04-21T23:31:26.728Z","avatar_url":"https://github.com/erikthedeveloper.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-calendar-components\n\nA project exploring composing UI and behavior in [React](facebook.github.io/react/) for a customizable calendar component using [higher order components](https://reactjs.org/docs/higher-order-components.html).\n\n![Calendar Storybook](assets/Calendar-Storybook.png)\n\nLive demo: [https://erikthedeveloper.github.io/react-calendar-components/](https://erikthedeveloper.github.io/react-calendar-components/?path=/story/calendar--select-range-day-indicators)\n\n## Summary\n\nTo summarize the overall approach used:\n\n1. Enhance `Calendar` with desired features via applying related higher order components. These can be applied either [singly (example)](https://github.com/erikthedeveloper/react-calendar-components/blob/master/src/stories/Calendar-stories.js#L16-L18) or [by combining multiple (example)](https://github.com/erikthedeveloper/react-calendar-components/blob/master/src/stories/Calendar-stories.js#L47-L50)\n2. Each [`Calendar` higher order component](https://github.com/erikthedeveloper/react-calendar-components/blob/master/src/components/Calendar) is intended to be composable. This is primarily enabled through treating `Day` as a [Component as prop](https://github.com/erikthedeveloper/react-calendar-components/blob/master/src/components/Calendar/Calendar.js#L74)...\n3. ...and having each `Calendar` HoC \"enhance\" its own `props.DayComponent` _(also via composing higher order components)_ [see this usage](https://github.com/erikthedeveloper/react-calendar-components/blob/master/src/components/Calendar/indicators.js#L18-L37)\n4. The [`EnhanceDay` render callback component](https://github.com/erikthedeveloper/react-calendar-components/blob/master/src/components/Calendar/EnhanceDay.js) ensures that each Calendar's `props.DayComponent` is only enhanced as-needed. More generally this enables deriving/computing properties from `props` while avoiding the computed values becoming stale.\n\nIf you're curious to learn more, poke around [src/components/](src/components/), [src/stories/](src/stories/) and play with the live examples via [Storybook](https://getstorybook.io/): [https://erikthedeveloper.github.io/react-calendar-components/](https://erikthedeveloper.github.io/react-calendar-components/?path=/story/calendar--select-range-day-indicators)\n\n## Accessibility\n\nThe calendar UI is built with accessibility in mind. This includes things like accounting for keyboard navigation and providing appropriate aria labels.\n\nExample: Navigating months and selecting a date range using only the keyboard.\n\n![Calendar a11y Select Date Range](assets/Calendar-a11y-01-Select-Range.gif)\n\n\nFor a quality dive into accessibility specific to calendars see this great write up: https://www.24a11y.com/2018/a-new-day-making-a-better-calendar/\n\n## React Concepts\n\n- Higher order components\n- Composing behavior from multiple higher order components\n- Render callbacks\n- Built with [create-react-app](https://github.com/facebookincubator/create-react-app)\n- Writing UI stories with [Storybook](https://getstorybook.io/)\n\n## Other Concepts\n\n- Working with Javascript's [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) API\n- Writing tests with [Jest](https://facebook.github.io/jest/)\n- BEM\n- Flexbox (on a basic level)\n\n## Development\n\n:memo: [`yarn` is interchangeable with `npm`](https://yarnpkg.com/en/docs/migrating-from-npm).\n\n```\ngit clone git@github.com:erikthedeveloper/react-calendar-components.git\ncd react-calendar-components\nyarn install\nyarn start\n```\n\nYou should now be able to view the Storybook on your localhost.\n\nHave fun! 😃\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikthedeveloper%2Freact-calendar-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferikthedeveloper%2Freact-calendar-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikthedeveloper%2Freact-calendar-components/lists"}