Introduction
mhcalendar is a calendar component for web applications that need real flexibility without the setup overhead that usually comes with it. Install it, render it, and you have a modern, production-ready calendar in minutes. From there, you have room to fully restyle and reconfigure it as your product grows.
Philosophy
Most calendar libraries make you choose: either they're simple to set up and rigid once you need to deviate from the defaults, or they're flexible but demand a steep learning curve before you can ship anything. mhcalendar exists to avoid that trade-off.
Every feature is built with extensibility in mind, so the calendar adapts to your product instead of the other way around. That starts with styling: the calendar exposes its look through plain CSS custom properties, so it integrates with whatever design system your app already has rather than imposing one of its own.
It also extends to the stack you build on. Rather than maintaining a separate implementation per framework, mhcalendar is built with Stencil and compiles down to a standards-based Web Component. That one implementation runs natively in any modern browser, with framework wrappers layered on top purely for developer convenience. No functionality is tied to a specific framework.
The only thing running in your app at runtime is the calendar itself and Day.js, a lightweight date library. Stencil is a build-time dependency only, so it adds nothing to your bundle.
Architecture
mhcalendar is developed as a monorepo: the core component, framework wrappers, documentation, and example apps all live side by side and ship in lockstep.
At the center is @mhcalendar/calendar, the framework-agnostic Web Component described above. Framework wrappers sit on top of it purely for ergonomics: a wrapper doesn't add capabilities the core component doesn't already have, it just makes integration feel native to that framework. React is the first officially supported wrapper; more may follow as the project grows, always backed by the same underlying component.
@mhcalendar/calendaris the Web Component.@mhcalendar/reactis the official React wrapper.
Project Status
mhcalendar is currently in pre-1.0 (0.2.x). It's already usable in production, but the public API may still evolve before 1.0. Pin an exact package version rather than a caret range, and check the Changelog before upgrading.
Next Steps
- New to mhcalendar? Head to Quick Start and pick the path for your stack: React, Vanilla JS, or Other Frameworks.
- Already integrated it? Browse the API Reference for every configuration option, or Theming to see how styling works in practice.