React Infinite Calendar screenshot

React Infinite Calendar

Author Avatar Theme by Clauderic
Updated: 17 Mar 2019
4031 Stars

Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.

Categories

Overview

The React Infinite Calendar is an open-source project currently seeking maintainers. It offers a range of features for creating customizable, flexible, and mobile-friendly calendars in React.

Features

  • Infinite scroll: Allows for continuous scrolling through the calendar.
  • Flexible: Offers options for setting minimum and maximum dates, disabling specific dates or days, and more.
  • Extensible: Users can add date range selection, multiple date selection, or create their own Higher Order Component (HOC).
  • Localization and translation: Supports localization and translation, including French.
  • Customizable: Users can customize and theme the calendar according to their preferences.
  • Year selection: Provides a quick way to jump from year to year.
  • Keyboard support: Supports keyboard navigation using arrow keys and enter key.
  • Events and callbacks: Offers various events and callbacks for customization, such as beforeSelect, onSelect, and onScroll.
  • Mobile-friendly: Provides smooth scrolling on mobile devices.

Installation

To use React Infinite Calendar, follow these steps:

  1. Install the package using npm:
npm install react-infinite-calendar
  1. Choose the appropriate build for your project. The package provides ES6, CommonJS, and UMD builds.

  2. Import the calendar component into your project:

import InfiniteCalendar from 'react-infinite-calendar';
  1. Start using the calendar in your code. For example:
<InfiniteCalendar
  selected={new Date()}
  width={400}
  height={600}
/>

For more usage examples and code snippets, refer to the official documentation.

Summary

The React Infinite Calendar is a versatile and customizable calendar component for React applications. It supports infinite scrolling, localization, theming, and various other features. By following the installation guide, developers can easily integrate this calendar into their projects and take advantage of its flexible functionality. However, potential users should note that the project is currently seeking maintainers, which may impact its future development and support.