@nomideusz/svelte-calendar 0.9.0 → 0.10.0

package/dist/views/planner/PlannerWeek.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     }) => void;
     selectedEventId?: string | null;
     readOnly?: boolean;
+    /** Visible hour range [startHour, endHour) */
+    visibleHours?: [number, number];
     [key: string]: unknown;
 }
 declare const PlannerWeek: import("svelte").Component<Props, {}, "">;

package/dist/views/shared/context.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
+import { type CalendarLabels } from '../../core/locale.js';
 import type { DragState } from '../../engine/drag.svelte.js';
 import type { ViewState } from '../../engine/view-state.svelte.js';
 export interface CalendarContext {
@@ -39,6 +40,8 @@ export interface CalendarContext {
     } | undefined;
     readonly eventSnippet: Snippet<[TimelineEvent]> | undefined;
     readonly emptySnippet: Snippet | undefined;
+    /** Per-instance labels (Calendar's `labels` prop merged over globals); global labels when headless. */
+    readonly labels: CalendarLabels;
 }
 /**
  * Read the calendar context.

package/dist/views/shared/context.svelte.js

@@ -5,6 +5,7 @@
  * This module reads it and returns a typed interface for views.
  */
 import { getContext } from 'svelte';
+import { getLabels } from '../../core/locale.js';
 import { sod } from '../../core/time.js';
 /**
  * Read the calendar context.
@@ -13,6 +14,15 @@ import { sod } from '../../core/time.js';
  */
 export function useCalendarContext() {
     const raw = getContext('calendar');
+    // Memoized: views read these per-cell per-render (often at 1Hz), so avoid
+    // allocating a fresh Set / wrapper object on every access.
+    const disabledSet = $derived(new Set(raw?.disabledDates?.map(d => sod(d.getTime())) ?? []));
+    const loadRange = raw
+        ? {
+            get current() { return raw.loadRange; },
+            set: (r) => raw.setLoadRange(r),
+        }
+        : undefined;
     return {
         get viewState() { return raw?.viewState; },
         get drag() { return raw?.drag; },
@@ -33,16 +43,10 @@ export function useCalendarContext() {
         get ondayclick() { return raw?.ondayclick; },
         get timezone() { return raw?.timezone; },
         get disabledDates() { return raw?.disabledDates; },
-        get disabledSet() { return new Set(raw?.disabledDates?.map(d => sod(d.getTime())) ?? []); },
-        get loadRange() {
-            if (!raw)
-                return undefined;
-            return {
-                get current() { return raw.loadRange; },
-                set: (r) => raw.setLoadRange(r),
-            };
-        },
+        get disabledSet() { return disabledSet; },
+        get loadRange() { return loadRange; },
         get eventSnippet() { return raw?.eventSnippet; },
         get emptySnippet() { return raw?.emptySnippet; },
+        get labels() { return raw?.labels ?? getLabels(); },
     };
 }

package/dist/views/shared/format.d.ts

@@ -3,9 +3,10 @@
  * Extracted from duplicated code in AgendaDay and AgendaWeek.
  */
 import type { TimelineEvent } from '../../core/types.js';
+import { type CalendarLabels } from '../../core/locale.js';
 export declare function fmtTime(d: Date, locale?: string): string;
 export declare function duration(ev: TimelineEvent): string;
-export declare function timeUntilMs(ms: number, now: number): string;
+export declare function timeUntilMs(ms: number, now: number, labels?: CalendarLabels): string;
 export declare function progress(ev: TimelineEvent, now: number): number;
 /**
  * Group overlapping events into time slots.

package/dist/views/shared/format.js

@@ -5,24 +5,27 @@ export function fmtTime(d, locale) {
 export function duration(ev) {
     return fmtDuration(ev.start, ev.end);
 }
-export function timeUntilMs(ms, now) {
-    const L = getLabels();
+export function timeUntilMs(ms, now, labels) {
+    const L = labels ?? getLabels();
     const diff = ms - now;
     if (diff <= 0)
         return L.now;
     const tMins = Math.floor(diff / 60000);
     if (tMins < 60)
-        return `in ${tMins}m`;
+        return L.inMinutes(tMins);
     const hrs = Math.floor(tMins / 60);
     const rm = tMins % 60;
     if (hrs < 24)
-        return rm > 0 ? `in ${hrs}h ${rm}m` : `in ${hrs}h`;
+        return L.inHours(hrs, rm);
     const days = Math.floor(hrs / 24);
-    return `in ${days}d`;
+    return L.inDays(days);
 }
 export function progress(ev, now) {
     const s = ev.start.getTime();
     const e = ev.end.getTime();
+    // Zero-length (or inverted) event: fully "done" once its start has passed.
+    if (e <= s)
+        return now >= s ? 1 : 0;
     return Math.min(1, Math.max(0, (now - s) / (e - s)));
 }
 export function groupIntoSlots(evts) {

package/dist/widget/CalendarWidget.svelte

@@ -20,22 +20,43 @@ import { presets } from "../theme/presets.js";
 let {
   api,
   events,
-  theme = "neutral",
+  theme = "auto",
   view = "week-planner",
   height = "600",
   locale,
   dir,
   mondaystart = "true",
-  headers
+  headers,
+  readonly,
+  pills,
+  nav,
+  mobile,
+  days,
+  compact,
+  timezone
 } = $props();
-const heightPx = $derived(parseInt(height, 10) || 600);
+const heightValue = $derived.by(() => {
+  const trimmed = height.trim();
+  if (trimmed === "auto") return "auto";
+  if (/^\d+(px)?$/.test(trimmed)) return parseInt(trimmed, 10);
+  console.warn(`[day-calendar] Unsupported height "${height}" \u2014 use pixels or "auto". Falling back to 600.`);
+  return 600;
+});
 const isMondayStart = $derived(mondaystart !== "false");
 const themeStyle = $derived(
-  presets[theme] || presets.neutral
+  theme in presets ? presets[theme] : presets.neutral
 );
 const dirValue = $derived(
   dir === "rtl" || dir === "ltr" || dir === "auto" ? dir : void 0
 );
+const mobileValue = $derived(
+  mobile === "true" ? true : mobile === "false" ? false : "auto"
+);
+const daysValue = $derived.by(() => {
+  if (!days) return void 0;
+  const n = parseInt(days, 10);
+  return Number.isNaN(n) || n < 1 || n > 7 ? void 0 : n;
+});
 function parseHeaders(json) {
   if (!json) return void 0;
   try {
@@ -98,8 +119,15 @@ const adapter = $derived.by(() => {
 	{adapter}
 	{view}
 	theme={themeStyle}
-	height={heightPx}
+	height={heightValue}
 	mondayStart={isMondayStart}
 	dir={dirValue}
 	{locale}
+	readOnly={readonly === 'true'}
+	showModePills={pills !== 'false'}
+	showNavigation={nav !== 'false'}
+	mobile={mobileValue}
+	days={daysValue}
+	compact={compact === 'true'}
+	timezone={timezone || undefined}
 />

package/dist/widget/CalendarWidget.svelte.d.ts

@@ -3,11 +3,11 @@ interface Props {
     api?: string;
     /** JSON string of events for static/inline data (alternative to api) */
     events?: string;
-    /** Theme preset name: midnight, neutral */
+    /** Theme preset name: auto (default — adapts to the host page), neutral, midnight */
     theme?: string;
     /** Default view ID */
     view?: string;
-    /** Calendar height in pixels */
+    /** Calendar height: pixels (e.g. "600") or "auto" */
     height?: string;
     /** BCP 47 locale tag (e.g. 'en-US', 'pl-PL') */
     locale?: string;
@@ -17,6 +17,20 @@ interface Props {
     mondaystart?: string;
     /** Custom HTTP headers as JSON string for REST adapter */
     headers?: string;
+    /** Read-only mode: "true" disables drag/resize/create */
+    readonly?: string;
+    /** Show the Day/Week/Month pills (default: true) */
+    pills?: string;
+    /** Show prev/next/today navigation (default: true) */
+    nav?: string;
+    /** Mobile mode: "auto" (default), "true", "false" */
+    mobile?: string;
+    /** Days shown in week mode, e.g. "3" or "5" */
+    days?: string;
+    /** Compact agenda rendering: "true" */
+    compact?: string;
+    /** IANA timezone, e.g. "Europe/Warsaw" */
+    timezone?: string;
 }
 declare const CalendarWidget: import("svelte").Component<Props, {}, "">;
 type CalendarWidget = ReturnType<typeof CalendarWidget>;

package/dist/widget/widget.d.ts

@@ -1 +1,10 @@
+declare global {
+    /**
+     * The widget's bundled CSS, assigned at the top of widget.js by the
+     * inlineCss build plugin (vite.config.widget.ts). Undefined when this
+     * module is consumed through the normal library path (dev, SvelteKit),
+     * where styles ship through the regular Svelte CSS pipeline instead.
+     */
+    var __DAY_CALENDAR_CSS__: string | undefined;
+}
 export {};

package/dist/widget/widget.js

@@ -3,20 +3,70 @@
  *
  * This file is the entry point for the standalone widget bundle (widget.js).
  * Import it via a <script> tag on any HTML page.
+ *
+ * The component mounts into an open shadow root so host-page CSS (resets,
+ * theme stylesheets) cannot bleed into the calendar and calendar styles
+ * cannot leak out. The bundled CSS is injected into each shadow root — see
+ * `injectStyles` below and the inlineCss plugin in vite.config.widget.ts.
  */
 import { asClassComponent } from 'svelte/legacy';
 import CalendarWidget from './CalendarWidget.svelte';
 const CalendarWidgetClass = asClassComponent(CalendarWidget);
+/**
+ * Shared constructable stylesheet — parsed once, adopted by every
+ * <day-calendar> shadow root on the page.
+ */
+let sharedSheet = null;
+/**
+ * Add the bundled widget CSS to a shadow root.
+ *
+ * Prefers `adoptedStyleSheets` (one parse for N widgets); falls back to a
+ * <style> element where constructable stylesheets are unavailable. No-op
+ * when the CSS global is undefined (dev / library usage).
+ */
+function injectStyles(root) {
+    const css = globalThis.__DAY_CALENDAR_CSS__;
+    if (!css)
+        return;
+    if ('adoptedStyleSheets' in root && typeof CSSStyleSheet !== 'undefined') {
+        try {
+            if (!sharedSheet) {
+                sharedSheet = new CSSStyleSheet();
+                sharedSheet.replaceSync(css);
+            }
+            root.adoptedStyleSheets = [...root.adoptedStyleSheets, sharedSheet];
+            return;
+        }
+        catch {
+            // Constructable stylesheets unsupported (older engines) — fall through.
+        }
+    }
+    const style = document.createElement('style');
+    style.setAttribute('data-day-calendar', '');
+    style.textContent = css;
+    root.appendChild(style);
+}
+const WIDGET_ATTRS = [
+    'api', 'events', 'theme', 'view', 'height', 'locale', 'dir', 'mondaystart',
+    'headers', 'readonly', 'pills', 'nav', 'mobile', 'days', 'compact', 'timezone',
+];
 class DayCalendarElement extends HTMLElement {
     instance = null;
+    stylesInjected = false;
     static get observedAttributes() {
-        return ['api', 'events', 'theme', 'view', 'height', 'locale', 'dir', 'mondaystart', 'headers'];
+        return [...WIDGET_ATTRS];
     }
     connectedCallback() {
         if (this.instance)
             return;
+        // The shadow root survives disconnect/reconnect — attach only once.
+        const root = this.shadowRoot ?? this.attachShadow({ mode: 'open' });
+        if (!this.stylesInjected) {
+            injectStyles(root);
+            this.stylesInjected = true;
+        }
         this.instance = new CalendarWidgetClass({
-            target: this,
+            target: root,
             props: this.readProps(),
         });
     }
@@ -32,17 +82,13 @@ class DayCalendarElement extends HTMLElement {
         });
     }
     readProps() {
-        return {
-            api: this.getAttribute('api') ?? undefined,
-            events: this.getAttribute('events') ?? undefined,
-            theme: this.getAttribute('theme') ?? undefined,
-            view: this.getAttribute('view') ?? undefined,
-            height: this.getAttribute('height') ?? undefined,
-            locale: this.getAttribute('locale') ?? undefined,
-            dir: this.getAttribute('dir') ?? undefined,
-            mondaystart: this.getAttribute('mondaystart') ?? undefined,
-            headers: this.getAttribute('headers') ?? undefined,
-        };
+        const props = {};
+        for (const attr of WIDGET_ATTRS) {
+            const value = this.getAttribute(attr);
+            if (value !== null)
+                props[attr] = value;
+        }
+        return props;
     }
 }
 if (!customElements.get('day-calendar')) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nomideusz/svelte-calendar",
-	"version": "0.9.0",
+	"version": "0.10.0",
 	"description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
 	"type": "module",
 	"license": "MIT",