{"id":13450519,"url":"https://github.com/gregnb/react-use-calendar","last_synced_at":"2025-03-17T16:31:53.129Z","repository":{"id":57347071,"uuid":"173223068","full_name":"gregnb/react-use-calendar","owner":"gregnb","description":"A custom React Hook for implementing a calendar with events","archived":false,"fork":false,"pushed_at":"2019-03-01T12:36:28.000Z","size":141,"stargazers_count":54,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T01:22:38.453Z","etag":null,"topics":["calendar","hooks","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/gregnb.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}},"created_at":"2019-03-01T02:44:25.000Z","updated_at":"2023-09-25T07:22:07.000Z","dependencies_parsed_at":"2022-09-17T23:02:00.399Z","dependency_job_id":null,"html_url":"https://github.com/gregnb/react-use-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/gregnb%2Freact-use-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregnb%2Freact-use-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregnb%2Freact-use-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregnb%2Freact-use-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gregnb","download_url":"https://codeload.github.com/gregnb/react-use-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221696962,"owners_count":16865516,"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","hooks","react"],"created_at":"2024-07-31T07:00:35.579Z","updated_at":"2024-10-27T15:18:07.877Z","avatar_url":"https://github.com/gregnb.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"\n# \u003cimg src=\"https://user-images.githubusercontent.com/19170080/53611182-98bcf200-3b9b-11e9-84c2-32f6432df340.png\" height=\"20\" /\u003e react-use-calendar\n\nCustom React Hook for implementing a calendar with events\n\n[![Build Status](https://travis-ci.org/gregnb/react-use-calendar.svg?branch=master)](https://travis-ci.org/gregnb/react-use-calendar)\n[![Coverage Status](https://coveralls.io/repos/github/gregnb/react-use-calendar/badge.svg?branch=master)](https://coveralls.io/github/gregnb/react-use-calendar?branch=master)\n[![dependencies Status](https://david-dm.org/gregnb/react-use-calendar/status.svg)](https://david-dm.org/gregnb/react-use-calendar)\n[![npm version](https://badge.fury.io/js/react-use-calendar.svg)](https://badge.fury.io/js/react-use-calendar)\n\n\u003cdiv align=\"center\"\u003e\n\t\u003cimg src=\"https://user-images.githubusercontent.com/19170080/53612148-382fb400-3b9f-11e9-9643-34c58abce182.gif\" height=\"240\" /\u003e\n\u003c/div\u003e\n\n## Installation\n\n```\nnpm install react-use-calendar --save\n```\n\n## Demo\n\n[![Edit react-use-calendar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/y0jonx2xvz)\n\n\n## Usage\n\n```javascript\nimport React from 'react';\nimport useCalendar from 'react-use-calendar';\n\nfunction App() {\n\n  const [state, actions] = useCalendar(null, {\n    events: [\n      { \n        startDate: new Date(2019, 1, 27), \n        endDate: new Date(2019, 1, 27),  \n        note: 'Meeting with clients' \n      },\n      { \n        startDate: new Date(2019, 1, 22), \n        endDate: new Date(2019, 1, 25),\n        note: 'Vacation'\n      }\n    ]\n  });\n\n  return (\n    \u003ctable\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\n          \u003ctd colSpan={5} style={{ textAlign: 'center' }}\u003e\n            \u003cstrong\u003e{state.month} - {state.year}\u003c/strong\u003e\n          \u003c/td\u003e\n          \u003ctd colSpan={2} style={{ textAlign: 'right' }}\u003e\n            \u003cbutton onClick={() =\u003e actions.getPrevMonth()}\u003e\n              \u0026lt;\n            \u003c/button\u003e              \n            \u003cbutton onClick={() =\u003e actions.getNextMonth()}\u003e\n              \u0026gt;\n            \u003c/button\u003e              \n          \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          {state.days.map(day =\u003e \u003cth key={day}\u003e{day}\u003c/th\u003e)}\n        \u003c/tr\u003e\n      \u003c/thead\u003e\n      \u003ctbody\u003e\n        {state.weeks.map((week, index) =\u003e \n          \u003ctr key={index}\u003e\n            {week.map(day =\u003e\n              \u003ctd key={day.dayOfMonth} style={{ textAlign: 'center', backgroundColor: day.isToday ? '#ff0' : '#fff' }}\u003e\n                {day.dayOfMonth}\n              \u003c/td\u003e\n            )}\n          \u003c/tr\u003e\n        )}\n      \u003c/tbody\u003e\n    \u003c/table\u003e\n  );\n\n}\n\n```\n\n## API\n\n### useCalendar\n\n```js\nconst [state, actions] = useCalendar(date, config);\n```\n\n### Parameters \n\n| Field     |    Type    | Description                                                                              |\n| ------- | :--------: | ---------------------------------------------------------------------------------------- |\n| date | `date`  | Initialize calendar with starting date                                                |\n| config | `object`  | Configuration |\n\n#### config\n\n| Key     |    Type    | Description                                                                              |\n| ------- | :--------: | ---------------------------------------------------------------------------------------- |\n| events | `array`  | Calendar events as an array of objects. `[{ startDate: date, endDate: date, note: string }]`  |\n| numOfWeeks | `number`  | Number of calendar weeks. `default: 6` |\n| numOfDays | `number`  | Number of days per week. `default: 7` |\n| rtl | `boolean`  | Enable right-to-left |\n| locale | `object`  | [date-fns](https://date-fns.org/) locale |\n\n### Returns \n\n#### state\n\n| Key     |    Type    | Description                                                                              |\n| ------- | :--------: | ---------------------------------------------------------------------------------------- |\n| days | `array`  | Short names for days of week `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`                                                |\n| weeks | `array`  | Weeks of calendar `[{ day: object }]`                                               |\n| month | `string`  | Current month in full month format                                              |\n| year | `number`  | Current year                                               |\n\n```\n{\n  date: date,\n  dayIndex: number,\n  dayOfMonth: number,\n  dayOfWeek: string,\n  dayOfYear: number,\n  events: array,\n  isToday: boolean,\n  isSameMonth: boolean,\n  isWeekend: boolean,\n  weekIndex: number\n}\n```\n\n#### actions\n\n| Key     |    Type    | Description                                                                              |\n| ------- | :--------: | ---------------------------------------------------------------------------------------- |\n| setDate     | `function` | Set current day for Calendar `function(today: date)` |\n| getNextMonth     | `function` | Set calendar to next month |\n| getPrevMonth     | `function` | Set calendar to previous month |\n| addEvent     | `function` | Add an event to calendar. `function(event: { startDate: date, endDate: date, note: string })` |\n| removeEvent     | `function` | Remove event from calendar `function(id: number)` |\n \n## Localization\n\n```javascript\nimport React from 'react';\nimport useCalendar from 'react-use-calendar';\n\nimport ruLocale from 'date-fns/locale/ru';\n\nfunction App() {\n\n  const [state, actions] = useCalendar(null, { locale: ruLocale });\n\n  return (\n    \u003cdiv\u003e\n      ...\n    \u003c/div\u003e\n  );\n}\n\n```\n\n## License\nThe files included in this repository are licensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregnb%2Freact-use-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregnb%2Freact-use-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregnb%2Freact-use-calendar/lists"}