Norwegian Parcel Mail

    @eperedo/calendar-hooks

    0.14.0 • Public • Published

    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

    Install

    npm i @eperedo/calendar-hooks

    DownloadsWeekly Downloads

    1

    Version

    0.14.0

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • erivero