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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-03-01T12:36:28.000Z (over 5 years ago)
• Last Synced: 2024-04-25T01:22:38.453Z (5 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.