{"id":24618101,"url":"https://github.com/winkgroup/react-calendar","last_synced_at":"2026-04-15T18:02:15.174Z","repository":{"id":45634490,"uuid":"433391415","full_name":"WINKgroup/react-calendar","owner":"WINKgroup","description":"A calendar component which is highly customizable yet plug and play for most use cases","archived":false,"fork":false,"pushed_at":"2023-05-10T20:36:20.000Z","size":1845,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-03T23:12:03.372Z","etag":null,"topics":["calendar","css","html","library","react","typescript"],"latest_commit_sha":null,"homepage":"https://winkgroup.github.io/react-calendar/","language":"TypeScript","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/WINKgroup.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":"2021-11-30T10:42:08.000Z","updated_at":"2023-03-27T09:06:52.000Z","dependencies_parsed_at":"2025-03-18T21:55:37.066Z","dependency_job_id":"45933119-3003-4ee2-be3c-87df590ac06f","html_url":"https://github.com/WINKgroup/react-calendar","commit_stats":null,"previous_names":["winkgroup/wink-react-calendar"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/WINKgroup/react-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WINKgroup%2Freact-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WINKgroup%2Freact-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WINKgroup%2Freact-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WINKgroup%2Freact-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WINKgroup","download_url":"https://codeload.github.com/WINKgroup/react-calendar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WINKgroup%2Freact-calendar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31853279,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"ssl_error","status_checked_at":"2026-04-15T15:24:39.138Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","css","html","library","react","typescript"],"created_at":"2025-01-24T23:49:47.363Z","updated_at":"2026-04-15T18:02:15.153Z","avatar_url":"https://github.com/WINKgroup.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WiNK React Calendar\n\n[![npm](https://img.shields.io/npm/v/wink-react-calendar)](https://www.npmjs.com/package/wink-react-calendar)\n[![Website Status](https://img.shields.io/website?url=https%3A%2F%2Fwinkgroup.github.io%2Freact-calendar%2F)](https://winkgroup.github.io/react-calendar/)\n[![downloads](https://img.shields.io/npm/dt/wink-react-calendar?label=downloads)](https://www.npmjs.com/package/wink-react-calendar)\n\nA calendar component which is highly customizable yet plug and play for most usual use cases.\n\n[\u003cimg alt=\"calendar preview\" src=\"https://winkgroup.github.io/react-calendar/calendar_month_preview.png\" height=\"200px\"/\u003e](https://winkgroup.github.io/react-calendar/)\n\n## Table of contents\n\n1. [Why should I use this?](#why-should-i-use-this)\n1. [I want to give it a try!](#i-want-to-give-it-a-try)\n1. [Get Started](#get-started)\n1. [Usage](#usage)\n1. [Component Props](#component-props)\n1. [TypeScript Support](#typescript-support)\n1. [Contribute](#contribute)\n1. [Roadmap](#roadmap)\n1. [Maintainers](#maintainers)\n\n## Why should I use this?\n\n- ✅ Get things done quickly with `singleSelection` and `rangeSelection` modes\n- 🎨 Or do your own thing with `custom` mode and get creative\n- 📅 Calendar events? We've got you covered\n- 📱 Responsive and mobile first\n- 🔥 Continuously updated\n- ✅ Layout built with the flexible CSS [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)\n- ⏰ Built on top of the modern and lightweight [Luxon](https://moment.github.io/luxon/#/)\n\n## I want to give it a try!\n\nYou can check out the demo [here](https://winkgroup.github.io/react-calendar/).\n\n## Get Started\nInstall the package\n```\n$ npm i wink-react-calendar\n```\nor\n```\n$ yarn add wink-react-calendar\n```\n\n## Usage\n\n1. Import the css module\n```\nimport 'wink-react-calendar/dist/css/style.css';\n```\n\n2. Import and use the component\n```\nimport { CalendarMonth } from 'wink-react-calendar';\n\n...\n\nconst [date, setDate] = useState();\n\n...\n\n\u003cCalendarMonth\n  mode='singleSelection'\n  selectedDate={date}\n  onCellClick={setDate}\n/\u003e\n```\n## Component Props\n\n\u003cb\u003eCalendarMonth\u003c/b\u003e\n\n| Name | Type | Default | Description\n| --- | --- | --- | --- |\n| mode | 'singleSelection' \\| 'rangeSelection' \\| 'custom' | undefined | Define the mode of the calendar\n| currentMonth | Timestamp | Current month | Current month visualized on the calendar |\n| className | string | undefined | Custom class for the outer container |\n| weekDaysExceptions | WeekDay[] | [] | Weekdays to exclude from being rendered |\n| cellsConfig | BaseCalendarMonthCellConfig[] | [] | Custom config for any cell based on date |\n| minDate | Timestamp | undefined | Disable any cell which date is before this param |\n| maxDate | Timestamp | undefined | Disable any cell which date is after this param |\n| weeks | number | 6 | Number of weeks to be rendered at the same time |\n| opaqueExtraMonthCells | boolean | true | Render cells which date doesn't belong to current month with a opaque style |\n| borderCurrentDay | boolean | true | Render current day with a bordered style |\n| navigateToCorrespondingMonth | boolean | true | Navigate to the corresponding month of a cell which date doesn't belong to current month | \n| showWeekDaysLabels | boolean | true | Show weekdays labels on top |\n| height | string \\| number | '100%' | Height of the calendar |\n| width | string \\| number | '100%' | Width of the calendar |\n| showExtraMonthCells | boolean | true | Render or not cells which date doesn't belong to current month |\n| events | CalendarEvent[] | [] | Events to be shown inside of the calendar cells |\n| selectedDate | Timestamp | undefined | (singleSelection mode only) The current selected day which by default is shown with an active style |\n| startDate | Timestamp | undefined | (rangeSelection mode only) Starting date of the range |\n| endDate | Timestamp | undefined | (rangeSelection mode only) Ending date of the range |\n| cellComponent | (props: CalendarMonthCellProps) =\u003e JSX.Element | CalendarMonthCell | Component for the cell of a day |\n| onCellClick | (date: Timestamp) =\u003e void | undefined | Triggered when a cell is clicked |\n| onMonthChange | (date: Timestamp) =\u003e void | undefined | Triggered when the current month is changed |\n| onSelectStartDate | (date?: Timestamp) =\u003e void | undefined | (rangeSelection mode only) Triggered when first date is selected |\n| onSelectEndDate | (date?: Timestamp) =\u003e void | undefined | (rangeSelection mode only) Triggered when second date is selected |\n| onCellMouseEnter | (date: Timestamp) =\u003e void | undefined | Triggered when a cell is hovered |\n| onCellMouseLeave | (date: Timestamp) =\u003e void | undefined | Triggered when a cell is no longer hovered |\n\n## TypeScript Support\n\nThe package comes with types included.\n\n## Contribute\n\nContributions are very welcome. Not all PRs may be merged but please don't take it personally!\n\n1. Fork and clone the repository\n\n1. Install package dependencies\n\n   ```\n   npm install\n   ```\n\n1. Build on file changes\n\n   ```\n   npm run watch:scss\n   ```\n   and on another terminal\n   ```\n   npm run watch:tsc\n   ```\n\n1. Or build once\n\n   ```\n   npm run build\n   ```\n\n## Roadmap\n\n- [x] Add instructions in the README on how to build and run this package for contributors.\n- [ ] Separate CSS in two separate modules:\n   1. Unstyled which contains layout only CSS. Developer may only import this to style  in their own way.\n   1. Styled which contains CSS that provides developers a ready-to-use styled calendar.\n- [ ] Make sure that all elements have a (good) classname set to them so that developers can easily style them through CSS.\n- [ ] Make a documentation on all those classnames.\n- [ ] Optionally style differently weekend days.\n- [ ] Add picker of months, years, (decades?) accessible through the header.\n- [ ] We could provide style customization through SASS similiar to what [Bootstrap does](https://getbootstrap.com/docs/5.0/customize/sass/).\n\n## Maintainers\n\n- [oxcened](https://github.com/oxcened)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinkgroup%2Freact-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinkgroup%2Freact-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinkgroup%2Freact-calendar/lists"}