react-use-calendar

Custom React Hook for implementing a calendar with events

Installation

npm install react-use-calendar --save

Usage

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 (
    <table>
      <thead>
        <tr>
          <td colSpan={5} style={{ textAlign: 'center' }}>
            <strong>{state.month} - {state.year}</strong>
          </td>
          <td colSpan={2} style={{ textAlign: 'right' }}>
            <button onClick={() => actions.getPrevMonth()}>
              &lt;
            </button>              
            <button onClick={() => actions.getNextMonth()}>
              &gt;
            </button>              
          </td>
        </tr>
        <tr>
          {state.days.map(day => <th key={day}>{day}</th>)}
        </tr>
      </thead>
      <tbody>
        {state.weeks.map((week, index) => 
          <tr key={index}>
            {week.map(day =>
              <td key={day.dayOfMonth} style={{ textAlign: 'center', backgroundColor: day.isToday ? '#ff0' : '#fff' }}>
                {day.dayOfMonth}
              </td>
            )}
          </tr>
        )}
      </tbody>
    </table>
  );

}

API

useCalendar

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 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

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 (
    <div>
      ...
    </div>
  );
}

License

The files included in this repository are licensed under the MIT license.