{"id":13436988,"url":"https://github.com/clauderic/react-infinite-calendar","last_synced_at":"2025-05-13T22:12:13.824Z","repository":{"id":40643785,"uuid":"59526723","full_name":"clauderic/react-infinite-calendar","owner":"clauderic","description":"✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.","archived":false,"fork":false,"pushed_at":"2024-06-29T16:20:36.000Z","size":4102,"stargazers_count":4015,"open_issues_count":83,"forks_count":405,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-05-08T09:42:11.326Z","etag":null,"topics":["calendar","component","date","datepicker","infinite","infinite-scroll","range","react"],"latest_commit_sha":null,"homepage":"http://clauderic.github.io/react-infinite-calendar/","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/clauderic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2016-05-24T00:04:15.000Z","updated_at":"2025-05-07T07:20:36.000Z","dependencies_parsed_at":"2024-11-08T04:43:41.184Z","dependency_job_id":null,"html_url":"https://github.com/clauderic/react-infinite-calendar","commit_stats":{"total_commits":230,"total_committers":9,"mean_commits":"25.555555555555557","dds":0.4956521739130435,"last_synced_commit":"d7a77fc1508cb4ded30e47baabb111a8d6461721"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Freact-infinite-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Freact-infinite-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Freact-infinite-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Freact-infinite-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clauderic","download_url":"https://codeload.github.com/clauderic/react-infinite-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253252339,"owners_count":21878688,"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":["calendar","component","date","datepicker","infinite","infinite-scroll","range","react"],"created_at":"2024-07-31T03:00:53.517Z","updated_at":"2025-05-13T22:12:08.807Z","avatar_url":"https://github.com/clauderic.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","UI Components","Demos","📦 Legacy \u0026 Inactive Projects","\u003csummary\u003eUI Components\u003c/summary\u003e","JavaScript","React","DatePickers"],"sub_categories":["Uncategorized","Form Components","React Components","Date Pickers"],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/clauderic/react-infinite-calendar/master/.github/logo.png\" width=\"180\"/\u003e\n\u003c/div\u003e\n\n# React Infinite Calendar\n**Currently looking for maintainers to help maintain this project, please reach out if you would be interested**\n\n[![npm version](https://img.shields.io/npm/v/react-infinite-calendar.svg)](https://www.npmjs.com/package/react-infinite-calendar)\n[![downloads](https://img.shields.io/npm/dm/react-infinite-calendar.svg)](https://www.npmjs.com/package/react-infinite-calendar)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/clauderic/react-infinite-calendar/blob/master/LICENSE)\n[![Gitter](https://badges.gitter.im/clauderic/react-infinite-calendar.svg)](https://gitter.im/clauderic/react-infinite-calendar)\n### Examples available here: \u003ca href=\"#\"\u003ehttp://clauderic.github.io/react-infinite-calendar/\u003c/a\u003e\n\nFeatures\n---------------\n\n* **Infinite scroll** – Just keep scrollin', just keep scrollin'\n* **Flexible** – Min/max date, disabled dates, disabled days, etc.\n* **Extensible** – Add date range-selection, multiple date selection, or create your own HOC!\n* **Localization and translation** – En français, s'il vous plaît!\n* **Customizeable** – Customize and theme to your heart's content.\n* **Year selection** – For rapidly jumping from year to year\n* **Keyboard support** – ⬆️ ⬇️ ⬆️ ⬇️ ⬅️ ➡️ ⬅️ ➡️ ↩️\n* **Events and callbacks** – beforeSelect, onSelect, onScroll, etc.\n* **Mobile-friendly** – Silky smooth scrolling on mobile\n\n\u003cdiv style=\"padding:30px\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/clauderic/react-infinite-calendar/master/.github/preview.gif\" width=\"300\" /\u003e\n\u003c/div\u003e\n\nGetting Started\n---------------\n\nUsing [npm](https://www.npmjs.com/):\n```\nnpm install react-infinite-calendar --save\n```\n\nES6, CommonJS, and UMD builds are available with each distribution. For example:\n```js\nimport InfiniteCalendar from 'react-infinite-calendar';\nimport 'react-infinite-calendar/styles.css'; // Make sure to import the default stylesheet\n```\n\nYou can also use a global-friendly UMD build:\n```html\n\u003clink rel=\"stylesheet\" href=\"react-infinite-calendar/styles.css\"\u003e\n\u003cscript src=\"react-infinite-calendar/umd/react-infinite-calendar.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar InfiniteCalendar = window.InfiniteCalendar.default;\n...\n\u003c/script\u003e\n```\n\nUsage\n------------\n### Basic Example\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport InfiniteCalendar from 'react-infinite-calendar';\nimport 'react-infinite-calendar/styles.css'; // only needs to be imported once\n\n// Render the Calendar\nvar today = new Date();\nvar lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);\n\nrender(\n \u003cInfiniteCalendar\n width={400}\n height={600}\n selected={today}\n disabledDays={[0,6]}\n minDate={lastWeek}\n /\u003e,\n document.getElementById('root')\n);\n```\nFor more usage examples, see [http://clauderic.github.io/react-infinite-calendar/](http://clauderic.github.io/react-infinite-calendar/) or check out some [code examples](https://github.com/clauderic/react-infinite-calendar/tree/master/examples).\n\n### Prop Types\n| Property | Type | Default | Description |\n|:---------------|:----------------|:-------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| selected | Date or Boolean | `new Date()` | Value of the date that appears to be selected. Set to `false` if you don't wish to have a date initially selected. |\n| width | Number | `400` | Width of the calendar, in pixels |\n| height | Number | `600` | Height of the calendar, in pixels |\n| min | Date | `new Date(1980, 0, 1)` | The minimum month that can be scrolled to. |\n| max | Date | `new Date(2050, 11, 31)` | The maximum month that can be scrolled to. |\n| minDate | Date | `new Date(1980, 0, 1)` | The minimum date that is selectable. |\n| maxDate | Date | `new Date(2050, 11, 31)` | The maximum date that is selectable. |\n| disabledDays | Array\u003cNumber\u003e | | Array of days of the week that should be disabled. For example, to disable Monday and Sunday: `[0, 6]` |\n| disabledDates | Array\u003cDate\u003e | | Array of dates that should be disabled. For example: `[new Date(2017, 1, 8), new Date(), new Date(2017, 5, 17)]` |\n| display | String | `'days'` | Whether to display the `years` or `days` view. |\n| displayOptions | Object | See\u0026nbsp;[default\u0026nbsp;displayOptions](https://github.com/clauderic/react-infinite-calendar/blob/master/src/utils/defaultDisplayOptions.js) | See [display options](#display-options) section for more details. |\n| locale | Object | See\u0026nbsp;[default\u0026nbsp;locale](https://github.com/clauderic/react-infinite-calendar/blob/master/src/utils/defaultLocale.js) | By default, React Infinite Calendar comes with the `English` locale. You can use this to change the language, or change the first day of the week. See [date-fns documentation](https://date-fns.org/docs/I18n) for more details |\n| theme | Object | See\u0026nbsp;[default\u0026nbsp;theme](https://github.com/clauderic/react-infinite-calendar/blob/master/src/utils/defaultTheme.js) | Basic customization of the colors |\n| className | String | | Optional CSS class name to append to the root `InfiniteCalendar` element. |\n| onSelect | Function | | Callback invoked after beforeSelect() returns true, but before the state of the calendar updates |\n| onScroll | Function | | Callback invoked when the scroll offset changes. `function (scrollTop: number) {}` |\n| onScrollEnd | Function | | Callback invoked `150ms` after the last onScroll event is triggered. `function (scrollTop: number) {}` |\n| rowHeight | Number | `56` | Height of each row in the calendar (each week is considered a `row`) |\n| autoFocus | Boolean | `true` | Whether the Calendar root should be auto-focused when it mounts. This is useful when `keyboardSupport` is enabled (the calendar must be focused to listen for keyboard events) |\n| tabIndex | Number | `1` | Tab-index of the calendar |\n\n### Display Options\n| Property | Type | Default | Description |\n|:---------------------|:--------|:-------------|:-------------------------------------------------------------------------------------------------------------------------------------------------|\n| layout | String | `'portrait'` | Layout of the calendar. Should be one of `'portrait'` or `'landscape'` |\n| showHeader | Boolean | `true` | Show/hide the header |\n| shouldHeaderAnimate | Boolean | `true` | Enable/Disable the header animation |\n| showOverlay | Boolean | `true` | Show/hide the month overlay when scrolling |\n| showTodayHelper | Boolean | `true` | Show/hide the floating back to `Today` helper |\n| showWeekdays | Boolean | `true` | Show/hide the weekdays in the header |\n| hideYearsOnSelect | Boolean | `true` | Whether to automatically hide the `years` view on select. |\n| overscanMonthCount | Number | `4` | Number of months to render above/below the visible months. Tweaking this can help reduce flickering during scrolling on certain browers/devices. |\n| todayHelperRowOffset | Number | `4` | This controls the number of rows to scroll past before the *Today* helper appears |\n\nExample usage of display options:\n```jsx\n\u003cInfiniteCalendar\n displayOptions={{\n layout: 'landscape',\n showOverlay: false,\n shouldHeaderAnimate: false\n }}\n/\u003e\n```\n\nDependencies\n------------\nReact Infinite Calendar has very few dependencies. It relies on [`react-tiny-virtual-list`](https://github.com/clauderic/react-tiny-virtual-list) for virtualization and [`date-fns`](https://github.com/date-fns/date-fns) for handling date manipulation. It also uses [recompose](https://github.com/acdlite/recompose) for extending the default functionality. It also has the following peerDependencies: [`react`](https://www.npmjs.com/package/react), and [`react-transition-group`](https://www.npmjs.com/package/react-transition-group).\n\nReporting Issues\n----------------\nIf you find an [issue](https://github.com/clauderic/react-infinite-calendar/issues), please report it along with any relevant details to reproduce it. The easiest way to do so is to [fork this sandbox on CodeSandbox](https://codesandbox.io/s/zroj1zp7v4).\n\nContributions\n------------\nYes please! Feature requests / pull requests are welcome. [Learn how to contribute](https://github.com/clauderic/react-infinite-calendar/blob/master/CONTRIBUTING.md)\n\nHave a suggestion or just want to say hello? Come chat on [Gitter](https://gitter.im/clauderic/react-infinite-calendar)!\n\nLicense\n---------\n*react-infinite-calendar* is available under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclauderic%2Freact-infinite-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclauderic%2Freact-infinite-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclauderic%2Freact-infinite-calendar/lists"}