@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

npm install @mobil80-dev/calendar

Setup

Global Registration

In your main.js:

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:

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

Usage

<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:

npm run build-lib

Publish (Members only):

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 [email protected].