{"_id":"vue3-mycalendar","_rev":"32-02a0aaf7082b377d15b1b2c27698ab99","name":"vue3-mycalendar","dist-tags":{"latest":"1.0.0"},"versions":{"0.1.0":{"name":"vue3-mycalendar","version":"0.1.0","_id":"vue3-mycalendar@0.1.0","maintainers":[{"name":"michael.brilz89","email":"bigdog16@web.de"}],"dist":{"shasum":"75a5b38cc8c4a2c0202fb8fa3014431a9cc93aac","tarball":"https://registry.npmjs.org/vue3-mycalendar/-/vue3-mycalendar-0.1.0.tgz","fileCount":14,"integrity":"sha512-P9PV0S5dIZFGdUzOnEKBUpxdrRd3dXwJBwcNY1QpLbnMvIruGiD0zf4wQOTU3f0Vlc6CAbxgXxfigfpblvtgBQ==","signatures":[{"sig":"MEYCIQCXEMtqyU3Fb3/SuS8wp058QCTp0ItbTSAwKdieDzXP1QIhAJunuGktB6R2wK6CuzqiSB/qSaIGy7I74NwVhVMOOyQ2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175276},"main":"dist/vue3-calendar-scheduler.cjs.js","module":"dist/vue3-calendar-scheduler.esm.js","exports":{".":{"import":"./dist/vue3-calendar-scheduler.esm.js","require":"./dist/vue3-calendar-scheduler.cjs.js"}},"gitHead":"67b10ab4eacefe5bde1663e214a8596b79f95c34","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"michael.brilz89","email":"bigdog16@web.de"},"_npmVersion":"10.8.2","description":"Ein Kalender und Terminplanungs-Package für Vue 3","directories":{},"_nodeVersion":"20.15.0","dependencies":{"vue":"^3.5.12"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.9","vue-tsc":"^2.1.6","typescript":"~5.6.2","@inertiajs/vue3":"^1.2.0","@vitejs/plugin-vue":"^5.1.4"},"peerDependencies":{"vue":"^3.5.12"},"_npmOperationalInternal":{"tmp":"tmp/vue3-mycalendar_0.1.0_1730220509603_0.690517247276897","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"vue3-mycalendar","version":"0.1.1","_id":"vue3-mycalendar@0.1.1","maintainers":[{"name":"michael.brilz89","email":"bigdog16@web.de"}],"dist":{"shasum":"d517907903646a6ee7d0e059b3c3b227411f50ed","tarball":"https://registry.npmjs.org/vue3-mycalendar/-/vue3-mycalendar-0.1.1.tgz","fileCount":14,"integrity":"sha512-nTowXZdYe6OWALQTxG7n5rZnHGIsqqPmes5oKi+pg0MTSqrxKY9UPN4BijxWCDmkYmEN1c8+w2d3OPnDWl44pg==","signatures":[{"sig":"MEUCIQDrl+Nj3nk9vEAraut5heShl/L4kYkFOG/TYhYx6+6IbwIgVB4WHXcOybV9L4OnodUN4E+wk35+iaHJv1jIGW49wKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175332},"main":"dist/vue3-calendar-scheduler.umd.js","types":"dist/index.d.ts","module":"dist/vue3-calendar-scheduler.es.js","exports":{".":{"import":"./dist/vue3-calendar-scheduler.es.js","require":"./dist/vue3-calendar-scheduler.umd.js"},"./style":"./dist/style.css"},"gitHead":"67b10ab4eacefe5bde1663e214a8596b79f95c34","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"michael.brilz89","email":"bigdog16@web.de"},"_npmVersion":"10.8.2","description":"A calendar and scheduling package for Vue 3","directories":{},"_nodeVersion":"20.15.0","dependencies":{"vue":"^3.5.12"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.9","vue-tsc":"^2.1.6","typescript":"~5.6.2","@inertiajs/vue3":"^1.2.0","@vitejs/plugin-vue":"^5.1.4"},"peerDependencies":{"vue":"^3.5.12"},"_npmOperationalInternal":{"tmp":"tmp/vue3-mycalendar_0.1.1_1730225080096_0.10767583228592459","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"vue3-mycalendar","version":"0.1.2","_id":"vue3-mycalendar@0.1.2","maintainers":[{"name":"michael.brilz89","email":"bigdog16@web.de"}],"dist":{"shasum":"de239a7fb628695dd9d4127bd3b31421693458dd","tarball":"https://registry.npmjs.org/vue3-mycalendar/-/vue3-mycalendar-0.1.2.tgz","fileCount":13,"integrity":"sha512-Be9fLfgSsSAaxc4Hv+RXgwq8iz6x6fncK4KZFiZVTw8FHj7lPbgDblv7Gp7/zrzvmxEsr6ODq3o7lDmBSAdsCw==","signatures":[{"sig":"MEUCIQCCGON0oybGj0cCJd3gZK6+3D4NMK4hKh1bhNZypnbSVgIgEIe/39qgH4QBKrmb3PXCAjUJbKbsdfTHUKW+XOTRl6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83038},"main":"dist/index.cjs.js","module":"dist/index.esm.js","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"gitHead":"67b10ab4eacefe5bde1663e214a8596b79f95c34","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"michael.brilz89","email":"bigdog16@web.de"},"_npmVersion":"10.8.2","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\n```\n\n---\n\n## Time zones\n\nThe calendar follows the **store-UTC, render-local** model.\n\n- **Input:** provide events as absolute UTC timestamps via `startsAt` / `endsAt`\n (ISO-8601 with `Z`). The `timeZone` prop controls the zone the grid renders in.\n- **Output:** drag & drop and form submit emit events whose `startsAt` / `endsAt`\n are UTC. Legacy `date` / `start` / `end` fields are also filled in (in\n `timeZone`) for backward compatibility.\n\n```vue\n\n```\n\nIf `timeZone` is omitted, the browser's zone is used. For multi-user apps where\neveryone must see the same wall-clock time regardless of their machine, pass the\nzone explicitly.\n\n**Legacy fields still work.** If you provide `date` + `start` + `end` instead of\n`startsAt` / `endsAt`, they are interpreted as wall-clock time **in `timeZone`**\nand normalized to UTC internally. Prefer `startsAt` / `endsAt` for new code.\n\n---\n\n## Views\n\nThe calendar has a **week** view (hour grid) and a **month** view (day cells).\n\nSwitch via the built-in toggle buttons, or control it from the outside:\n\n```vue\n\n\n\n\n\n```\n\n- Week view: events are positioned by time; overlapping events split into columns.\n- Month view: events appear as compact chips; up to three are shown per day, the\n rest collapse into a \"+N\" indicator. Clicking a day number or \"+N\" opens the\n week view of that day.\n\nSet the first day of the week with `week-starts-on` (`0` = Sunday, `1` = Monday,\ndefault `1`).\n\n---\n\n## Drag & drop\n\nDragging is pointer-based. While dragging you get a live preview of the event at\nthe snapped position and a floating tooltip showing the target time (week) or\ndate (month). The event stays under the cursor where you grabbed it.\n\nOn drop, an `update-event` event is emitted. **The host must persist it** by\nreplacing the event in `schedules` (by `id`). The component does not keep a\nseparate internal copy.\n\n---\n\n## Custom Form Slot\n\nReplace the default form with your own design using the `form` slot. You get full\naccess to the internal state and methods via scoped slot props.\n\n### Slot Props\n\n| Prop | Type | Description |\n| ------------------ | -------------------------------------- | ----------------------------------------- |\n| `newEvent` | `Ref>` | Reactive event object for v-model binding |\n| `addEvent` | `(event?: Partial) => void` | Submit function to add the event |\n| `additionalFields` | `Field[]` | Configured additional fields array |\n| `labels` | `LabelsAndSettings` | All label texts and settings |\n| `resetForm` | `() => void` | Reset form to initial state |\n\n```vue\n\n \n
\n \n \n \n \n \n \n
\n \n\n```\n\nTo remove the form completely, pass an empty `form` slot:\n\n```vue\n\n \n\n```\n\n---\n\n## Custom Popup Slot\n\nCustomize the event details popup with the `popup-calendar` slot.\n\n```vue\n\n \n
\n
\n
{{ selectedEvent.title }}
\n \n
\n
\n \n\n```\n\n---\n\n## Props\n\n### Required\n\n| Prop | Type | Description |\n| ------------------ | ------------- | ------------------------------------------ |\n| `schedules` | `EventInfo[]` | Array of events to display on the calendar |\n| `additionalFields` | `Field[]` | Additional fields for the event form |\n\n### Optional\n\n| Prop | Type | Default | Description |\n| --------------------- | --------------------- | ------------------ | ----------------------------------------------------- |\n| `timeZone` | `string` | browser zone | IANA zone the calendar renders in |\n| `weekStartsOn` | `0 \\| 1` | `1` (Monday) | First day of the week (`0` = Sunday) |\n| `view` | `'week' \\| 'month'` | `'week'` | Active view. Supports `v-model:view` |\n| `customClass` | `string` | `''` | Custom CSS class for theming |\n| `customStyles` | `Record` | `{}` | Inline styles for the root element |\n| `weekdays` | `string[]` | `['Monday', ...]` | Custom weekday names |\n| `eventTitleColor` | `string` | `'#000'` | Event title text color |\n| `eventTitleSize` | `string` | `'16px'` | Event title font size |\n| `popupFields` | `string[]` | `[]` | Fields to show in the default popup |\n| `labelsAndSettings` | `LabelsAndSettings` | see below | Labels and text customization |\n| `placeholderSettings` | `object` | `{}` | Placeholder texts for popup inputs |\n| `popupVisible` | `boolean` | `false` | Control popup visibility externally |\n| `popupEvent` | `EventInfo \\| null` | `null` | Current event for the popup |\n| `readonly` | `boolean` | `false` | Disables form, drag & drop, edit and delete |\n\n### Labels and Settings\n\n```ts\ninterface LabelsAndSettings {\n startTimeLabel?: string; // 'Start Time'\n endTimeLabel?: string; // 'End Time'\n dateLabel?: string; // 'Date'\n submitButtonText?: string; // 'Add Entry'\n calendarWeekLabel?: string; // 'CW'\n todosLabel?: string; // 'To-Do'\n participantsLabel?: string; // 'Teammates'\n weekViewLabel?: string; // 'Week'\n monthViewLabel?: string; // 'Month'\n}\n```\n\n---\n\n## Events\n\n| Event | Payload | Description |\n| --------------------- | --------------------------------------------- | ------------------------------------ |\n| `submit-event` | `EventInfo` | New event submitted via form |\n| `update-event` | `EventInfo` | Event updated (drag & drop or edit) |\n| `handle-delete` | `number` | Event ID to delete |\n| `show-info` | `EventInfo` | Event details requested |\n| `close-popup` | – | Popup closed |\n| `update:view` | `'week' \\| 'month'` | Active view changed (`v-model:view`) |\n| `update:todos` | `{ todos: string[], eventId: number }` | Todos changed |\n| `update:participants` | `{ participants: string[], eventId: number }` | Participants changed |\n| `slot-click` | `{ date: string; start?: string; end?: string }` | Empty slot clicked (click-to-create) |\n| `range-change` | `{ start: string; end: string; view: 'week' \\| 'month' }` | Visible date range changed |\n\n---\n\n## Slots\n\n| Slot | Scoped Props | Description |\n| ---------------- | ------------------------------------------------------------- | -------------------------------------- |\n| `form` | `{ newEvent, addEvent, additionalFields, labels, resetForm }` | Custom event form |\n| `popup-calendar` | – | Custom popup for event details |\n| `event` | `{ event: EventInfo, timeRange: string }` | Custom markup inside each event block |\n\n---\n\n## Type Definitions\n\n### EventInfo\n\n```ts\ninterface EventInfo {\n id: number;\n title: string;\n\n // Preferred: absolute UTC timestamps (ISO-8601 with Z).\n startsAt?: string; // e.g. '2026-06-28T07:00:00Z'\n endsAt?: string;\n\n // Legacy: interpreted as wall-clock time in `timeZone`.\n date?: string; // 'YYYY-MM-DD'\n start?: string; // 'HH:MM'\n end?: string; // 'HH:MM'\n\n color?: string;\n description?: string; // shown as a text block in the popup\n info?: string; // alias for description\n location?: string; // displayed in the event card and popup (with location icon)\n link?: string; // rendered as a clickable anchor in the popup\n organizer?: string; // shown in the popup with a person icon\n todos?: string[];\n participants?: string[];\n [key: string]: any; // any additional custom fields\n}\n```\n\n> Each event needs a **unique `id`**. Duplicate ids cause events to share layout\n> and styling.\n\n#### Popup display\n\nThe built-in popup auto-detects these fields and renders them with dedicated UI:\n\n| Field | Display |\n| ------------- | ---------------------------------------------------- |\n| `title` | Hero heading with a colored left border |\n| `date`/`startsAt` | Date and time row with calendar icon |\n| `location` | Editable location field with pin icon |\n| `link` | Clickable anchor (opens new tab) |\n| `organizer` | Editable person field with user icon |\n| `description` | Text block below the meta section |\n| `participants` | Removable chips + add-input |\n| `todos` | Bullet list with per-item delete + add-input |\n\nAny other fields in `popupFields` are rendered as generic labeled inputs.\n\n### Field\n\n```ts\ninterface Field {\n id: string;\n label: string;\n type: 'text' | 'select' | 'date' | 'time' | 'number';\n model: string;\n options?: { id: number | string; name: string }[];\n}\n```\n\n---\n\n## Styling\n\nOverride CSS variables via `custom-class`. The **popup** renders outside the\ncalendar root (fixed position), so its `--popup-*` variables must be set on a\n**shared ancestor** (e.g. `:root`).\n\n```vue\n\n```\n\n```css\n/* Calendar root theming */\n.my-calendar {\n --font-family: 'Inter', system-ui, sans-serif;\n\n /* Accent (active toggle, focus, \"today\") */\n --accent-color: #007bff;\n --accent-contrast: #ffffff;\n\n /* Grid & events */\n --grid-border-color: #cccccc;\n --calendar-primary-color: #a4d8ff;\n --event-border-radius: 8px;\n --event-title-color: #000000;\n --event-title-size: 16px;\n\n /* Buttons */\n --button-bg-color: var(--accent-color);\n --button-hover-bg-color: #0056b3;\n --button-color: var(--accent-contrast);\n --button-border-radius: 6px;\n\n /* Navigation */\n --arrow-button-bg: var(--accent-color);\n --arrow-button-color: var(--accent-contrast);\n --current-week-color: #000000;\n\n /* View toggle */\n --view-btn-active-bg: var(--accent-color);\n --view-btn-active-color: var(--accent-contrast);\n\n /* Month view */\n --month-cell-min-height: 96px;\n --month-today-bg: color-mix(in srgb, var(--accent-color) 12%, transparent);\n --month-chip-color: #000000;\n\n /* Drag tooltip / preview */\n --drag-tooltip-bg: var(--accent-color);\n --drag-tooltip-color: var(--accent-contrast);\n --event-preview-border: 2px dashed rgba(0, 0, 0, 0.35);\n\n /* Form */\n --form-bg-color: #ffffff;\n --label-color: #333333;\n --input-border: 1px solid #ccc;\n --input-border-radius: 6px;\n\n /* Danger (delete) */\n --danger-bg: #e53e3e;\n --danger-text: #ffffff;\n}\n\n/* Popup theming — must be global because the popup is teleported */\n:root {\n --popup-bg: #ffffff;\n --popup-overlay-bg: rgba(0, 0, 0, 0.5);\n --popup-border-radius: 5px;\n --popup-title-color: #222222;\n --popup-label-color: #333333;\n --popup-input-focus-border: var(--accent-color, #007bff);\n --popup-save-bg: #007bff;\n --popup-save-hover-bg: #0056b3;\n}\n```\n\n### Dark Mode\n\n**Per component:**\n\n```vue\n\n```\n\n**Global:**\n\n```js\ndocument.documentElement.classList.add('dark'); // enable\ndocument.documentElement.classList.remove('dark'); // disable\n```\n\n---\n\n## Roadmap\n\n- Read-only mode (`:readonly`) to disable creating and dragging\n- `@range-change` event for lazy-loading events per visible range\n- `event` scoped slot for fully custom event markup\n- Recurring events (RRULE)\n- \"Jump to today\" and a current-time indicator\n- `allDay` event support in month view\n\n---\n\n## Contributing\n\nContributions are welcome. Please open an issue or submit a pull request.\n\n## License\n\n[MIT](./LICENSE)","readmeFilename":"README.md"}