@eperedo/calendar-hooks

Basic hooks for calendar components

Installation

yarn add calendar-hooks

Usage

import React from 'react';
import useCalendar from 'calendar-hooks';

function CustomCalendar() {
  const { year, month, day, days, changeDate } = useCalendar(new Date());

  function onClick(day) {
    changeDate(day.date);
  }

  function onChangeMonth(action) {
    if (action === 'prev') {
      const newMonth = (month.number - 1) - 1;
      changeDate(new Date(year, newMonth, day.number, 0, 0, 0));
    } else {
      const newMonth = (month.number + 1) - 1;
      changeDate(new Date(year, newMonth, day.number, 0, 0, 0));
    }
  }

  return (
    <div>
      <div>Selected Day: {day.name} - {day.number}</div>
      <div>Current Year: {year}</div>
      <div>
        <button type="button" onClick={() => onChangeMonth('prev')}>
          Prev
        </button>
        <p>Current Month: {month.name}</p>
        <button type="button" onClick={() => onChangeMonth('next')}>
          Next
        </button>
      </div>
      <div>
        {days.map((day) => {
          return (
            <button type="button" onClick={(e) => changeDate(day)} key={day.number}>
              {day.number}
            </button>
          );
        })}
      </div>
    </div>
  );
}

export default CustomCalendar;

API

useCalendar(selectedDate)

Generate an object with calendar information

• selectedDate: A valid javascript date object

Returns:

{ day, days, month, year, changeDate }

• day: an object with information about the day of the selectedDate parameter

{
  name: 'Monday',
  abbr: 'Mon',
  number: 2,
}

• days: an array with all days of one month

[
  {
    date: 'Sun Jul 07 2019 13:17:38 GMT-0500 (Peru Standard Time)', // a valid js date object
    isToday: false,
    number: 1,
  },
  {
    date: 'Mon Jul 08 2019 13:17:38 GMT-0500 (Peru Standard Time)', // a valid js date object
    isToday: true,
    number: 2,
  },
  // until last day of the month
  {
    date: 'Mon Jul 31 2019 13:17:38 GMT-0500 (Peru Standard Time)', // a valid js date object
    isToday: false,
    number: 31,
  },
]

• month: an object with information about the month of the selectedDate parameter

{
  name: 'July',
  number: 7,
  jsNumber: 6,
}

• year: the year of the selectedDate parameter

2019

• changeDate(selectedDate): a function that mutates the selectedDate value