{"id":16482639,"url":"https://github.com/mfix22/calendarx","last_synced_at":"2025-04-10T02:21:25.525Z","repository":{"id":40451375,"uuid":"80260209","full_name":"mfix22/calendarx","owner":"mfix22","description":":date: Your go-to, prescribed, Calendar component for React","archived":false,"fork":false,"pushed_at":"2023-01-05T15:01:29.000Z","size":2542,"stargazers_count":112,"open_issues_count":8,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-03T00:05:50.694Z","etag":null,"topics":["accessible","calendar","react","render-props","state-container"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mfix22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["mfix22"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"custom":"https://www.buymeacoffee.com/fix"}},"created_at":"2017-01-28T01:40:30.000Z","updated_at":"2024-03-30T01:57:34.000Z","dependencies_parsed_at":"2023-02-04T06:32:21.846Z","dependency_job_id":null,"html_url":"https://github.com/mfix22/calendarx","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfix22%2Fcalendarx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfix22%2Fcalendarx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfix22%2Fcalendarx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfix22%2Fcalendarx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfix22","download_url":"https://codeload.github.com/mfix22/calendarx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248143112,"owners_count":21054709,"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":["accessible","calendar","react","render-props","state-container"],"created_at":"2024-10-11T13:11:31.161Z","updated_at":"2025-04-10T02:21:25.508Z","avatar_url":"https://github.com/mfix22.png","language":"JavaScript","funding_links":["https://github.com/sponsors/mfix22","https://www.buymeacoffee.com/fix"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e📅 \u003ccode\u003eCalendarx\u003c/code\u003e\u003c/h1\u003e\n\n\u003e Your go-to, prescribed, Calendar component for React\n\nCalendarx is a state container that makes creating custom calendar components a breeze. With a simple API, Calendarx makes it easy to display days and events, change views, and advance between the months, weeks, and days.\n\n[![npm](https://img.shields.io/npm/v/calendarx.svg)](https://www.npmjs.org/package/calendarx)\n[![bundle size](https://badgen.net/bundlephobia/min/calendarx)](https://bundlephobia.com/result?p=rexrex)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg)](#contributors)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)\n\n---\n\n## Getting Started\n\n```sh\nyarn add calendarx\n```\n\nor\n\n```sh\nnpm install calendarx\n```\n\n## Example Usage\n\n```javascript\nimport { Calendar } from 'calendarx'\n\nimport { Row, Column, Events } from './components'\n\nconst events = [{ date: new Date(), id: 'birthday-1' }] // optional\n\nexport default () =\u003e (\n  \u003cCalendar events={events}\u003e\n    {({ days, date, goToNext, goToPrev, goToToday }) =\u003e (\n      \u003cdiv\u003e\n        \u003cRow\u003e\n          \u003cspan\u003e{date.toDateString()}\u003c/span\u003e\n          \u003cbutton onClick={() =\u003e goToPrev()}\u003e\u0026lt;\u003c/button\u003e\n          \u003cbutton onClick={goToToday}\u003eToday\u003c/button\u003e\n          \u003cbutton onClick={() =\u003e goToNext()}\u003e\u0026gt;\u003c/button\u003e\n        \u003c/Row\u003e\n        {days.map((week, i) =\u003e (\n          \u003cRow key={i}\u003e\n            {week.map((day, j) =\u003e (\n              \u003cColumn key={j}\u003e\n                {day.events.map((event) =\u003e (\n                  \u003cEvent isToday={day.isToday} key={event.id} {...event} /\u003e\n                ))}\n              \u003c/Column\u003e\n            ))}\n          \u003c/Row\u003e\n        ))}\n      \u003c/div\u003e\n    )}\n  \u003c/Calendar\u003e\n)\n```\n\nor use as a React hook:\n\n```js\nimport { useCalendar } from 'calendarx'\n\nexport default MyCalendar() {\n  const { days } = useCalendar(options)\n\n // ...\n}\n```\n\nfor an **Advanced** example, check out:\n\n[![Advanced CalendarX Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/q7x1mpy5xj)\n\n## Props\n\n| Name                        | Default                                                                          | Type                                                                     | Description                                                                                                                                                                                                            |\n| :-------------------------- | :------------------------------------------------------------------------------- | :----------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`children`**              | `undefined`                                                                      | `Function`                                                               | Render prop component. See [docs below](#render-props) for the options passed                                                                                                                                          |\n| `initialDate`, `date`       | `new Date()`                                                                     | `Date`, `String`, `Number`, `Moment`                                     | `initialDate` sets the initial state of `date` for uncontrolled usage, otherwise use `date` for controlled usage. Used as the date to center the calendar around                                                       |\n| `initialNumDays`, `numDays` | `35`                                                                             | `Number`                                                                 | Number of days the calendar should display. If `numDays` \u003e 10, this will be raised to the next multiple of 7. Use `initialNumDays` for uncontrolled usage, `numDays` for controlled                                    |\n| `events`                    | `[]`                                                                             | `Array\u003c{ date: DateLike } , { startDate: DateLike, endDate: DateLike }\u003e` | Events passed into the calendar. These objects will be injected into the correct array by date. Use `date` for an event on a specific date, and `startDate` combined with `endDate` for events spanning multiple dates |\n| `weekStartsOn`              | `0`                                                                              | `Number[0-6]`                                                            | Weekday to start the week on. Sunday (0) - Saturday (6)                                                                                                                                                                |\n| `headers`                   | `['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']` | `String[]`                                                               | Replace the headers that get passed to `children`, for convience                                                                                                                                                       |\n| `render`                    | `undefined`                                                                      | `Function`                                                               | Optional, same as `children`                                                                                                                                                                                           |\n\n**Note**: the `Calendarx` days grid will adapt depending on the number of days that are specified\nin `numDays`. For example, if 4 is passed in, the first column will start with your `initialDate`. If 7 is passed in (anything \u003c10), the calendar will align itself to the beginning of the week. If `10 \u003c numDays \u003c 365` (the default is 35), the calendar will align to include the entire month and potentially parts of the previous/next month in order to align the grid with your start of the week (default is Sunday).\n\n## Children Properties\n\nThe following will be passed to your `props.children` or `props.render` function:\n\n| Option      | Type                                                            | Description                                                                        |\n| :---------- | :-------------------------------------------------------------- | :--------------------------------------------------------------------------------- |\n| `days`      | `Day[][]`                                                       | 2-dimensional grid of objects representing each calendar day                       |\n| `date`      | `Date`                                                          | Current `date` state                                                               |\n| `view`      | `String{'year','month','week','day'}`                           | View according to `numDays`. `day` if \u003c=4, `week` if \u003c= 10, month \u003c 365, or `year` |\n| `jump`      | `Function(n: Number, units: {'years','months','weeks','days'})` | Function to jump a specific amount of time                                         |\n| `goToNext`  | `Function()`                                                    | Sets `date` state to next date according to `numDays/view`                         |\n| `goToToday` | `Function()`                                                    | Set the `date` state to today                                                      |\n| `goToPrev`  | `Function()`                                                    | Same as `goToNext`, but in reverse                                                 |\n| `goToDate`  | `Function(date: DateLike)`                                      | Set `date` state to arbitrary date                                                 |\n\n## Types\n\n### `Day`\n\nThis object contains the following fields/getters:\n\n- `date`: `Date`\n- `events`: `Event[]`\n- `isToday`: `Boolean`\n- `isSame(unit: 'year'|'month'|'week'|'day'): Boolean`: `Function`\n\n### `Event`\n\n`Event`s will include the other properties you pass alongside `date` in your `events` prop.\n\n## Contributing\n\nPlease do! If you have ideas, bug fixes, or examples to showcase, please [submit a PR/issue](https://github.com/mfix22/calendarx/pulls).\n\n1. `yarn`\n2. Make your changes\n3. `yarn test`\n4. Push a [PR](https://github.com/mfix22/calendarx/pulls)\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://www.buymeacoffee.com/fix\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/8397708?v=4\" width=\"100px;\" alt=\"Michael Fix\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichael Fix\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mfix22/calendarx/commits?author=mfix22\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/filipemir\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/13949291?v=4\" width=\"100px;\" alt=\"Filipe\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFilipe\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mfix22/calendarx/commits?author=filipemir\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[MIT](https://github.com/mfix22/calendarx/blob/master/LICENSE)\n\n## Inspiration 💫\n\nThis project was inspired by Kyle Stetz's [CLNDR](http://kylestetz.github.io/CLNDR/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfix22%2Fcalendarx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfix22%2Fcalendarx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfix22%2Fcalendarx/lists"}