Calendar

Calendar for your React app.

• Pick days, months, years

Getting started

Installation

• Install by executing npm install itpc-react-calendar or yarn add itpc-react-calendar.

Usage

• Import by adding import Calendar from 'itpc-react-calendar'.
• Use by adding <Calendar />. Use onChangeDate prop for getting new values.

Here's an example of basic usage:

import React, { useState } from 'react';
import Calendar from 'Calendar';

function MyApp() {
  const [value, onChange] = useState(new Date());
  
  const onChangeDate = (value: string) => {
    onChange(value)
  } 
  
  return (
    <div>
      <Calendar
        onChangeDate={onChangeDate}
        currentValue="2021-01-01"
      />
    </div>
  );
}

User guide

Calendar

Displays a complete, interactive calendar.

Props

| Prop name | Type | Description | Default value | Example values | |----------------------------|---------|--------------------------------------------------------------------------|---------------|----------------| | currentValue | string | Format date: YYYY-MM-DD | today | '2000-01-01' | | offsetYear | number | The parameter is the display of years. Before and after the current year | 10 | 10 | | show | boolean | If true, then the element is visible, otherwise hidden | false | true | | onChangeDate(date: string) | void | Takes in the value of the selected date | | |

License

The MIT License.