frey-date v0.2.1

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

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

Demo

You can see the demo in the storybook

yarn install

and:

yarn storybook

NPM

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