{"_id":"@dope-dev/vue-calendar","name":"@dope-dev/vue-calendar","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@dope-dev/vue-calendar","version":"0.1.1","description":"Multi-calendar Vue 3 component — Gregorian, Jalaali (Persian), and Islamic calendar systems","keywords":["vue","calendar","jalaali","persian","islamic","gregorian","rtl","vue3"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/dopedev-dev/vue-calendar.git"},"homepage":"https://github.com/dopedev-dev/vue-calendar#readme","bugs":{"url":"https://github.com/dopedev-dev/vue-calendar/issues"},"type":"module","sideEffects":["**/*.css"],"main":"./dist/index.cjs","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","types":"./dist/src/index.d.ts","require":"./dist/index.cjs"},"./style.css":"./dist/style.css"},"types":"./dist/src/index.d.ts","publishConfig":{"access":"public"},"scripts":{"dev":"vite","build":"run-p type-check \"build-only {@}\" --","build:lib":"vite build --config vite.lib.config.ts","prepublishOnly":"npm run build:lib","preview":"vite preview","build-only":"vite build","type-check":"vue-tsc --build"},"peerDependencies":{"vue":"^3.5.0"},"devDependencies":{"@tailwindcss/vite":"^4.3.0","@tsconfig/node24":"^24.0.4","@types/node":"^24.12.2","@vitejs/plugin-vue":"^6.0.6","@vue/tsconfig":"^0.9.1","npm-run-all2":"^8.0.4","typescript":"~6.0.0","vite":"^8.0.8","vite-plugin-dts":"^4.5.4","vite-plugin-vue-devtools":"^8.1.1","vue":"^3.5.32","vue-tsc":"^3.2.6"},"engines":{"node":">=18.0.0"},"_id":"@dope-dev/vue-calendar@0.1.1","gitHead":"2af3ceb9055346b9ebaa797c17124969712ce6af","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-SltynKOqXCE6HqsNKiMJTPRkuWleV44wQWRkBJUHrjAaGWRSjrEAAvT18NhCwtmRj9VlmBu2ubyopuBFx2H/JA==","shasum":"249ecd08fde5bad3b12f7e0ce425bf5ad712a85c","tarball":"https://registry.npmjs.org/@dope-dev/vue-calendar/-/vue-calendar-0.1.1.tgz","fileCount":7,"unpackedSize":99354,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCFMYcwHFEyPwyzVPIH3ms7zQJMgR50PkQ6UTtOuNKebAIhANClvjtWuo6VMsluf/OGVWRcAA/LnBbeTzfVKpHEQHfe"}]},"_npmUser":{"name":"dope-dev","email":"amirsafaricg1380@gmail.com"},"directories":{},"maintainers":[{"name":"dope-dev","email":"amirsafaricg1380@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-calendar_0.1.1_1780312872825_0.8994387246140112"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-01T11:21:12.390Z","0.1.1":"2026-06-01T11:21:13.019Z","modified":"2026-06-01T11:21:13.206Z"},"maintainers":[{"name":"dope-dev","email":"amirsafaricg1380@gmail.com"}],"description":"Multi-calendar Vue 3 component — Gregorian, Jalaali (Persian), and Islamic calendar systems","homepage":"https://github.com/dopedev-dev/vue-calendar#readme","keywords":["vue","calendar","jalaali","persian","islamic","gregorian","rtl","vue3"],"repository":{"type":"git","url":"git+https://github.com/dopedev-dev/vue-calendar.git"},"bugs":{"url":"https://github.com/dopedev-dev/vue-calendar/issues"},"license":"MIT","readme":"# @dopedev/vue-calendar\n\nA multi-calendar Vue 3 component supporting Gregorian, Jalaali (Persian), and Islamic calendar systems with full RTL support.\n\n## Features\n\n- Three calendar systems: Gregorian, Jalaali (Persian), Islamic (Umm al-Qura)\n- Three view modes: monthly, weekly, daily\n- RTL layout support\n- Fully customizable header via slot\n- Event display with color, duration, and full-day support\n- Dark mode via CSS custom properties\n- TypeScript support\n\n## Installation\n\n```bash\nnpm install @dopedev/vue-calendar\n# or\npnpm add @dopedev/vue-calendar\n```\n\n## Setup\n\nImport the stylesheet once in your app entry point:\n\n```ts\nimport \"@dopedev/vue-calendar/style.css\";\n```\n\n**Nuxt:**\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  css: [\"@dopedev/vue-calendar/style.css\"],\n});\n```\n\n## Basic Usage\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { VueCalendar } from \"@dopedev/vue-calendar\";\nimport type { CalendarEvent } from \"@dopedev/vue-calendar\";\n\nconst events = ref<CalendarEvent[]>([\n  {\n    id: 1,\n    title: \"Team Meeting\",\n    date: new Date(),\n    time: \"10:00\",\n    duration: 60,\n    color: \"#3b82f6\",\n  },\n]);\n</script>\n\n<template>\n  <div style=\"height: 600px\">\n    <VueCalendar :events=\"events\" />\n  </div>\n</template>\n```\n\n> The component fills its container — give the parent a fixed height.\n\n## Props\n\n| Prop           | Type                             | Default                 | Description                                                |\n| -------------- | -------------------------------- | ----------------------- | ---------------------------------------------------------- |\n| `events`       | `CalendarEvent[]`                | `[]`                    | Events to display                                          |\n| `mode`         | `CalendarMode`                   | `'monthly'`             | View mode: `'monthly'`, `'weekly'`, `'daily'`              |\n| `locale`       | `string`                         | `'en-US'`               | BCP 47 locale tag used for day/month names                 |\n| `calendarType` | `CalendarType`                   | `'gregory'`             | Calendar system: `'gregory'`, `'persian'`, `'islamic-uma'` |\n| `startOfWeek`  | `number`                         | `0`                     | First day of week: `0` = Sunday … `6` = Saturday           |\n| `hours`        | `{ start: number; end: number }` | `{ start: 0, end: 24 }` | Visible hour range in weekly/daily view                    |\n| `initialDate`  | `Date`                           | `new Date()`            | Date the calendar opens on                                 |\n\n### v-model\n\n`mode` supports two-way binding:\n\n```vue\n<VueCalendar v-model:mode=\"mode\" />\n```\n\n## Events\n\n| Event          | Payload                      | Description                                           |\n| -------------- | ---------------------------- | ----------------------------------------------------- |\n| `update:mode`  | `CalendarMode`               | Fired when the mode changes                           |\n| `range-change` | `{ start: Date; end: Date }` | Fired on mount and whenever the visible range changes |\n| `event-click`  | `CalendarEvent`              | Fired when an event is clicked                        |\n\n## Header Slot\n\nReplace the default header entirely with the `#header` slot. All navigation and mode control is exposed through slot props:\n\n```vue\n<VueCalendar :events=\"events\" v-model:mode=\"mode\">\n  <template #header=\"{ mode, range, next, prev, setMode }\">\n    <div class=\"flex items-center gap-2 p-3 border-b\">\n      <button @click=\"prev\">←</button>\n      <button @click=\"next\">→</button>\n      <span>{{ range.start.toLocaleDateString() }}</span>\n      <div class=\"ml-auto flex gap-1\">\n        <button\n          v-for=\"m in ['monthly', 'weekly', 'daily'] as const\"\n          :key=\"m\"\n          @click=\"setMode(m)\"\n          :class=\"mode === m ? 'font-bold' : ''\"\n        >\n          {{ m }}\n        </button>\n      </div>\n    </div>\n  </template>\n</VueCalendar>\n```\n\n### Slot props\n\n| Prop      | Type                           | Description                     |\n| --------- | ------------------------------ | ------------------------------- |\n| `mode`    | `CalendarMode`                 | Current view mode               |\n| `range`   | `{ start: Date; end: Date }`   | Currently visible date range    |\n| `next`    | `() => void`                   | Navigate to the next period     |\n| `prev`    | `() => void`                   | Navigate to the previous period |\n| `setMode` | `(mode: CalendarMode) => void` | Switch view mode                |\n\n## Calendar Systems\n\n### Gregorian (English)\n\n```vue\n<VueCalendar calendar-type=\"gregory\" locale=\"en-US\" :start-of-week=\"1\" />\n```\n\n### Jalaali / Persian (RTL)\n\nWrap the component in `dir=\"rtl\"` to get correct RTL layout. Note that `next` and `prev` in the header slot remain semantically correct — swap their visual arrow directions instead.\n\n```vue\n<div dir=\"rtl\">\n  <VueCalendar\n    calendar-type=\"persian\"\n    locale=\"fa-IR\"\n    :start-of-week=\"6\"\n  />\n</div>\n```\n\n### Islamic / Umm al-Qura (RTL)\n\n```vue\n<div dir=\"rtl\">\n  <VueCalendar\n    calendar-type=\"islamic-uma\"\n    locale=\"ar-SA\"\n    :start-of-week=\"0\"\n  />\n</div>\n```\n\n## Customizing Event Display\n\nYou can override how events are rendered in the time‑grid (weekly/daily) and in the mobile monthly list.\n\n- Desktop time‑grid: use the `#event` slot.\n- Mobile event list: use the `#event-mobile` slot.\n\n```vue\n<VueCalendar :events=\"events\">\n  <!-- Custom desktop event -->\n  <template #event=\"{ event }\">\n    <div :style=\"{ background: event.color || '#3b82f6', padding: '4px', borderRadius: '6px' }\">\n      {{ event.title }}\n    </div>\n  </template>\n\n  <!-- Custom mobile list event -->\n  <template #event-mobile=\"{ event }\">\n    <div class=\"flex items-center gap-2\">\n      <span class=\"font-bold\">{{ event.title }}</span>\n      <span class=\"text-sm text-gray-500\">{{ event.time }}</span>\n    </div>\n  </template>\n</VueCalendar>\n```\n\n## CalendarEvent\n\n```ts\ninterface CalendarEvent {\n  id: number | string;\n  date: Date | string; // date of the event\n  time: string; // 'HH:mm' format\n  title: string;\n  duration?: number; // minutes (used in weekly/daily view)\n  color?: string; // hex or CSS value; defaults to --cal-primary\n  isFullDay?: boolean;\n  raw?: any; // attach your original API payload here\n}\n```\n\n## Theming\n\nThe calendar exposes a set of CSS custom properties for colours. You can override them on `:root` for the light theme and inside a `.dark` selector for the dark theme.\n\n| CSS Variable              | Description                                | Light default | Dark default |\n| ------------------------- | ------------------------------------------ | ------------- | ------------ |\n| `--color-surface`         | Main background                            | `#ffffff`     | `#151823`    |\n| `--color-surface-variant` | Card / cell secondary background           | `#f8f8fa`     | `#242836`    |\n| `--color-on-surface`      | Primary text colour                        | `#2c2c2e`     | `#ffffff`    |\n| `--color-primary`         | Accent colour, event background fallback   | `#1a9d90`     | `#40b8ac`    |\n| `--color-error`           | Error colour (weekends, holidays, pointer) | `#e52b16`     | `#ea5545`    |\n| `--color-outline`         | Standard border colour                     | `#d1d0d2`     | `#605f63`    |\n| `--color-outline-variant` | Light border colour                        | `#f0f0f0`     | `#3a393c`    |\n\n**Today badge gradient**  \nYou can change the gradient used for the “today” circle:\n\n| Variable               | Light default                                         | Dark default                                          |\n| ---------------------- | ----------------------------------------------------- | ----------------------------------------------------- |\n| `--cal-today-bg-light` | `radial-gradient(circle at 70% 0%, #10121b, #393e4d)` | –                                                     |\n| `--cal-today-bg-dark`  | –                                                     | `radial-gradient(circle at 70% 0%, #d1d0d2, #9b9a9d)` |\n\nExample customisation:\n\n```css\n:root {\n  --color-surface: #ffffff;\n  --color-primary: #ff6b6b;\n  --cal-today-bg-light: radial-gradient(circle at 70% 0%, #4a00e0, #8e2de2);\n}\n\n.dark {\n  --color-surface: #111827;\n  --color-primary: #ff8787;\n  --cal-today-bg-dark: radial-gradient(circle at 70% 0%, #ffd700, #ff8c00);\n}\n```\n\n## Exposed Methods\n\nWhen using a template ref, the component exposes:\n\n```ts\nconst cal = ref<InstanceType<typeof VueCalendar>>();\n\ncal.value?.goNext(); // navigate forward\ncal.value?.goPrev(); // navigate backward\ncal.value?.setMode(\"weekly\"); // change view mode\ncal.value?.currentRange; // { start: Date, end: Date }\n```\n\n## TypeScript\n\nAll public types are exported from the package root:\n\n```ts\nimport type {\n  CalendarEvent,\n  CalendarMode,\n  CalendarType,\n  CalendarDay,\n  CalendarDateRange,\n  CalendarTimeRange,\n} from \"@dopedev/vue-calendar\";\n```\n\n## Development\n\n```bash\npnpm install\npnpm dev          # dev sandbox at http://localhost:5173\npnpm type-check   # TypeScript check\npnpm build:lib    # build the distributable package\n```\n\n### Run the Nuxt example\n\n```bash\npnpm build:lib\n\ncd examples/nuxt-example\npnpm install\npnpm dev          # http://localhost:3000\n```\n\n## Publishing\n\n```bash\nnpm login         # log in with the @dopedev org account\nnpm publish       # prepublishOnly runs build:lib automatically\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-0d58d2a18544f9723fd48fb8e3bec0ae"}