Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gregnb/react-use-calendar
A custom React Hook for implementing a calendar with events
https://github.com/gregnb/react-use-calendar
calendar hooks react
Last synced: about 2 months ago
JSON representation
A custom React Hook for implementing a calendar with events
- Host: GitHub
- URL: https://github.com/gregnb/react-use-calendar
- Owner: gregnb
- Created: 2019-03-01T02:44:25.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-01T12:36:28.000Z (almost 6 years ago)
- Last Synced: 2024-04-25T01:22:38.453Z (8 months ago)
- Topics: calendar, hooks, react
- Language: JavaScript
- Size: 138 KB
- Stars: 54
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-react-hooks - `react-use-calendar`
- awesome-react-hooks-cn - `react-use-calendar`
- awesome-react-hooks - `react-use-calendar`
- awesome-react-hooks - `react-use-calendar`
README
# react-use-calendar
Custom React Hook for implementing a calendar with events
[![Build Status](https://travis-ci.org/gregnb/react-use-calendar.svg?branch=master)](https://travis-ci.org/gregnb/react-use-calendar)
[![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)
[![dependencies Status](https://david-dm.org/gregnb/react-use-calendar/status.svg)](https://david-dm.org/gregnb/react-use-calendar)
[![npm version](https://badge.fury.io/js/react-use-calendar.svg)](https://badge.fury.io/js/react-use-calendar)
## Installation
```
npm install react-use-calendar --save
```## Demo
[![Edit react-use-calendar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/y0jonx2xvz)
## Usage
```javascript
import React from 'react';
import useCalendar from 'react-use-calendar';function App() {
const [state, actions] = useCalendar(null, {
events: [
{
startDate: new Date(2019, 1, 27),
endDate: new Date(2019, 1, 27),
note: 'Meeting with clients'
},
{
startDate: new Date(2019, 1, 22),
endDate: new Date(2019, 1, 25),
note: 'Vacation'
}
]
});return (
{state.month} - {state.year}
actions.getPrevMonth()}>
<
actions.getNextMonth()}>
>
{state.days.map(day => {day})}
{state.weeks.map((week, index) =>
{week.map(day =>
{day.dayOfMonth}
)}
)}
);}
```
## API
### useCalendar
```js
const [state, actions] = useCalendar(date, config);
```### Parameters
| Field | Type | Description |
| ------- | :--------: | ---------------------------------------------------------------------------------------- |
| date | `date` | Initialize calendar with starting date |
| config | `object` | Configuration |#### config
| Key | Type | Description |
| ------- | :--------: | ---------------------------------------------------------------------------------------- |
| events | `array` | Calendar events as an array of objects. `[{ startDate: date, endDate: date, note: string }]` |
| numOfWeeks | `number` | Number of calendar weeks. `default: 6` |
| numOfDays | `number` | Number of days per week. `default: 7` |
| rtl | `boolean` | Enable right-to-left |
| locale | `object` | [date-fns](https://date-fns.org/) locale |### Returns
#### state
| Key | Type | Description |
| ------- | :--------: | ---------------------------------------------------------------------------------------- |
| days | `array` | Short names for days of week `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` |
| weeks | `array` | Weeks of calendar `[{ day: object }]` |
| month | `string` | Current month in full month format |
| year | `number` | Current year |```
{
date: date,
dayIndex: number,
dayOfMonth: number,
dayOfWeek: string,
dayOfYear: number,
events: array,
isToday: boolean,
isSameMonth: boolean,
isWeekend: boolean,
weekIndex: number
}
```#### actions
| Key | Type | Description |
| ------- | :--------: | ---------------------------------------------------------------------------------------- |
| setDate | `function` | Set current day for Calendar `function(today: date)` |
| getNextMonth | `function` | Set calendar to next month |
| getPrevMonth | `function` | Set calendar to previous month |
| addEvent | `function` | Add an event to calendar. `function(event: { startDate: date, endDate: date, note: string })` |
| removeEvent | `function` | Remove event from calendar `function(id: number)` |
## Localization```javascript
import React from 'react';
import useCalendar from 'react-use-calendar';import ruLocale from 'date-fns/locale/ru';
function App() {
const [state, actions] = useCalendar(null, { locale: ruLocale });
return (
...
);
}```
## License
The files included in this repository are licensed under the MIT license.