{"id":21358222,"url":"https://github.com/tangsy/react-hash-calendar","last_synced_at":"2025-07-13T00:33:36.407Z","repository":{"id":37773144,"uuid":"315366717","full_name":"TangSY/react-hash-calendar","owner":"TangSY","description":"移动端日期、时间选择插件，日期选择面板以日历形式展示。上下滑动切换周/月模式。支持两种模式：1，月模式，左右滑动切换月份。2、周模式，左右滑动切换周。","archived":false,"fork":false,"pushed_at":"2022-08-04T03:23:27.000Z","size":585,"stargazers_count":45,"open_issues_count":8,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-15T23:41:54.434Z","etag":null,"topics":["calendar","calendar-component","calendar-picker","datepicker","datetimepicker","mobile-calendar","react-calendar"],"latest_commit_sha":null,"homepage":"https://www.hxkj.vip/demo/react-calendar/","language":"TypeScript","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/TangSY.png","metadata":{"files":{"readme":"README-en_US.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-23T15:59:27.000Z","updated_at":"2024-09-12T06:33:24.000Z","dependencies_parsed_at":"2022-07-19T01:02:18.710Z","dependency_job_id":null,"html_url":"https://github.com/TangSY/react-hash-calendar","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/TangSY%2Freact-hash-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TangSY%2Freact-hash-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TangSY%2Freact-hash-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TangSY%2Freact-hash-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TangSY","download_url":"https://codeload.github.com/TangSY/react-hash-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225844795,"owners_count":17533161,"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","calendar-component","calendar-picker","datepicker","datetimepicker","mobile-calendar","react-calendar"],"created_at":"2024-11-22T05:15:05.784Z","updated_at":"2024-11-22T05:15:06.301Z","avatar_url":"https://github.com/TangSY.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![version](https://img.shields.io/npm/v/react-hash-calendar.svg)](https://www.npmjs.com/package/react-hash-calendar)\n[![download](https://img.shields.io/npm/dt/react-hash-calendar.svg)](https://www.npmjs.com/package/react-hash-calendar)\n![license](https://img.shields.io/badge/license-MIT-blue.svg)\n[![author](https://img.shields.io/badge/author-HashTang-orange.svg)](https://www.hxkj.vip)\n\n[简体中文](https://github.com/TangSY/react-hash-calendar/blob/master/README-zh_CN.md) | English\n\n## Using Effects\n\n![calendar.gif](https://www.hxkj.vip/demo/calendar/calendar.gif)\n![dot.gif](https://www.hxkj.vip/demo/calendar/dot.gif)\n![week.gif](https://www.hxkj.vip/demo/calendar/week.gif)\n\nThe same calendar for Vue：[https://github.com/TangSY/vue-hash-calendar](https://github.com/TangSY/vue-hash-calendar)\n\n# react-hash-calendar\n\n- Support gesture sliding operation\n- Slide up and down to switch weekly / monthly mode\n\n  \u003e [week mode] slide left and right to switch the previous week / next week\n\n  \u003e [month mode] slide left and right to switch the previous month / next month\n\n## Install\n\n```\nnpm i react-hash-calendar\n```\n```\nimport { ReactHashCalendar } from 'react-hash-calendar'\n\nfunction App () {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cReactHashCalendar model=\"inline\"\u003e\u003c/ReactHashCalendar\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n## Demo\n\n![demo_qrcode.png](https://www.hxkj.vip/demo/react-calendar/demo.png)\n\nonline demo：[https://www.hxkj.vip/demo/react-calendar/](https://www.hxkj.vip/demo/react-calendar/)\n\n- 🎉 can you give me a star? 🎉\n\n### github link：[https://github.com/TangSY/react-hash-calendar](https://github.com/TangSY/react-hash-calendar)\n\n## API\n\n| name                | describle                                                                                                                                                                                                                   | type                                  |    default     |\n| :------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------ | :------------: |\n| visible             | To control the display or hide of calendar components                                                                                                                                                                       | boolean                               |     false      |\n| onVisibleChange     | params { visible }                                                                                                                                                                                                          | (visible: boolean) =\u003e void            |       -        |\n| scrollChangeDate    | Controls whether the selected date is modified when sliding                                                                                                                                                                 | boolean                               |      true      |\n| model               | What form is the calendar component displayed. Inline: the way to inline. Dialog: pop up mode                                                                                                                               | string                                |     inline     |\n| defaultDatetime     | --                                                                                                                                                                                                                          | Date                                  |      now       |\n| format              | The date format returned by the callback event when confirming the date. eg: \"YY / mm / DD HH: mm\" , \"MM DD,YY at hh:mm F\"                                                                                                  | string                                | YY/MM/DD hh:mm |\n| weekStart           | Use the day of the week as the starting week of each week in the calendar. choose: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']                                                             | string                                |     sunday     |\n| pickerType          | Selector Type. choose: 'datetime', 'date', 'time'                                                                                                                                                                           | string                                |    datetime    |\n| showTodayButton     | --                                                                                                                                                                                                                          | boolean                               |      true      |\n| isShowWeekView      | --                                                                                                                                                                                                                          | boolean                               |     false      |\n| isShowAction        | --                                                                                                                                                                                                                          | boolean                               |      true      |\n| disabledWeekView    | --                                                                                                                                                                                                                          | boolean                               |     false      |\n| disabledDate        | Set the disabled status of the date (returned true to disabled)                                                                                                                                                             | Function                              |       -        |\n| disabledScroll      | Set the no sliding direction of the calendar. choose: 'left', 'right', 'up', 'down', 'horizontal', 'vertical', true, false]                                                                                                 | string                                |       ''       |\n| markDate            | he date to be marked can be grouped according to different colors and mark types (no grouped, the default is blue). eg：[{color: 'red',date: ['2019/02/25']},{color: 'blue',type: 'dot',date: ['2019/01/20']},'2019/03/20'] | Array                                 |       []       |\n| markType            | Mark pattern type. choose: 'dot', 'circle', 'dot+circle'                                                                                                                                                                    | string                                |      dot       |\n| minuteStep          | --                                                                                                                                                                                                                          | number                                |       1        |\n| lang                | Language. choose: 'CN', 'EN'                                                                                                                                                                                                | string                                |       CN       |\n| dateClickCallback   | --                                                                                                                                                                                                                          | (date: Date \\| string) =\u003e void        |       -        |\n| dateConfirmCallback | --                                                                                                                                                                                                                          | (date: Date \\| string) =\u003e void        |       -        |\n| touchStartCallback  | --                                                                                                                                                                                                                          | (event: React.TouchEvent) =\u003e void     |       -        |\n| touchMoveCallback   | --                                                                                                                                                                                                                          | (event: React.TouchEvent) =\u003e void     |       -        |\n| touchEndCallback    | --                                                                                                                                                                                                                          | (event: React.TouchEvent) =\u003e void     |       -        |\n| slideChangeCallback | --                                                                                                                                                                                                                          | (direction: string) =\u003e void           |       -        |\n| weekSlot            | Customize week content and style。                                                                                                                                                                                          | (week: string) =\u003e React.ReactNode     |       -        |\n| daySlot             | Customize date content and style                                                                                                                                                                                            | (date, extendAttr) =\u003e React.ReactNode |       -        |\n| todaySlot           | Customize today button content and style                                                                                                                                                                                    | () =\u003e React.ReactNode                 |       -        |\n| confirmSlot         | Customize dconfirmate button content and style                                                                                                                                                                              | () =\u003e React.ReactNode                 |       -        |\n| actionSlot          | Customize action content and style                                                                                                                                                                                          | () =\u003e React.ReactNode                 |       -        |\n\n### Other\n\n- If there are other problems or incompatible functions. Can communicate by email 't@tsy6.com', or GitHub submits the issue.\n\n### Sponsor\n\n![pay.jpg](https://www.hxkj.vip/demo/calendar/pay.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangsy%2Freact-hash-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftangsy%2Freact-hash-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangsy%2Freact-hash-calendar/lists"}