mh-calendar-core
v0.1.1
Published
Core of the mh-calendar
Readme
MHCalendar Core
The core Web Component for MHCalendar, a powerful and fully customizable calendar component for any framework, or no framework at all.
✨ Features
- 🗓️ Multiple Views: Seamlessly switch between Day, Week, and Month layouts.
- ⚡️ Intuitive Drag & Drop: Move events with ease.
- 🎨 Highly Customizable: Style every aspect with standard CSS or CSS-in-JS.
- 🧩 Framework Agnostic: Works natively in any project (Vanilla JS, Vue, Angular, Svelte, etc.) WIP.
🚀 Installation
Install the core package using your preferred package manager:
npm
npm install mh-calendar-coreYarn
yarn add mh-calendar-corepnpm
pnpm add mh-calendar-coreBun
bun add mh-calendar-coreBasic Usage
To use MHCalendar as a Web Component, you need to import its loader to define the custom element <mh-calendar>.
Here is a full example in a basic index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MHCalendar Core Demo</title>
<!-- 1. Import and run the loader script -->
<script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/mh-calendar-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<h1>My Calendar</h1>
<!-- 2. Use the component tag in your HTML -->
<!-- It's recommended to place it inside a container with a defined height -->
<div style="height: 80vh;">
<mh-calendar id="my-calendar"></mh-calendar>
</div>
<script>
// 3. (Optional) Configure the component using JavaScript
document.addEventListener('DOMContentLoaded', () => {
const calendarElement = document.getElementById('my-calendar');
// Pass configuration via the 'config' property
calendarElement.config = {
viewType: 'WEEK',
events: [
{
id: '1',
title: 'My First Event',
startDate: new Date(),
endDate: new Date(new Date().getTime() + 60 * 60 * 1000) // 1 hour later
}
]
};
});
</script>
</body>
</html>Note: In a project with a bundler (like Vite or Webpack), you should import from
'mh-calendar-core/loader'in your main JavaScript file instead of using a CDN link.
📚 Full Documentation
For detailed information on all configuration options, API methods, and styling guides, please visit our full documentation site.
📄 License
This project is licensed under the MIT License.