Skip to main content
v0.3.3

A modern calendar solution for
ReactVue

A full-sized, drag-and-drop calendar for React and Web Components, written in TypeScript.

npm i @mhcalendar/react
Try it!
Features

What you get out of the box.

The core features teams reach for most, no extra configuration needed.

Drag and drop scheduling

Move events between days and time slots, resize them, or drag to create new ones directly on the grid.

Five views in one component

Week, day, month, agenda, and resource. Switch between them with a single prop.

Multi timezone support

Show events across multiple timezones side by side, with each timezone rendered as its own column.

Theming with CSS variables

Restyle colors, spacing, and fonts through plain CSS custom properties. No proprietary theming API.

Try it

Play with it, right here.

Drag events around, resize them, or click an empty slot to create one. This is the real component, not a screenshot.

Theme builder
Works with

Drop it into the stack you already have.

Ship the Web Component standalone, or reach for the React wrapper

JavaScript
TypeScript
React
Web Components
Next.js
Astro
Open Source

Built in the open.

MIT licensed and published on npm as @mhcalendar/calendar and @mhcalendar/react. Browse the code, open an issue, or add it to your project with one command.

View on npmView on GitHub
FAQ

Questions, answered.

Is mhcalendar free to use?

Yes. It's open source under the MIT license, for personal and commercial projects alike.

Does it work outside of React?

Yes. The core, @mhcalendar/calendar, is a framework-agnostic Web Component. @mhcalendar/react is a thin wrapper around it.

How do I customize the styling?

Through plain CSS custom properties, or the style prop for deeper overrides. No proprietary theming API to learn.

Which views are supported?

Week, day, month, agenda, and resource, switchable with a single prop.

Is TypeScript supported?

Yes. Both packages are written in TypeScript and ship full type definitions.

Where do I report bugs or request features?

Open an issue on GitHub. The repository is linked in the Open Source section above.