❤
npm
Sign UpSign In

react-use-calendar

1.0.0 • Public • Published

react-use-calendar

Custom React Hook for implementing a calendar with events

Build Status Coverage Status dependencies Status npm version

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.

Readme

Keywords

Package Sidebar

Install

npm i react-use-calendar

Repository

github.com/gregnb/react-use-calendar

Homepage

github.com/gregnb/react-use-calendar#readme

Weekly Downloads

8

Version

1.0.0

License

MIT

Unpacked Size

13.5 kB

Total Files

3

Last publish

Collaborators

  • gregnb
Try on RunKit
Report malware