React-use-calendar NPM

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.

react-hooks hooks react calendar use-calendar

date-fns

@everything-registry/sub-chunk-2621 @infinitebrahmanuniverse/nolb-react-us

1.0.0

5 years ago

0.0.1

5 years ago