{"id":28279248,"url":"https://github.com/delpikye-v/react-calendar","last_synced_at":"2026-01-27T04:04:22.157Z","repository":{"id":47570039,"uuid":"516186996","full_name":"delpikye-v/react-calendar","owner":"delpikye-v","description":"React calendar - testing","archived":false,"fork":false,"pushed_at":"2025-10-08T09:29:02.000Z","size":1177,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-27T09:44:01.797Z","etag":null,"topics":["calendar","library","react-calendar"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-calendar-z","language":null,"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/delpikye-v.png","metadata":{"files":{"readme":"README.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-07-21T01:39:13.000Z","updated_at":"2025-10-08T09:29:06.000Z","dependencies_parsed_at":"2024-10-31T20:00:43.904Z","dependency_job_id":"1d6c6f39-b446-4b88-aa0c-7431f9537bed","html_url":"https://github.com/delpikye-v/react-calendar","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"1fddb655231a29786aefd5f3f971544b5935bf8f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/delpikye-v/react-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delpikye-v%2Freact-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delpikye-v%2Freact-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delpikye-v%2Freact-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delpikye-v%2Freact-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/delpikye-v","download_url":"https://codeload.github.com/delpikye-v/react-calendar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delpikye-v%2Freact-calendar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28800950,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T03:44:14.111Z","status":"ssl_error","status_checked_at":"2026-01-27T03:43:33.507Z","response_time":168,"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","library","react-calendar"],"created_at":"2025-05-21T09:14:16.734Z","updated_at":"2026-01-27T04:04:22.152Z","avatar_url":"https://github.com/delpikye-v.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"## ✨ react-calendar-z\n\n**Lightweight, customizable React calendar component** supporting single and range date selection.\n\n- No dependency on momentjs/dayjs — pure JS.\n- Fully configurable week start, month/year selection, bookmarks, and localized labels.\n\n---\n\n[![NPM](https://img.shields.io/npm/v/react-calendar-z.svg)](https://www.npmjs.com/package/react-calendar-z)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n![Downloads](https://img.shields.io/npm/dt/react-calendar-z.svg)\n\n---\n\n### 🌟 Demo\n\n👉 [Codesandbox](https://codesandbox.io/s/86omu9)\n\n---\n\n### 🚀 Features\n\n- **Lightweight \u0026 Fast** — no external date libraries required.\n- **Customizable Week Start:** `monday`, `sunday`, `friday`, or `saturday`.\n- **Range Selection** — easily limit selectable dates.\n- **Month / Year / Decade Navigation**\n- **Bookmarks** — mark important dates with custom classes.\n- **Keyboard Accessible + ARIA roles**\n- **Pure React Hook Design**\n- **Fully Customizable Labels, Formats, and Locales**\n- **Ref-based API** to control calendar programmatically.\n\n---\n\n### 📦 Installation\n\n```bash\nnpm install react-calendar-z\n```\n\nor\n\n```bash\nyarn add react-calendar-z\n```\n\n---\n\n### ⚡ Quick Example\n\n```tsx\nimport React, { useState } from \"react\";\nimport \"react-calendar-z/build/styles.css\";\nimport Calendar from \"react-calendar-z\";\n\nfunction App() {\n  const [date, setDate] = useState(new Date(2022, 7, 10));\n\n  return (\n    \u003cdiv\u003e\n      \u003cCalendar\n        value={date}\n        onSelectedValue={setDate}\n        // weekStart=\"monday\"\n        // showMonthYearSelection\n        // focusable\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n---\n\n### ⚙️ Props\n\n| Prop                       | Type                                                                                | Description                        |\n| -------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------- |\n| `className`                | `string`                                                                            | CSS class for main container       |\n| `todayClassName`           | `string`                                                                            | CSS class for today date           |\n| `selectedClassName`        | `string`                                                                            | CSS class for selected date        |\n| `neighborMonthClassName`   | `string`                                                                            | CSS class for neighbor month dates |\n| `labelMonthYearClassName`  | `string`                                                                            | CSS class for month/year label     |\n| `weekClassName`            | `string`                                                                            | CSS class for week row             |\n| `width`                    | `string \\| number`                                                                  | Calendar width                     |\n| `height`                   | `string \\| number`                                                                  | Calendar height                    |\n| `readOnly`                 | `boolean`                                                                           | Disable date selection             |\n| `isVisible`                | `boolean`                                                                           | Show or hide calendar              |\n| `showAnchor`               | `boolean`                                                                           | Show anchor element                |\n| `labelNext`                | `string \\| React.ReactNode`                                                         | Label for next button              |\n| `labelBack`                | `string \\| React.ReactNode`                                                         | Label for back button              |\n| `weekStart`                | `TWeekStart`                                                                        | Start day of the week              |\n| `showOnlyCurrentMonthDays` | `boolean`                                                                           | Hide dates from other months       |\n| `notBeforeTime`            | `Date`                                                                              | Minimum selectable date            |\n| `notAfterTime`             | `Date`                                                                              | Maximum selectable date            |\n| `value`                    | `Date`                                                                              | Selected date                      |\n| `bookmarkDates`            | `IBookmarkDate[]`                                                                   | Highlight specific dates           |\n| `focusable`                | `boolean`                                                                           | Allow keyboard focus               |\n| `showToday`                | `boolean`                                                                           | Highlight today                    |\n| `i18nLabelWeek`            | `IWeekLabel[] \\| string[]`                                                          | Localized week labels              |\n| `i18nLabelMonth`           | `string[]`                                                                          | Localized month labels             |\n| `minYear`                  | `number`                                                                            | Minimum year selectable            |\n| `maxYear`                  | `number`                                                                            | Maximum year selectable            |\n| `minimumDayCanExceedToday` | `boolean`                                                                           | Only allow dates larger than today |\n| `showMonthYearSelection`   | `boolean`                                                                           | Enable month/year selection        |\n| `showNextBack`             | `boolean`                                                                           | Show next/back navigation buttons  |\n| `rightNextBack`            | `boolean`                                                                           | Align navigation buttons to right  |\n| `maxHeightSelectMonth`     | `number \\| string`                                                                  | Max height for month dropdown      |\n| `maxHeightSelectYear`      | `number \\| string`                                                                  | Max height for year dropdown       |\n| `showFooter`               | `boolean`                                                                           | Show footer with selected date     |\n| `showXClose`               | `boolean`                                                                           | Show close (X) button              |\n| `xCloseIcon`               | `string \\| React.ReactNode`                                                         | Custom close icon                  |\n| `onSelectedValue`          | `(value: Date) =\u003e void`                                                             | Callback when date is selected     |\n| `onChangeView`             | `(mode: TModeView) =\u003e void`                                                         | Callback when view mode changes    |\n| `onClickWeekLabel`         | `(weekLabel: IWeekLabel) =\u003e void`                                                   | Callback on week label click       |\n| `formatTitleYearMonth`     | `(year: number, month: number, decadeData?: number[]) =\u003e string \\| React.ReactNode` | Custom format for title display    |\n| `formatDayValue`           | `(day: number) =\u003e string \\| React.ReactNode`                                        | Custom day display in calendar     |\n| `formatSelectedDate`       | `(date: Date) =\u003e string \\| React.ReactNode`                                         | Custom format for selected date    |\n\n---\n\n## 📘 Ref API\n\n```bash\nexport interface ICalendarRef {\n  /** Reset current selected date */\n  resetSelectedDate: () =\u003e void;\n\n  /** Set calendar to a specific date */\n  setValue: (date: Date) =\u003e void;\n\n  /** Get the current selected date */\n  getSelectedDate: () =\u003e Date;\n\n  /** Change current view mode (date, month, year, decade) */\n  changeMode: (mode: TModeView) =\u003e void;\n\n  /** Navigate to next/previous month */\n  nextMonth: () =\u003e void;\n  prevMonth: () =\u003e void;\n\n  /** Navigate to next/previous year */\n  nextYear: () =\u003e void;\n  prevYear: () =\u003e void;\n\n  /** Navigate to next/previous decade */\n  nextDecade: () =\u003e void;\n  prevDecade: () =\u003e void;\n\n  /** Select a specific date, month, or year programmatically */\n  selectDate: (date: Date) =\u003e void;\n  selectMonth: (month: number) =\u003e void;\n  selectYear: (year: number) =\u003e void;\n\n  /** Focus the current day (today) */\n  focusToday: () =\u003e void;\n}\n```\n\n---\n\n## 📷 Preview\n\n![Date-Calendar](https://github.com/delpikye-v/react-calendar/blob/main/date.png)\n![Month View](https://github.com/delpikye-v/react-calendar/blob/main/month.png)\n![Year View](https://github.com/delpikye-v/react-calendar/blob/main/year.png)\n![Selection](https://github.com/delpikye-v/react-calendar/blob/main/selection.png)\n\n---\n\n---\n\n### 📋 License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdelpikye-v%2Freact-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdelpikye-v%2Freact-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdelpikye-v%2Freact-calendar/lists"}