Frey-date

Simple calendar that allows you to select multiple dates.

Installation

Install it from npm or yarn

npm install --save frey-date

or:

yarn add frey-date

peerDependencies

npm install --save moment react react-dom styled-components

or:

yarn add moment react react-dom styled-components

| name | version | | ----------------- | -------- | | moment | ^2.24.0 | | react | >=16.8.0 | | react-dom | >=16.8.0 | | styled-components | ^5.2.0 |

Usage

// only calendar
import React from 'react';
import { FreyDates } from 'frey-date/dist';
import { theme } from 'frey-date/dist/themes/Theme';
import { ThemeProvider } from 'frey-date/dist/themes/ThemeProvider';

const App = () => {
  // please select theme ('light' or 'dark')
  const createTheme = theme('light');

  return (
    <ThemeProvider theme={createTheme}>
      <FreyDates registeredDates={[]} selectedDates={[]} handleDateClick={() => {}} />
    </ThemeProvider>
  );
};

// with select event
import React, { useState } from 'react';
import { FreyDates } from 'frey-date/dist';
import { theme } from 'frey-date/dist/themes/Theme';
import { ThemeProvider } from 'frey-date/dist/themes/ThemeProvider';

const App = () => {
  // please select theme ('light' or 'dark')
  const createTheme = theme('dark');

  const [registeredDates, setRegisteredDates] = useState(['']);
  const [selectedDates, setSelectedDates] = useState(['']);

  const handleDateClick = (date: string) => {};

  return (
    <ThemeProvider theme={createTheme}>
      <FreyDates registeredDates={registeredDates} selectedDates={selectedDates} handleDateClick={handleDateClick} />
    </ThemeProvider>
  );
};

Option

| Prop name | Type | Default | Description | | --------------- | -------- | ---------------------- | ------------------------------------------------------- | | registerdDates | string[] | [] | Date you saved. | | selectedDates | string[] | [] | The date you have selected, including the one you saved | | handleDateClick | func | (date: string) => void | date click action |

Demo

You can see the demo in the storybook

yarn install

and:

yarn storybook

NPM

https://www.npmjs.com/package/frey-date