@vespaiach/horizontal-calendar v2.0.1

React Horizontal Infinity-Scrolling Calendar

A simple and reusable calendar for React application with supporting of infinity scrolling horizontally.

Installation

The Calendar can be installed via npm:

npm install @vespaiach/horizontal-calendar --save

Or via yarn:

yarn add @vespaiach/horizontal-calendar

You will need to install packages: React, @use-gesture/react and classnames. Please find their support versions under peerDependencies section in package.json

The Gist

You will also need to include CSS file calendar.css from this package. The below example shows how to include CSS files

import '@vespaiach/horizontal-calendar/dist/calendar.css';
import '@vespaiach/horizontal-calendar/dist/defaultTheme.css';

import React from 'react';
import ReactDOM from 'react-dom';

import Calendar from '@vespaiach/horizontal-calendar';

function App() {
    const [selection, setSelection] = useState<Date | [Date, Date | null] | null>(null);

    return <Calendar rangeSelection selection={selection} onChange={setSelection} />;
}

ReactDOM.render(<App />, document.querySelector('#root'));

Note: overwrite defaultTheme.css to re-style the calendar as you wish

Configuration

The basic usage:

<Calendar onChange={handleChange} />

License

See the MIT license file.