gregnb/react-use-calendar

A custom React Hook for implementing a calendar with events

react-use-calendar

Custom React Hook for implementing a calendar with events

Installation

npm install react-use-calendar --save

Demo

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.