@screenly/edge-apps 0.0.1 → 0.0.2

package/dist/components/calendar-views/schedule-calendar-view/schedule-calendar-view-styles.js

@@ -0,0 +1,118 @@
+export const COMPONENT_CSS = `:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  font-family: 'Inter', system-ui, sans-serif;
+  overflow: hidden;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.schedule-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 1rem 1.25rem 1rem 1rem;
+  gap: 1.5rem;
+  overflow: hidden;
+}
+
+.schedule-title {
+  font-size: 2.8125rem;
+  font-weight: 400;
+  color: var(--theme-color-primary, #0f3a97);
+  letter-spacing: -0.1125rem;
+  margin: 2rem 0 0 0;
+  line-height: normal;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.schedule-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  background: #fff;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  padding: 1.5rem;
+  gap: 2rem;
+}
+
+.day-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: 0.75rem;
+  overflow: hidden;
+}
+
+.day-section + .day-section {
+  border-left: 0.0625rem solid #f3f4f6;
+  padding-left: 2rem;
+}
+
+.day-heading {
+  font-size: 0.98rem;
+  font-weight: 500;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  line-height: 1.333;
+  flex-shrink: 0;
+}
+
+.events-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+}
+
+.event-item {
+  display: flex;
+  flex-direction: column;
+  background: #ededed;
+  border-left: 0.327rem solid var(--theme-color-primary, #0f3a97);
+  border-radius: 0 0.5rem 0.5rem 0;
+  padding: 0.5rem 0.75rem;
+  gap: 0.2rem;
+  flex-shrink: 0;
+}
+
+.event-title {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: normal;
+}
+
+.event-time {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--theme-color-primary, #0f3a97);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: normal;
+}
+
+.no-events {
+  font-size: 0.9rem;
+  color: #9ca3af;
+  text-align: center;
+  padding: 1.5rem 0;
+}`;

package/dist/components/calendar-views/schedule-calendar-view/schedule-calendar-view.d.ts

@@ -0,0 +1,23 @@
+import type { CalendarEvent } from '../event-layout.js';
+export type { CalendarEvent };
+export declare class ScheduleCalendarView extends HTMLElement {
+    private _events;
+    private _now;
+    private _timezone;
+    private _locale;
+    private _initialized;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldVal: string, newVal: string): void;
+    get events(): CalendarEvent[];
+    set events(value: CalendarEvent[]);
+    get now(): Date;
+    set now(value: Date);
+    private _getVisibleEvents;
+    private _buildEventItem;
+    private _buildDaySection;
+    private _getDayLabel;
+    private _render;
+}
+//# sourceMappingURL=schedule-calendar-view.d.ts.map

package/dist/components/calendar-views/schedule-calendar-view/schedule-calendar-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schedule-calendar-view.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar-views/schedule-calendar-view/schedule-calendar-view.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAOvD,YAAY,EAAE,aAAa,EAAE,CAAA;AAI7B,qBAAa,oBAAqB,SAAQ,WAAW;IACnD,OAAO,CAAC,OAAO,CAAsB;IACrC,OAAO,CAAC,IAAI,CAAmB;IAC/B,OAAO,CAAC,SAAS,CAAgB;IACjC,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,YAAY,CAAiB;IAErC,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAKjB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAMtE,IAAI,MAAM,IAAI,aAAa,EAAE,CAE5B;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE,EAGhC;IAED,IAAI,GAAG,IAAI,IAAI,CAEd;IAED,IAAI,GAAG,CAAC,KAAK,EAAE,IAAI,EAGlB;IAED,OAAO,CAAC,iBAAiB;IAgDzB,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,gBAAgB;IA+BxB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,OAAO;CA+BhB"}

package/dist/components/calendar-views/schedule-calendar-view/schedule-calendar-view.js

@@ -0,0 +1,167 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { COMPONENT_CSS } from './schedule-calendar-view-styles.js';
+import { formatEventTime } from '../weekly-calendar-view/weekly-calendar-view-utils.js';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const MAX_EVENTS_TOTAL = 12;
+export class ScheduleCalendarView extends HTMLElement {
+    _events = [];
+    _now = new Date();
+    _timezone = 'UTC';
+    _locale = 'en';
+    _initialized = false;
+    static get observedAttributes() {
+        return ['timezone', 'locale'];
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this._initialized = true;
+        this._render();
+    }
+    attributeChangedCallback(name, _oldVal, newVal) {
+        if (name === 'timezone')
+            this._timezone = newVal || 'UTC';
+        if (name === 'locale')
+            this._locale = newVal || 'en';
+        if (this._initialized)
+            this._render();
+    }
+    get events() {
+        return this._events;
+    }
+    set events(value) {
+        this._events = value || [];
+        if (this._initialized)
+            this._render();
+    }
+    get now() {
+        return this._now;
+    }
+    set now(value) {
+        this._now = value;
+        if (this._initialized)
+            this._render();
+    }
+    _getVisibleEvents() {
+        const timezone = this._timezone;
+        const now = dayjs(this._now).tz(timezone);
+        const startOfToday = now.startOf('day');
+        const startOfTomorrow = startOfToday.add(1, 'day');
+        const startOfDayAfter = startOfTomorrow.add(1, 'day');
+        const sortByStart = (a, b) => dayjs(a.startTime).tz(timezone).valueOf() -
+            dayjs(b.startTime).tz(timezone).valueOf();
+        const todayAll = this._events
+            .filter((event) => {
+            if (event.isAllDay)
+                return false;
+            const start = dayjs(event.startTime).tz(timezone);
+            const end = dayjs(event.endTime).tz(timezone);
+            // Include events that start today and haven't ended yet (covers ongoing events)
+            return start.isBefore(startOfTomorrow) && end.isAfter(now);
+        })
+            .sort(sortByStart);
+        const tomorrowAll = this._events
+            .filter((event) => {
+            if (event.isAllDay)
+                return false;
+            const start = dayjs(event.startTime).tz(timezone);
+            return (!start.isBefore(startOfTomorrow) && start.isBefore(startOfDayAfter));
+        })
+            .sort(sortByStart);
+        let todayEvents;
+        let tomorrowEvents;
+        if (todayAll.length >= MAX_EVENTS_TOTAL) {
+            todayEvents = todayAll.slice(0, MAX_EVENTS_TOTAL);
+            tomorrowEvents = [];
+        }
+        else {
+            todayEvents = todayAll;
+            tomorrowEvents = tomorrowAll.slice(0, MAX_EVENTS_TOTAL - todayAll.length);
+        }
+        return { todayEvents, tomorrowEvents };
+    }
+    _buildEventItem(event) {
+        const timezone = this._timezone;
+        const locale = this._locale;
+        const item = document.createElement('div');
+        item.className = 'event-item';
+        if (event.backgroundColor) {
+            item.style.setProperty('background-color', event.backgroundColor);
+        }
+        const titleEl = document.createElement('div');
+        titleEl.className = 'event-title';
+        titleEl.textContent = event.title;
+        const timeEl = document.createElement('div');
+        timeEl.className = 'event-time';
+        timeEl.textContent = formatEventTime(event.startTime, event.endTime, locale, timezone);
+        item.appendChild(titleEl);
+        item.appendChild(timeEl);
+        return item;
+    }
+    _buildDaySection(heading, events, showNoEvents) {
+        const section = document.createElement('div');
+        section.className = 'day-section';
+        const headingEl = document.createElement('h2');
+        headingEl.className = 'day-heading';
+        headingEl.textContent = heading;
+        section.appendChild(headingEl);
+        const list = document.createElement('div');
+        list.className = 'events-list';
+        if (events.length === 0 && showNoEvents) {
+            const empty = document.createElement('div');
+            empty.className = 'no-events';
+            empty.textContent = 'No upcoming events';
+            list.appendChild(empty);
+        }
+        else {
+            for (const event of events) {
+                list.appendChild(this._buildEventItem(event));
+            }
+        }
+        section.appendChild(list);
+        return section;
+    }
+    _getDayLabel(offsetDays) {
+        const timezone = this._timezone;
+        const locale = this._locale;
+        const date = dayjs(this._now).tz(timezone).add(offsetDays, 'day');
+        const weekday = date.toDate().toLocaleDateString(locale, {
+            weekday: 'long',
+            timeZone: timezone,
+        });
+        const dayNum = date.date();
+        const month = date.toDate().toLocaleDateString(locale, {
+            month: 'short',
+            timeZone: timezone,
+        });
+        return `${weekday}, ${month} ${dayNum}`;
+    }
+    _render() {
+        const shadow = this.shadowRoot;
+        const { todayEvents, tomorrowEvents } = this._getVisibleEvents();
+        shadow.innerHTML = `<style>${COMPONENT_CSS}</style>`;
+        const container = document.createElement('div');
+        container.className = 'schedule-container';
+        const title = document.createElement('p');
+        title.className = 'schedule-title';
+        title.textContent = 'Schedule';
+        container.appendChild(title);
+        const body = document.createElement('div');
+        body.className = 'schedule-body';
+        body.appendChild(this._buildDaySection(this._getDayLabel(0), todayEvents, true));
+        if (tomorrowEvents.length > 0) {
+            body.appendChild(this._buildDaySection(this._getDayLabel(1), tomorrowEvents, false));
+        }
+        container.appendChild(body);
+        shadow.appendChild(container);
+    }
+}
+if (typeof window !== 'undefined' &&
+    !customElements.get('schedule-calendar-view')) {
+    customElements.define('schedule-calendar-view', ScheduleCalendarView);
+}

package/dist/components/calendar-views/weekly-calendar-view/index.d.ts

@@ -0,0 +1,3 @@
+export { WeeklyCalendarView } from './weekly-calendar-view.js';
+export type { CalendarEvent } from '../event-layout.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/calendar-views/weekly-calendar-view/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar-views/weekly-calendar-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAC9D,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/calendar-views/weekly-calendar-view/index.js

@@ -0,0 +1 @@
+export { WeeklyCalendarView } from './weekly-calendar-view.js';

package/dist/components/calendar-views/weekly-calendar-view/weekly-calendar-view-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const COMPONENT_CSS = ":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  font-family: 'Inter', system-ui, sans-serif;\n  overflow: hidden;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n.weekly-calendar-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding: 1rem 1.25rem 1rem 1rem;\n}\n\n.this-week-title {\n  font-size: 2.8125rem;\n  font-weight: 400;\n  font-style: normal;\n  color: var(--theme-color-primary, #0f3a97);\n  letter-spacing: -0.1125rem;\n  margin: 2rem 0 2.875rem 0;\n  line-height: normal;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.week-grid {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: #fff;\n  border-radius: 0.75rem;\n  overflow: hidden;\n}\n\n.time-gutter {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 6.5rem;\n  padding-top: 5.225rem;\n}\n\n.time-label {\n  flex: 1;\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-end;\n  padding-right: 1rem;\n  font-size: 0.98rem;\n  color: #6b7280;\n  white-space: nowrap;\n  transform: translateY(-0.5em);\n}\n\n.days-grid {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  border-left: 0.0625rem solid #f3f4f6;\n}\n\n.day-column {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  border-right: 0.0625rem solid #f3f4f6;\n}\n\n.day-column:last-child {\n  border-right: none;\n}\n\n.day-header {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0.375rem 0.25rem;\n  gap: 0.125rem;\n  height: 5.225rem;\n  flex-shrink: 0;\n  border-bottom: 0.0625rem solid #f3f4f6;\n}\n\n.day-header.today {\n  background: var(--theme-color-primary, #0f3a97);\n}\n\n.day-name {\n  font-size: 0.98rem;\n  font-weight: 500;\n  color: #6b7280;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  line-height: 1.333;\n}\n\n.day-header.today .day-name {\n  color: #fff;\n  opacity: 0.8;\n}\n\n.day-date {\n  font-size: 1.469rem;\n  font-weight: 600;\n  color: #111827;\n  line-height: 1.556;\n}\n\n.day-header.today .day-date {\n  color: #fff;\n}\n\n.day-body {\n  flex: 1;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n}\n\n.hour-row {\n  flex: 1;\n  border-bottom: 0.0625rem solid #f3f4f6;\n  position: relative;\n  min-height: 0;\n}\n\n.hour-row:last-child {\n  border-bottom: none;\n}\n\n.events-area {\n  position: absolute;\n  top: 0;\n  left: 0.327rem;\n  bottom: 0;\n  right: 0.653rem;\n}\n\n.event-wrapper {\n  position: absolute;\n  z-index: 2;\n  outline: 0.125rem solid white;\n  border-radius: 0 0.653rem 0.653rem 0;\n}\n\n.event-item {\n  height: 100%;\n  background: #ededed;\n  border-left: 0.327rem solid var(--theme-color-primary, #0f3a97);\n  border-radius: 0 0.653rem 0.653rem 0;\n  padding: 0.5rem 0.98rem;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 0.327rem;\n}\n\n.event-item.event-compact {\n  justify-content: center;\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.event-inline-time {\n  color: var(--theme-color-primary, #0f3a97);\n}\n\n.event-item.clipped-top {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.event-item.clipped-bottom {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.event-title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: #111827;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: normal;\n}\n\n.event-time {\n  font-size: 0.75rem;\n  font-weight: 400;\n  color: var(--theme-color-primary, #0f3a97);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: normal;\n}\n\n.current-time-indicator {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 0.125rem;\n  background: #ea4335;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.current-time-indicator::before {\n  content: '';\n  position: absolute;\n  left: -0.25rem;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 50%;\n  background: #ea4335;\n}";
+//# sourceMappingURL=weekly-calendar-view-styles.d.ts.map

package/dist/components/calendar-views/weekly-calendar-view/weekly-calendar-view-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weekly-calendar-view-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar-views/weekly-calendar-view/weekly-calendar-view-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,0mIAyOxB,CAAA"}

package/dist/components/calendar-views/weekly-calendar-view/weekly-calendar-view-styles.js

@@ -0,0 +1,234 @@
+export const COMPONENT_CSS = `:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  font-family: 'Inter', system-ui, sans-serif;
+  overflow: hidden;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.weekly-calendar-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 1rem 1.25rem 1rem 1rem;
+}
+
+.this-week-title {
+  font-size: 2.8125rem;
+  font-weight: 400;
+  font-style: normal;
+  color: var(--theme-color-primary, #0f3a97);
+  letter-spacing: -0.1125rem;
+  margin: 2rem 0 2.875rem 0;
+  line-height: normal;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.week-grid {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  background: #fff;
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.time-gutter {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 6.5rem;
+  padding-top: 5.225rem;
+}
+
+.time-label {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding-right: 1rem;
+  font-size: 0.98rem;
+  color: #6b7280;
+  white-space: nowrap;
+  transform: translateY(-0.5em);
+}
+
+.days-grid {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  border-left: 0.0625rem solid #f3f4f6;
+}
+
+.day-column {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  border-right: 0.0625rem solid #f3f4f6;
+}
+
+.day-column:last-child {
+  border-right: none;
+}
+
+.day-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0.25rem;
+  gap: 0.125rem;
+  height: 5.225rem;
+  flex-shrink: 0;
+  border-bottom: 0.0625rem solid #f3f4f6;
+}
+
+.day-header.today {
+  background: var(--theme-color-primary, #0f3a97);
+}
+
+.day-name {
+  font-size: 0.98rem;
+  font-weight: 500;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  line-height: 1.333;
+}
+
+.day-header.today .day-name {
+  color: #fff;
+  opacity: 0.8;
+}
+
+.day-date {
+  font-size: 1.469rem;
+  font-weight: 600;
+  color: #111827;
+  line-height: 1.556;
+}
+
+.day-header.today .day-date {
+  color: #fff;
+}
+
+.day-body {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+}
+
+.hour-row {
+  flex: 1;
+  border-bottom: 0.0625rem solid #f3f4f6;
+  position: relative;
+  min-height: 0;
+}
+
+.hour-row:last-child {
+  border-bottom: none;
+}
+
+.events-area {
+  position: absolute;
+  top: 0;
+  left: 0.327rem;
+  bottom: 0;
+  right: 0.653rem;
+}
+
+.event-wrapper {
+  position: absolute;
+  z-index: 2;
+  outline: 0.125rem solid white;
+  border-radius: 0 0.653rem 0.653rem 0;
+}
+
+.event-item {
+  height: 100%;
+  background: #ededed;
+  border-left: 0.327rem solid var(--theme-color-primary, #0f3a97);
+  border-radius: 0 0.653rem 0.653rem 0;
+  padding: 0.5rem 0.98rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.327rem;
+}
+
+.event-item.event-compact {
+  justify-content: center;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.event-inline-time {
+  color: var(--theme-color-primary, #0f3a97);
+}
+
+.event-item.clipped-top {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.event-item.clipped-bottom {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.event-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: normal;
+}
+
+.event-time {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--theme-color-primary, #0f3a97);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: normal;
+}
+
+.current-time-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0.125rem;
+  background: #ea4335;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.current-time-indicator::before {
+  content: '';
+  position: absolute;
+  left: -0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: #ea4335;
+}`;

package/dist/components/calendar-views/weekly-calendar-view/weekly-calendar-view-utils.d.ts

@@ -0,0 +1,16 @@
+import type { CalendarEvent, EventLayout } from '../event-layout.js';
+export type { TimeSlot } from '../calendar-window-utils.js';
+export declare function getEventStyle(event: CalendarEvent, windowStartHour: number, layout: EventLayout, timezone: string): {
+    topPercent: number;
+    heightPercent: number;
+    widthPercent: number;
+    leftPercent: number;
+    zIndex: number;
+    clippedTop: boolean;
+    clippedBottom: boolean;
+    isLastColumn: boolean;
+};
+export declare function formatEventStartTime(startTime: string, locale: string, timezone: string): string;
+export declare function formatEventTime(startTime: string, endTime: string, locale: string, timezone: string): string;
+export declare function setAttribute(el: HTMLElement, name: string, value: string): void;
+//# sourceMappingURL=weekly-calendar-view-utils.d.ts.map

package/dist/components/calendar-views/weekly-calendar-view/weekly-calendar-view-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weekly-calendar-view-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar-views/weekly-calendar-view/weekly-calendar-view-utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AACpE,YAAY,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAK3D,wBAAgB,aAAa,CAC3B,KAAK,EAAE,aAAa,EACpB,eAAe,EAAE,MAAM,EACvB,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,MAAM,GACf;IACD,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,YAAY,EAAE,OAAO,CAAA;CACtB,CA8CA;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACf,MAAM,CAYR;AAED,wBAAgB,eAAe,CAC7B,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACf,MAAM,CAaR;AAWD,wBAAgB,YAAY,CAC1B,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GACZ,IAAI,CAIN"}

package/dist/components/calendar-views/weekly-calendar-view/weekly-calendar-view-utils.js

@@ -0,0 +1,83 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+export function getEventStyle(event, windowStartHour, layout, timezone) {
+    const windowSize = 12;
+    const startDt = dayjs(event.startTime).tz(timezone);
+    const endDt = dayjs(event.endTime).tz(timezone);
+    // Anchor window to the event's calendar date in the target timezone
+    const windowStart = startDt.startOf('day').add(windowStartHour, 'hour');
+    const windowEnd = windowStart.add(windowSize, 'hour');
+    const startMs = startDt.valueOf();
+    const endMs = endDt.valueOf();
+    const windowStartMs = windowStart.valueOf();
+    const windowEndMs = windowEnd.valueOf();
+    const windowDurationMs = windowEnd.diff(windowStart);
+    const visibleStartMs = Math.max(startMs, windowStartMs);
+    const visibleEndMs = Math.min(endMs, windowEndMs);
+    const topPercent = ((visibleStartMs - windowStartMs) / windowDurationMs) * 100;
+    const heightPercent = Math.max(((visibleEndMs - visibleStartMs) / windowDurationMs) * 100, 0.5);
+    const clippedTop = startMs < windowStartMs;
+    const clippedBottom = endMs > windowEndMs;
+    const columnWidth = 100 / layout.totalColumns;
+    const span = layout.columnSpan > 0 ? layout.columnSpan : 1;
+    const isLastColumn = layout.column + span >= layout.totalColumns;
+    const overlapBonus = isLastColumn ? 0 : columnWidth * 0.7;
+    const widthPercent = columnWidth * span + overlapBonus;
+    const leftPercent = layout.column * columnWidth;
+    const zIndex = 2 + layout.column;
+    return {
+        topPercent,
+        heightPercent,
+        widthPercent,
+        leftPercent,
+        zIndex,
+        clippedTop,
+        clippedBottom,
+        isLastColumn,
+    };
+}
+export function formatEventStartTime(startTime, locale, timezone) {
+    try {
+        const start = new Date(startTime);
+        const opts = {
+            hour: 'numeric',
+            minute: '2-digit',
+            timeZone: timezone,
+        };
+        return start.toLocaleTimeString(locale, opts);
+    }
+    catch {
+        return '';
+    }
+}
+export function formatEventTime(startTime, endTime, locale, timezone) {
+    try {
+        const start = new Date(startTime);
+        const end = new Date(endTime);
+        const opts = {
+            hour: 'numeric',
+            minute: '2-digit',
+            timeZone: timezone,
+        };
+        return `${start.toLocaleTimeString(locale, opts)} – ${end.toLocaleTimeString(locale, opts)}`;
+    }
+    catch {
+        return '';
+    }
+}
+const ALLOWED_ATTRIBUTES = new Set([
+    'class',
+    'style',
+    'data-day-index',
+    'data-hour',
+    'title',
+    'aria-label',
+]);
+export function setAttribute(el, name, value) {
+    if (ALLOWED_ATTRIBUTES.has(name) || name.startsWith('data-')) {
+        el.setAttribute(name, value);
+    }
+}