@nomideusz/svelte-calendar 1.8.2 → 1.9.0

package/README.md

@@ -1112,7 +1112,7 @@ The widget renders inside shadow DOM: host-page CSS cannot affect the calendar a
 | `api` | — | Events endpoint, fetched as `GET {api}?start=…&end=…` (ISO instants; appended with `&` if `api` already has a query). It must answer JSON: an array of events, or `{ "events": [...] }`. |
 | `events` | — | Inline JSON array of events, used when there is no `api` |
 | `headers` | — | JSON object of extra request headers for `api`. Without it the GET is a simple CORS request (no preflight). |
-| `readonly` | read-only | The widget is read-only unless `readonly="false"`. There is no write endpoint: with `api`, drags are only visual; with `events`, they are kept in memory. |
+| `readonly` | read-only | The widget is read-only unless `readonly="false"`. There is no write endpoint: with `api`, drags are only visual; with `events`, they are kept in memory. Either way each committed drag fires `eventmove`. |
 | `view` | `week-planner` | Initial view ID (`week-planner`, `day-agenda`, `month-grid`, …) |
 | `theme` | `auto` | `auto`, `neutral` or `midnight` (unknown names fall back to `neutral`) |
 | `height` | `600` | Height in px (`"600"` or `"600px"`), or `auto` |
@@ -1131,6 +1131,21 @@ The widget renders inside shadow DOM: host-page CSS cannot affect the calendar a
 
 Each event in `api` responses and `events` needs `start` and `end` as date strings (ISO 8601) and may carry `id`, `title`, `color`, `allDay`, `subtitle` and `location`; other fields are ignored, as are events with an invalid or empty range. Changing an attribute updates the calendar in place.
 
+The element fires two DOM events (they bubble), with the event as the calendar holds it (`start` and `end` as `Date`s):
+
+| Event | `detail` | When |
+|-------|----------|------|
+| `eventclick` | `{ event, anchor }` | An event is clicked or activated with Enter; `anchor` is its block's viewport rect |
+| `eventmove` | `{ event, start, end }` | A drag or resize committed (only with `readonly="false"`); `event` is the one before the move |
+
+```js
+const cal = document.querySelector('day-calendar');
+cal.addEventListener('eventclick', (e) => open(e.detail.event.id));
+cal.addEventListener('eventmove', (e) => save(e.detail.event.id, e.detail.start, e.detail.end));
+```
+
+Keep your own copy in step with `eventmove` if you later set `events` again: a new `events` value replaces what the calendar holds.
+
 ## All Props
 
 Every `<Calendar>` prop (`CalendarProps`), grouped by what it controls.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "description": "A themeable Svelte 5 calendar: day, week, scrolling-week and month views, agenda lists, touch-first mobile layouts, drag-and-drop, timezones, a headless API and an embeddable web component.",
   "type": "module",
   "sideEffects": [

package/widget/widget.js

@@ -20756,6 +20756,7 @@ createHTML: (html) => {
 		/** Minimum day-column width in px for the week grid (default: 110) — a narrower container scrolls sideways */
 		/** Visible hours of the time grids, "start-end" in whole hours (e.g. "6-22") */
 		/** UI words as a JSON object over the English defaults, e.g. '{"today":"Dziś"}' */
+		/** Set by the <day-calendar> element: fires its `eventclick` / `eventmove` DOM events */
 		let theme = prop($$props, "theme", 3, "auto"), view = prop($$props, "view", 3, "week-planner"), height = prop($$props, "height", 3, "600"), mondaystart = prop($$props, "mondaystart", 3, "true");
 		const heightValue = /* @__PURE__ */ user_derived(() => {
 			const trimmed = height().trim();
@@ -20914,7 +20915,16 @@ createHTML: (html) => {
 				},
 				get labels() {
 					return get(labelsValue);
-				}
+				},
+				oneventclick: (event, anchor) => $$props.emit?.("eventclick", {
+					event,
+					anchor
+				}),
+				oneventmove: (event, start, end) => $$props.emit?.("eventmove", {
+					event,
+					start,
+					end
+				})
 			});
 		}
 		pop();
@@ -21030,9 +21040,13 @@ createHTML: (html) => {
 				this.stylesInjected = true;
 			}
 			const attrs = createReactiveProps(this.readProps());
+			const emit = (type, detail) => this.dispatchEvent(new CustomEvent(type, {
+				detail,
+				bubbles: true
+			}));
 			const component = mount(CalendarWidget, {
 				target: root,
-				props: attrs.props
+				props: Object.assign(attrs.props, { emit })
 			});
 			this.instance = {
 				component,