React Event Calendar screenshot

React Event Calendar

Author Avatar Theme by Dptoot
Updated: 7 Dec 2016
133 Stars

A React calendar component to display events

Categories

Overview

The React Event Calendar is a calendar component designed to elegantly display events for a selected month. Although the project has been deprecated and is no longer actively maintained, it provides a functional way to illustrate event durations directly on the calendar. As alternatives have emerged, users seeking robust functionalities may want to explore other options, but for those looking to implement a straightforward calendar, this component still holds value.

The calendar allows users to visualize various events in a month view, complete with duration indicators and interactive features. With simple usage and installation methods, it’s possible to have a functional event calendar up and running with minimal setup.

Features

  • Easy Installation: Install via NPM or utilize a standalone build by including the necessary script, ensuring React is available as a global variable.

  • Customizable Events: Accepts an array of event objects, allowing the calendar to be tailored to display the specific events you need.

  • Month and Year Selection: Requires the specification of both the month and year to display, making it straightforward to navigate through different time frames.

  • Event Duration Indicators: Visual cues for events span multiple days and can be configured to show titles across weeks if they exceed the typical duration.

  • Interactive Callbacks: Supports callbacks for user interactions, including clicking days or events, and mouse hover actions for enhanced interactivity.

  • Event Characteristics: Each event can hold a variety of properties, including start and end dates, and optional CSS classes for custom styling, enhancing the visual appeal.

  • Maximum Display Limit: A setting to define the maximum number of events shown on a single day, ensuring clarity and preventing overwhelming layouts.

  • MIT License: Freely available for personal and commercial use, making it an accessible option for developers looking to customize their projects.