npm package: @mobil80-dev/calendar
Description: A full-featured, lightweight, and customizable Calendar component for Vue 3. Supports **Month**, **Week**, and **Day** views with built-in event management and mini-sidebar navigation.
Latest version: 0.1.7

# @mobil80-dev/calendar

A full-featured, lightweight, and customizable Calendar component for Vue 3. Supports **Month**, **Week**, and **Day** views with built-in event management and mini-sidebar navigation.

## Features

- 📅 **Multiple Views**: Seamlessly switch between Month, Week, and Day views.
- 🕒 **Time-Grid**: Accurate event positioning in Week/Day views based on hours/minutes.
- 📎 **Event Support**: Handles multi-day events and timed appointments.
- 🧭 **Mini-Calendar**: Built-in sidebar navigation for quick date picking.
- 🎨 **Customizable**: Pass your own events and custom day names via props.
- 📱 **Responsive**: Flexible layout designed to fit your dashboard.

## Installation

```bash
npm install @mobil80-dev/calendar
```

## Setup

### Global Registration

In your `main.js`:

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import VueCalendar from '@mobil80-dev/calendar';
import '@mobil80-dev/calendar/dist/vue-calendar.css';

const app = createApp(App);
app.use(VueCalendar);
app.mount('#app');
```

### Local Registration

In your component:

```vue
<script setup>
import { VueCalendar } from '@mobil80-dev/calendar';
import '@mobil80-dev/calendar/dist/vue-calendar.css';
</script>
```

## Usage

```vue
<template>
  <VueCalendar
    view-mode="month"
    :events="myEvents"
    header-text="My Schedule"
  />
</template>

<script setup>
const myEvents = [
  {
    id: 1,
    title: "Project Kickoff",
    start: "2025-12-25 10:00", // Supports Strings, Dates, or Timestamps
    end: "2025-12-25 11:30",
    color: "#4c6ef5"
  },
  {
    id: 2,
    title: "Vacation",
    start: "2025-12-28",
    end: "2025-12-30",
    color: "#fab005"
  }
];
</script>
```

## Props

| Prop       | Type   | Default                                      | Description |
|------------|--------|----------------------------------------------|-------------|
| viewMode   | String | 'month'                                     | Toggle between 'month', 'week', or 'day'. |
| events     | Array  | []                                          | Array of event objects (see Event Schema). |
| weekDays   | Array  | ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] | Custom names for days of the week. |
| headerText | String | Current Date                                | Custom text to display in the top header. |

## Event Schema

| Field | Type          | Required | Description |
|-------|---------------|----------|-------------|
| id    | Number/String | Yes      | Unique identifier. |
| title | String        | Yes      | The text displayed on the calendar. |
| start | Date/String/TS| Yes      | Start time (YYYY-MM-DD or DD-MM-YYYY). |
| end   | Date/String/TS| Yes      | End time. |
| color | String        | No       | Hex code for event background. |

## Development

### Build the library:

```bash
npm run build-lib
```

### Publish (Members only):

```bash
npm publish --access public
```

## License

This project is licensed under the MIT License.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## Contact

This project is currently in development. If you want more customizations, please let us know at nanthagopal.g@mobil80.com.