jquense/react-big-calendar

react-big-calendar is a calendar component for React apps, designed to look and behave like the calendars most people already know: Google Calendar and Outlook. You drop it into your app, hand it a list of events with start and end times, and it renders those events in a monthly, weekly, or daily grid view. It is built for modern browsers and uses a flexible layout system rather than old-style HTML tables. To use it, you install the package via npm or yarn, include a CSS file it ships with, and make sure the container element on your page has a defined height. Without a height, the calendar will not appear. One required step is choosing a date-formatting library, called a localizer. The project supports four options: Moment.js, Globalize.js, date-fns, and Day.js. You pick one based on what your project already uses, wire it up once, and then the calendar handles all date display and formatting from that point on. If you want drag-and-drop event editing (moving events around on the grid by clicking and dragging), there is a built-in addon for that. Starter repositories are linked in the README for a plain setup, a drag-and-drop setup, and a TypeScript setup with React hooks. Styling is handled through compiled CSS files that you include, but the project also ships SASS source files if you want to adjust colors and sizing to match your own app's look. The SASS approach gives you access to a variables file where you can change the core visual settings, though the README notes that changes should be tested carefully since some overrides can cause display issues. The project has a live demo and documentation site linked from the README, and a Slack community for questions and contributions. The README is focused and practical: it covers installation, localizer setup, styling, and how to run the examples locally.