{"id":13436918,"url":"https://github.com/react-component/calendar","last_synced_at":"2025-10-23T17:50:31.542Z","repository":{"id":24399568,"uuid":"27799867","full_name":"react-component/calendar","owner":"react-component","description":"React Calendar","archived":false,"fork":false,"pushed_at":"2024-01-01T14:41:41.000Z","size":31238,"stargazers_count":1707,"open_issues_count":143,"forks_count":496,"subscribers_count":51,"default_branch":"9.x","last_synced_at":"2025-05-08T01:05:41.956Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://react-component.github.io/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/react-component.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-12-10T03:10:20.000Z","updated_at":"2025-04-26T08:20:08.000Z","dependencies_parsed_at":"2024-01-15T03:41:39.553Z","dependency_job_id":null,"html_url":"https://github.com/react-component/calendar","commit_stats":{"total_commits":652,"total_committers":124,"mean_commits":5.258064516129032,"dds":0.6042944785276074,"last_synced_commit":"9fe06438a0c9b380e72b029f87d32fbb0103e080"},"previous_names":[],"tags_count":235,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fcalendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fcalendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fcalendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fcalendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-component","download_url":"https://codeload.github.com/react-component/calendar/tar.gz/refs/heads/9.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253474205,"owners_count":21914227,"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":[],"created_at":"2024-07-31T03:00:53.020Z","updated_at":"2025-10-23T17:50:26.481Z","avatar_url":"https://github.com/react-component.png","language":"JavaScript","readme":"# rc-calendar\n---\n\nReact Calendar\n\n[![NPM version][npm-image]][npm-url]\n[![build status][travis-image]][travis-url]\n[![Test coverage][codecov-image]][codecov-url]\n[![gemnasium deps][gemnasium-image]][gemnasium-url]\n[![npm download][download-image]][download-url]\n[![Code Quality: Javascript][lgtm-badge]][lgtm-badge-url]\n[![Total alerts][lgtm-alerts]][lgtm-alerts-url]\n\n[npm-image]: http://img.shields.io/npm/v/rc-calendar.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/rc-calendar\n[travis-image]: https://img.shields.io/travis/react-component/calendar.svg?style=flat-square\n[travis-url]: https://travis-ci.org/react-component/calendar\n[codecov-image]: https://img.shields.io/codecov/c/github/react-component/calendar/master.svg?style=flat-square\n[codecov-url]: https://codecov.io/gh/react-component/calendar/branch/master\n[gemnasium-image]: http://img.shields.io/gemnasium/react-component/calendar.svg?style=flat-square\n[gemnasium-url]: https://gemnasium.com/react-component/calendar\n[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square\n[node-url]: http://nodejs.org/download/\n[download-image]: https://img.shields.io/npm/dm/rc-calendar.svg?style=flat-square\n[download-url]: https://npmjs.org/package/rc-calendar\n[lgtm-badge]: https://img.shields.io/lgtm/grade/javascript/g/react-component/calendar.svg?logo=lgtm\u0026logoWidth=18\n[lgtm-badge-url]: https://lgtm.com/projects/g/react-component/calendar/context:javascript\n[lgtm-alerts]: https://img.shields.io/lgtm/alerts/g/react-component/calendar.svg?logo=lgtm\u0026logoWidth=18\n[lgtm-alerts-url]: https://lgtm.com/projects/g/react-component/calendar/alerts\n\n## Screenshots\n\n\u003cimg src=\"https://img.alicdn.com/tps/TB1mYC8KVXXXXaHXXXXXXXXXXXX-566-678.png\" width=\"288\"/\u003e\n\n\u003cimg src=\"https://img.alicdn.com/tps/TB1KW1HKVXXXXa9aXXXXXXXXXXX-578-694.png\" width=\"288\"/\u003e\n\n\u003cimg src=\"https://img.alicdn.com/tps/TB1QYqPKVXXXXasXVXXXXXXXXXX-1196-712.png\" width=\"288\"/\u003e\n\n\u003cimg src=\"https://img.alicdn.com/tps/TB1nAGDKVXXXXXvapXXXXXXXXXX-1206-730.png\" width=\"500\"/\u003e\n\n## Feature\n\n* support ie9,ie9+,chrome,firefox,safari\n* support date, month, year, decade select panel\n* support week number\n* support en_US and zh_CN locale(UI), use moment.utcOffset to set timezone\n* support aria and keyboard accessibility\n\n### Keyboard\n\n* Previous month (PageUp)\n* Next month (PageDown)\n* tab into hour input: Last hour(Up), Next hour(Down)\n* tab into hour input: Last minute(Up), Next minute(Down)\n* tab into hour input: Last second(Up), Next second(Down)\n* Last year (Control + left)\n* Next year (Control + right)\n\n## install\n\n[![rc-calendar](https://nodei.co/npm/rc-calendar.png)](https://npmjs.org/package/rc-calendar)\n\n## Usage\n\n```js\nimport Calendar from 'rc-calendar';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nReactDOM.render(\u003cCalendar /\u003e, container);\n```\n\n## Development\n\n```\nnpm install\nnpm start\n```\n\n## Example\n\nhttp://localhost:8002/examples/\n\nonline example:\n\nhttp://react-component.github.io/calendar/examples/index.html\n\n## API\n\n### rc-calendar props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eprefixCls\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eprefixCls of this component\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eclassName\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eadditional css class of root dom node\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003estyle\u003c/td\u003e\n          \u003ctd\u003eObject\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eadditional style of root dom node\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edateRender\u003c/td\u003e\n          \u003ctd\u003e(current, value) =\u003e React.Node\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003edate cell\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003erenderSidebar\u003c/td\u003e\n          \u003ctd\u003e() =\u003e React.Node\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eside bar\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003erenderFooter\u003c/td\u003e\n          \u003ctd\u003e(mode) =\u003e React.Node\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eextra footer\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003evalue\u003c/td\u003e\n          \u003ctd\u003emoment\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecurrent value like input's value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edefaultValue\u003c/td\u003e\n          \u003ctd\u003emoment\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003edefaultValue like input's defaultValue\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003elocale\u003c/td\u003e\n          \u003ctd\u003eObject\u003c/td\u003e\n          \u003ctd\u003eimport from 'rc-calendar/lib/locale/en_US'\u003c/td\u003e\n          \u003ctd\u003ecalendar locale\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eformat\u003c/td\u003e\n          \u003ctd\u003eString | String[]\u003c/td\u003e\n          \u003ctd\u003edepends on whether you set timePicker and your locale\u003c/td\u003e\n          \u003ctd\u003euse to format/parse date(without time) value to/from input.  \n          When an array is provided, all values are used for parsing and first value for display.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edisabledDate\u003c/td\u003e\n          \u003ctd\u003eFunction(current:moment):Boolean\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ewhether to disable select of current date\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edisabledTime\u003c/td\u003e\n          \u003ctd\u003eFunction(current:moment):Object\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ea function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eshowDateInput\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n          \u003ctd\u003ewhether to show input on top of calendar panel\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eshowWeekNumber\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003ewhether to show week number of year\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eshowToday\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n          \u003ctd\u003ewhether to show today button\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eshowOk\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003eauto\u003c/td\u003e\n          \u003ctd\u003ewhether has ok button in footer\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003etimePicker\u003c/td\u003e\n          \u003ctd\u003eReact Element\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003erc-timer-picker/lib/module/panel element\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonSelect\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when a date is selected from calendar\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonClear\u003c/td\u003e\n          \u003ctd\u003eFunction()\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when a date is cleared from calendar\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonChange\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when a date is changed inside calendar (next year/next month/keyboard)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonOk\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when ok button is pressed, only if it's visible\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edateInputPlaceholder\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003edate input's placeholder\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003emode\u003c/td\u003e\n          \u003ctd\u003eenum('time', 'date', 'month', 'year', 'decade')\u003c/td\u003e\n          \u003ctd\u003e'date'\u003c/td\u003e\n          \u003ctd\u003econtrol which kind of panel should be shown\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonPanelChange\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment, mode)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when panel changed\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eclearIcon\u003c/td\u003e\n          \u003ctd\u003eReactNode\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003especific the clear icon.\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n          \u003ctd\u003einputMode\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003etext\u003c/td\u003e\n          \u003ctd\u003eChange the keyboard in mobile device\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n### rc-calendar/lib/RangeCalendar props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eprefixCls\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eprefixCls of this component\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eclassName\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eadditional css class of root dom node\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003estyle\u003c/td\u003e\n          \u003ctd\u003eObject\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eadditional style of root dom node\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003erenderSidebar\u003c/td\u003e\n          \u003ctd\u003e() =\u003e React.Node\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eside bar\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003erenderFooter\u003c/td\u003e\n          \u003ctd\u003e() =\u003e React.Node\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eextra footer\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eselectedValue\u003c/td\u003e\n          \u003ctd\u003emoment[]\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecurrent selected value range. with two elements.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edefaultSelectedValue\u003c/td\u003e\n          \u003ctd\u003emoment[]\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003edefault selected value range\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003elocale\u003c/td\u003e\n          \u003ctd\u003eObject\u003c/td\u003e\n          \u003ctd\u003eimport from 'rc-calendar/lib/locale/en_US'\u003c/td\u003e\n          \u003ctd\u003ecalendar locale\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eformat\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003edepends on whether you set timePicker and your locale\u003c/td\u003e\n          \u003ctd\u003euse to format/parse date(without time) value to/from input\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edisabledDate\u003c/td\u003e\n          \u003ctd\u003eFunction(current:moment):Boolean\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ewhether to disable select of current date\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eshowWeekNumber\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003ewhether to show week number of year\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eshowToday\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n          \u003ctd\u003ewhether to show today button\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eshowOk\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003eauto\u003c/td\u003e\n          \u003ctd\u003ewhether has ok button in footer\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eshowClear\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003ewhether has clear button in header\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003etimePicker\u003c/td\u003e\n          \u003ctd\u003eReact Element\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003erc-timer-picker/lib/module/panel element\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonSelect\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment[])\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when a date range is selected from calendar\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonInputSelect\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment[])\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when a valid date entered in input\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonClear\u003c/td\u003e\n          \u003ctd\u003eFunction()\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when a date range is cleared from calendar\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonChange\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment[])\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when a date range is changed inside calendar (next year/next month/keyboard)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonOk\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when ok button is pressed, only if it's visible\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edateInputPlaceholder\u003c/td\u003e\n          \u003ctd\u003eString[]\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003erange date input's placeholders\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edisabledTime\u003c/td\u003e\n          \u003ctd\u003eFunction(current: moment[], type:'start'|'end'):Object\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ea function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eshowDateInput\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n          \u003ctd\u003ewhether to show date inputs on top of calendar panels\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003etype\u003c/td\u003e\n          \u003ctd\u003eenum('both','start', 'end')\u003c/td\u003e\n          \u003ctd\u003eboth\u003c/td\u003e\n          \u003ctd\u003ewhether fix start or end selected value. check start-end-range example\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003emode\u003c/td\u003e\n          \u003ctd\u003eenum('date', 'month', 'year', 'decade')[]\u003c/td\u003e\n          \u003ctd\u003e['date', 'date']\u003c/td\u003e\n          \u003ctd\u003econtrol which kind of panels should be shown\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonPanelChange\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment[], mode)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when panels changed\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003ehoverValue\u003c/td\u003e\n          \u003ctd\u003emoment[]\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003econtrol hover value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonHoverChange\u003c/td\u003e\n          \u003ctd\u003eFunction(hoverValue: moment[])\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when hover value change\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eclearIcon\u003c/td\u003e\n          \u003ctd\u003eReactNode\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003especific the clear icon.\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n### rc-calendar/lib/MonthCalendar props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eprefixCls\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eprefixCls of this component\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eclassName\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eadditional css class of root dom node\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003estyle\u003c/td\u003e\n          \u003ctd\u003eObject\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eadditional style of root dom node\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003evalue\u003c/td\u003e\n          \u003ctd\u003emoment\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecurrent value like input's value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edefaultValue\u003c/td\u003e\n          \u003ctd\u003emoment\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003edefaultValue like input's defaultValue\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003elocale\u003c/td\u003e\n          \u003ctd\u003eObject\u003c/td\u003e\n          \u003ctd\u003eimport from 'rc-calendar/lib/locale/en_US'\u003c/td\u003e\n          \u003ctd\u003ecalendar locale\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edisabledDate\u003c/td\u003e\n          \u003ctd\u003eFunction(current:moment):Boolean\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ewhether to disable select of current month\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonSelect\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when a date is selected from calendar\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003emonthCellRender\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eCustom month cell render method\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003emonthCellContentRender\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eCustom month cell content render method,the content will be appended to the cell.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonChange\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when a date is changed inside calendar (next year/next month/keyboard)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003erenderFooter\u003c/td\u003e\n          \u003ctd\u003e() =\u003e React.Node\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eextra footer\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n### rc-calendar/lib/Picker props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eprefixCls\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eprefixCls of this component\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003ecalendar\u003c/td\u003e\n          \u003ctd\u003eCalendar React Element\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edisabled\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ewhether picker is disabled\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eplacement\u003c/td\u003e\n          \u003ctd\u003eString|Object\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eone of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003ealign\u003c/td\u003e\n          \u003ctd\u003eObject: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003evalue will be merged into placement's align config.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eanimation\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eindex.css support 'slide-up'\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003etransitionName\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecss class for animation\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003evalue\u003c/td\u003e\n          \u003ctd\u003emoment|moment[]\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecurrent value like input's value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edefaultValue\u003c/td\u003e\n          \u003ctd\u003emoment|moment[]\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003edefaultValue like input's defaultValue\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonChange\u003c/td\u003e\n          \u003ctd\u003eFunction\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when select a different value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonOpenChange\u003c/td\u003e\n          \u003ctd\u003e(open:boolean) =\u003e void\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when open/close picker\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eopen\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecurrent open state of picker. controlled prop\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003egetCalendarContainer\u003c/td\u003e\n          \u003ctd\u003e() =\u003e HTMLElement\u003c/td\u003e\n          \u003ctd\u003e() =\u003e {return document.body;}\u003c/td\u003e\n          \u003ctd\u003edom node where calendar to be rendered into\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edropdownClassName\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eadditional className applied to dropdown\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n### rc-calendar/lib/FullCalendar props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eprefixCls\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eprefixCls of this component\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eSelect\u003c/td\u003e\n          \u003ctd\u003eReact Component Class\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003erc-select Component Class\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003evalue\u003c/td\u003e\n          \u003ctd\u003emoment\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecurrent value like input's value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edefaultValue\u003c/td\u003e\n          \u003ctd\u003emoment\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003edefaultValue like input's defaultValue\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edefaultType\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003edate\u003c/td\u003e\n          \u003ctd\u003edefault panel type: date/month\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003etype\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003epanel type: date/month\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonTypeChange\u003c/td\u003e\n          \u003ctd\u003efunction(type)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when panel type change\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003efullscreen\u003c/td\u003e\n          \u003ctd\u003ebool\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003emonthCellRender\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eCustom month cell render method\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edateCellRender\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eCustom date cell render method\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003emonthCellContentRender\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eCustom month cell content render method,the content will be appended to the cell.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edateCellContentRender\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eCustom date cell content render method,the content will be appended to the cell.\u003c/td\u003e\n        \u003c/tr\u003e        \u003ctr\u003e\n          \u003ctd\u003eonSelect\u003c/td\u003e\n          \u003ctd\u003eFunction(date: moment)\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecalled when a date is selected from calendar\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Test Case\n\n```\nnpm test\n```\n\n## Coverage\n\n```\nnpm run coverage\n```\n\nopen coverage/ dir\n\n## License\n\nrc-calendar is released under the MIT license.\n","funding_links":[],"categories":["Uncategorized","JavaScript","UI Components","UI Frameworks","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","DatePickers","react"],"sub_categories":["Uncategorized","Form Components","Responsive"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Fcalendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-component%2Fcalendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Fcalendar/lists"}