A highly customizable, full-sized event calendar built with TypeScript, Stencil, and Day.js.
> [!WARNING]
> mhcalendar is currently in its `0.x.x` phase. As per Semantic Versioning, the API is not yet stable, and any new minor or patch release might introduce breaking changes. We recommend pinning the exact version in your `package.json` until we reach `1.0.0`.
## Why mhcalendar?
mhcalendar is built around easy **customization as a first-class feature**. You get full, unrestricted access to the calendar's styling. You can style it exactly how you want by using CSS variables, overriding inline styles, or utilizing our custom properties.
### Key Features
- **Customization** — Style it your way.
- **Framework Agnostic** — Built as a Web Component with Stencil.
- **Lightweight by Design** — Keeps the dependency footprint tiny.
- **Advanced Timezones** — Support for multiple IANA timezones simultaneously.
- **Fully Interactive** — Drag & drop event management and event resizing.
- **Multiple Views** — Month, Week, Day, Agenda, and Shiftplan.
- **Business Hours** — Define business hours, block out-of-office dragging, and visualize non-business time.
- ✨ **...and more!**
## Documentation
> 📖 Full documentation is currently **in progress**. Stay tuned!
## Installation
If you are using React, you might want to check out our official React component:
👉 [**@mhcalendar/react**](https://github.com/mhcalendar/mhcalendar-react)
If you are building a Vanilla JS project, install the core package via your preferred package manager:
```bash
# npm
npm install mhcalendar-core
# yarn
yarn add mhcalendar-core
# pnpm
pnpm add mhcalendar-core
```
---
## Quick Start
Import and initialize the web component in your app's entry file (e.g., `main.ts`):
```javascript
import { defineCustomElements } from 'mhcalendar-core/loader';
// Registers the custom element in the browser
defineCustomElements();
```
Example usage:
```html
Vanilla - 1
```
## Contributing
Contributions are welcome! If you'd like to report a bug, suggest a feature, or submit a pull request, please open an issue first to discuss what you'd like to change.
## Changelog
See [CHANGELOG.md](./CHANGELOG.md) for a full list of changes between releases.
## License
mhcalendar is [MIT Licensed](https://opensource.org/licenses/MIT).