@forcecalendar/interface 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",

package/src/components/ForceCalendar.js

@@ -6,7 +6,7 @@
 
 import { BaseComponent } from '../core/BaseComponent.js';
 import StateManager from '../core/StateManager.js';
-import { StyleUtils } from '../utils/StyleUtils.js';
+import { StyleUtils, THEME_PRESETS } from '../utils/StyleUtils.js';
 import { DateUtils } from '../utils/DateUtils.js';
 import { DOMUtils } from '../utils/DOMUtils.js';
 
@@ -26,7 +26,7 @@ export class ForceCalendar extends BaseComponent {
   };
 
   static get observedAttributes() {
-    return ['view', 'date', 'locale', 'timezone', 'week-starts-on', 'height'];
+    return ['view', 'date', 'locale', 'timezone', 'week-starts-on', 'height', 'theme'];
   }
 
   constructor() {
@@ -403,6 +403,39 @@ export class ForceCalendar extends BaseComponent {
                 outline-offset: -2px;
             }
 
+            .fc-event { touch-action: none; }
+
+            .fc-dragging {
+                opacity: 0.6;
+                z-index: 30;
+                pointer-events: none;
+            }
+
+            .fc-drop-target {
+                outline: 2px dashed var(--fc-primary-color);
+                outline-offset: -2px;
+            }
+
+            .fc-resize-handle {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                height: 6px;
+                cursor: ns-resize;
+            }
+
+            .fc-drag-selection {
+                position: absolute;
+                left: 2px;
+                right: 2px;
+                background: color-mix(in srgb, var(--fc-primary-color) 18%, transparent);
+                border: 1px solid var(--fc-primary-color);
+                border-radius: 4px;
+                pointer-events: none;
+                z-index: 20;
+            }
+
             .fc-nav-arrow:focus-visible,
             .fc-btn:focus-visible,
             .fc-btn-today:focus-visible,
@@ -768,7 +801,25 @@ export class ForceCalendar extends BaseComponent {
     return '<div id="calendar-view-container"></div>';
   }
 
+  /**
+   * Apply a named theme preset (e.g. theme="slds") as host-level custom
+   * properties so it cascades into the shadow DOM and stays overridable
+   * by page-level --fc-* variables.
+   */
+  _applyTheme(name) {
+    const preset = THEME_PRESETS[name];
+    for (const token of Object.keys(THEME_PRESETS.slds)) {
+      if (preset && preset[token]) {
+        this.style.setProperty(token, preset[token]);
+      } else {
+        this.style.removeProperty(token);
+      }
+    }
+  }
+
   afterRender() {
+    this._applyTheme(this.getAttribute('theme'));
+
     // Manually instantiate and mount view renderer (bypasses Locker Service)
     const container = this.$('#calendar-view-container');
 
@@ -834,6 +885,14 @@ export class ForceCalendar extends BaseComponent {
       }
     });
 
+    // Drag-to-create emits a range: surface it and open the form prefilled
+    this.addListener(this.shadowRoot, 'range-select', e => {
+      this.emit('calendar-range-select', e.detail);
+      if (modal) {
+        modal.open(e.detail.start);
+      }
+    });
+
     // Handle event saving
     if (modal) {
       this.addListener(modal, 'save', e => {

package/src/core/DragController.js

@@ -0,0 +1,362 @@
+/**
+ * DragController - pointer-driven interactions for calendar views.
+ *
+ * Implements drag-to-move (month and time grids), drag-to-resize, and
+ * drag-to-create using Pointer Events only: no HTML5 drag-and-drop (which
+ * misbehaves in shadow roots), no dependencies, Locker Service safe.
+ *
+ * Keyboard users have equivalent paths via the WAI-ARIA grid navigation
+ * (arrow keys + Enter) that every view already implements.
+ */
+
+const DRAG_THRESHOLD_PX = 4;
+const SNAP_MINUTES = 15;
+const PX_PER_MINUTE = 1; // time grids render 60px per hour
+
+/** Snap a minute offset to the grid. Exported for tests. */
+export function snapMinutes(minutes, snap = SNAP_MINUTES) {
+  return Math.round(minutes / snap) * snap;
+}
+
+/** Clamp a start minute so [start, start+duration] stays inside a day. */
+export function clampStartMinutes(startMinutes, durationMinutes) {
+  return Math.max(0, Math.min(startMinutes, 24 * 60 - durationMinutes));
+}
+
+/**
+ * Combine a target day with an original start's time-of-day.
+ * Exported for tests.
+ */
+export function moveDatePreservingTime(targetDay, originalStart) {
+  const next = new Date(targetDay);
+  next.setHours(
+    originalStart.getHours(),
+    originalStart.getMinutes(),
+    originalStart.getSeconds(),
+    originalStart.getMilliseconds()
+  );
+  return next;
+}
+
+export class DragController {
+  constructor(renderer) {
+    this.renderer = renderer;
+    this.container = renderer.container;
+    this.stateManager = renderer.stateManager;
+    this._active = null;
+    this._docListeners = [];
+  }
+
+  /** Month view: drag an event chip onto another day cell. */
+  enableMonthMove() {
+    this.renderer.addListener(this.container, 'pointerdown', e => {
+      if (e.button !== 0) return;
+      const eventEl = e.target.closest('.fc-event');
+      if (!eventEl || !this.container.contains(eventEl)) return;
+      const originCell = eventEl.closest('.fc-month-day');
+      if (!originCell) return;
+
+      this._arm(e, {
+        mode: 'month-move',
+        eventEl,
+        eventId: eventEl.dataset.eventId,
+        onDragMove: ev => this._monthDragMove(ev),
+        onDrop: ev => this._monthDrop(ev)
+      });
+    });
+  }
+
+  /**
+   * Time grids (week/day): drag events vertically/across columns to move,
+   * drag the bottom handle to resize, drag empty grid to create.
+   */
+  enableTimeGrid(columnSelector) {
+    this._columnSelector = columnSelector;
+    this._injectResizeHandles();
+
+    this.renderer.addListener(this.container, 'pointerdown', e => {
+      if (e.button !== 0) return;
+
+      const handle = e.target.closest('.fc-resize-handle');
+      if (handle) {
+        const eventEl = handle.closest('.fc-timed-event');
+        if (!eventEl) return;
+        e.preventDefault();
+        this._arm(e, {
+          mode: 'resize',
+          eventEl,
+          eventId: eventEl.dataset.eventId,
+          originTop: parseFloat(eventEl.style.top) || 0,
+          originHeight: parseFloat(eventEl.style.height) || 30,
+          onDragMove: ev => this._resizeDragMove(ev),
+          onDrop: () => this._resizeDrop()
+        });
+        return;
+      }
+
+      const eventEl = e.target.closest('.fc-timed-event');
+      if (eventEl && this.container.contains(eventEl)) {
+        this._arm(e, {
+          mode: 'time-move',
+          eventEl,
+          eventId: eventEl.dataset.eventId,
+          originTop: parseFloat(eventEl.style.top) || 0,
+          originColumn: eventEl.closest(columnSelector),
+          onDragMove: ev => this._timeMoveDragMove(ev),
+          onDrop: () => this._timeMoveDrop()
+        });
+        return;
+      }
+
+      const column = e.target.closest(columnSelector);
+      if (column && !e.target.closest('.fc-event')) {
+        this._arm(e, {
+          mode: 'create',
+          column,
+          onDragMove: ev => this._createDragMove(ev),
+          onDrop: () => this._createDrop()
+        });
+      }
+    });
+  }
+
+  /** Track from pointerdown; promote to a drag past the threshold. */
+  _arm(e, spec) {
+    this._active = {
+      ...spec,
+      startX: e.clientX,
+      startY: e.clientY,
+      dragging: false
+    };
+    const move = ev => this._onPointerMove(ev);
+    const up = ev => this._onPointerUp(ev);
+    const cancel = () => this._cancel();
+    const key = ev => {
+      if (ev.key === 'Escape') this._cancel();
+    };
+    const doc = this.container.ownerDocument;
+    doc.addEventListener('pointermove', move);
+    doc.addEventListener('pointerup', up);
+    doc.addEventListener('pointercancel', cancel);
+    doc.addEventListener('keydown', key);
+    this._docListeners = [
+      ['pointermove', move],
+      ['pointerup', up],
+      ['pointercancel', cancel],
+      ['keydown', key]
+    ];
+  }
+
+  _onPointerMove(e) {
+    const a = this._active;
+    if (!a) return;
+    if (!a.dragging) {
+      if (
+        Math.abs(e.clientX - a.startX) < DRAG_THRESHOLD_PX &&
+        Math.abs(e.clientY - a.startY) < DRAG_THRESHOLD_PX
+      ) {
+        return;
+      }
+      a.dragging = true;
+      if (a.eventEl) {
+        a.eventEl.classList.add('fc-dragging');
+      }
+    }
+    e.preventDefault();
+    a.onDragMove(e);
+  }
+
+  _onPointerUp(e) {
+    const a = this._active;
+    this._teardownDocListeners();
+    if (!a) return;
+    if (a.dragging) {
+      // Swallow the click that follows a drag so it doesn't select/open
+      const doc = this.container.ownerDocument;
+      const swallow = ev => {
+        ev.stopPropagation();
+        ev.preventDefault();
+      };
+      doc.addEventListener('click', swallow, { capture: true, once: true });
+      setTimeout(() => doc.removeEventListener('click', swallow, { capture: true }), 0);
+      a.onDrop(e);
+    }
+    this._cleanupVisuals(a);
+    this._active = null;
+  }
+
+  _cancel() {
+    const a = this._active;
+    this._teardownDocListeners();
+    this._active = null;
+    if (a) this._cleanupVisuals(a);
+  }
+
+  _teardownDocListeners() {
+    const doc = this.container.ownerDocument;
+    for (const [name, fn] of this._docListeners) {
+      doc.removeEventListener(name, fn);
+    }
+    this._docListeners = [];
+  }
+
+  _cleanupVisuals(a) {
+    if (a.eventEl) {
+      a.eventEl.classList.remove('fc-dragging');
+      a.eventEl.style.transform = '';
+    }
+    this.container
+      .querySelectorAll('.fc-drop-target')
+      .forEach(el => el.classList.remove('fc-drop-target'));
+    this._selectionEl?.remove();
+    this._selectionEl = null;
+  }
+
+  // ----- month move -----
+
+  _cellAtPoint(x, y) {
+    for (const cell of this.container.querySelectorAll('.fc-month-day')) {
+      const r = cell.getBoundingClientRect();
+      if (x >= r.left && x < r.right && y >= r.top && y < r.bottom) return cell;
+    }
+    return null;
+  }
+
+  _monthDragMove(e) {
+    const a = this._active;
+    a.eventEl.style.transform = `translate(${e.clientX - a.startX}px, ${e.clientY - a.startY}px)`;
+    const cell = this._cellAtPoint(e.clientX, e.clientY);
+    if (cell !== a.dropCell) {
+      a.dropCell?.classList.remove('fc-drop-target');
+      cell?.classList.add('fc-drop-target');
+      a.dropCell = cell;
+    }
+  }
+
+  _monthDrop() {
+    const a = this._active ?? {};
+    const cell = a.dropCell;
+    if (!cell) return;
+    const event = this.stateManager.getEvents().find(ev => ev.id === a.eventId);
+    if (!event) return;
+    const oldStart = new Date(event.start);
+    const newStart = moveDatePreservingTime(new Date(cell.dataset.date), oldStart);
+    const delta = newStart.getTime() - oldStart.getTime();
+    if (delta === 0) return;
+    this.stateManager.updateEvent(a.eventId, {
+      start: newStart,
+      end: new Date(new Date(event.end).getTime() + delta)
+    });
+  }
+
+  // ----- time-grid move -----
+
+  _columnAtPoint(x) {
+    for (const col of this.container.querySelectorAll(this._columnSelector)) {
+      const r = col.getBoundingClientRect();
+      if (x >= r.left && x < r.right) return col;
+    }
+    return null;
+  }
+
+  _timeMoveDragMove(e) {
+    const a = this._active;
+    const col = this._columnAtPoint(e.clientX) || a.originColumn;
+    a.dropColumn = col;
+    a.deltaMinutes = snapMinutes((e.clientY - a.startY) / PX_PER_MINUTE);
+    const originRect = a.originColumn.getBoundingClientRect();
+    const colRect = col.getBoundingClientRect();
+    a.eventEl.style.transform = `translate(${colRect.left - originRect.left}px, ${a.deltaMinutes * PX_PER_MINUTE}px)`;
+  }
+
+  _timeMoveDrop() {
+    const a = this._active ?? {};
+    const event = this.stateManager.getEvents().find(ev => ev.id === a.eventId);
+    if (!event || (!a.deltaMinutes && a.dropColumn === a.originColumn)) return;
+
+    const oldStart = new Date(event.start);
+    const duration = new Date(event.end).getTime() - oldStart.getTime();
+    const targetDay = a.dropColumn ? new Date(a.dropColumn.dataset.date) : oldStart;
+    const dayAligned = moveDatePreservingTime(targetDay, oldStart);
+    const startMinutes = clampStartMinutes(
+      dayAligned.getHours() * 60 + dayAligned.getMinutes() + (a.deltaMinutes || 0),
+      Math.round(duration / 60000)
+    );
+    const newStart = new Date(dayAligned);
+    newStart.setHours(Math.floor(startMinutes / 60), startMinutes % 60, 0, 0);
+    if (newStart.getTime() === oldStart.getTime()) return;
+    this.stateManager.updateEvent(a.eventId, {
+      start: newStart,
+      end: new Date(newStart.getTime() + duration)
+    });
+  }
+
+  // ----- resize -----
+
+  _resizeDragMove(e) {
+    const a = this._active;
+    const deltaMinutes = snapMinutes((e.clientY - a.startY) / PX_PER_MINUTE);
+    a.newHeight = Math.max(SNAP_MINUTES, a.originHeight + deltaMinutes);
+    a.newHeight = Math.min(a.newHeight, 24 * 60 - a.originTop);
+    a.eventEl.style.height = `${a.newHeight}px`;
+  }
+
+  _resizeDrop() {
+    const a = this._active ?? {};
+    if (!a.newHeight || a.newHeight === a.originHeight) return;
+    const event = this.stateManager.getEvents().find(ev => ev.id === a.eventId);
+    if (!event) return;
+    const newEnd = new Date(new Date(event.start).getTime() + a.newHeight * 60000);
+    this.stateManager.updateEvent(a.eventId, { end: newEnd });
+  }
+
+  // ----- drag-to-create -----
+
+  _createDragMove(e) {
+    const a = this._active;
+    const colRect = a.column.getBoundingClientRect();
+    const fromY = a.startY - colRect.top;
+    const toY = e.clientY - colRect.top;
+    a.fromMinutes = snapMinutes(Math.min(fromY, toY) / PX_PER_MINUTE);
+    a.toMinutes = snapMinutes(Math.max(fromY, toY) / PX_PER_MINUTE);
+    a.fromMinutes = Math.max(0, a.fromMinutes);
+    a.toMinutes = Math.min(24 * 60, Math.max(a.toMinutes, a.fromMinutes + SNAP_MINUTES));
+
+    if (!this._selectionEl) {
+      this._selectionEl = this.container.ownerDocument.createElement('div');
+      this._selectionEl.className = 'fc-drag-selection';
+      a.column.appendChild(this._selectionEl);
+    }
+    this._selectionEl.style.top = `${a.fromMinutes * PX_PER_MINUTE}px`;
+    this._selectionEl.style.height = `${(a.toMinutes - a.fromMinutes) * PX_PER_MINUTE}px`;
+  }
+
+  _createDrop() {
+    const a = this._active ?? {};
+    if (a.fromMinutes == null) return;
+    const start = new Date(a.column.dataset.date);
+    start.setHours(Math.floor(a.fromMinutes / 60), a.fromMinutes % 60, 0, 0);
+    const end = new Date(a.column.dataset.date);
+    end.setHours(Math.floor(a.toMinutes / 60), a.toMinutes % 60, 0, 0);
+    this.container.dispatchEvent(
+      new CustomEvent('range-select', {
+        detail: { start, end },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+
+  /** Append a resize handle to every timed event (idempotent per render). */
+  _injectResizeHandles() {
+    for (const el of this.container.querySelectorAll('.fc-timed-event')) {
+      if (el.querySelector('.fc-resize-handle')) continue;
+      const handle = this.container.ownerDocument.createElement('div');
+      handle.className = 'fc-resize-handle';
+      handle.setAttribute('aria-hidden', 'true');
+      el.appendChild(handle);
+    }
+  }
+}
+
+export default DragController;

package/src/renderers/DayViewRenderer.js

@@ -5,6 +5,7 @@
  */
 
 import { BaseViewRenderer } from './BaseViewRenderer.js';
+import { DragController } from '../core/DragController.js';
 import { DateUtils } from '../utils/DateUtils.js';
 
 export class DayViewRenderer extends BaseViewRenderer {
@@ -216,6 +217,9 @@ export class DayViewRenderer extends BaseViewRenderer {
     const current = this.stateManager.getState().currentDate || new Date();
     const label = new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }).format(current);
     this._enhanceTimeGridAccessibility('.fc-day-column', label);
+
+    // Drag to move/resize events and drag empty grid to create
+    new DragController(this).enableTimeGrid('.fc-day-column');
   }
 
   _scrollToCurrentTime() {

package/src/renderers/MonthViewRenderer.js

@@ -6,6 +6,7 @@
 
 import { BaseViewRenderer } from './BaseViewRenderer.js';
 import { DateUtils } from '../utils/DateUtils.js';
+import { DragController } from '../core/DragController.js';
 
 export class MonthViewRenderer extends BaseViewRenderer {
   constructor(container, stateManager) {
@@ -228,6 +229,9 @@ export class MonthViewRenderer extends BaseViewRenderer {
 
     // Common event handlers (event clicks)
     this.attachCommonEventHandlers();
+
+    // Drag an event chip onto another day to move it
+    new DragController(this).enableMonthMove();
   }
 
   /**

package/src/renderers/WeekViewRenderer.js

@@ -6,6 +6,7 @@
 
 import { BaseViewRenderer } from './BaseViewRenderer.js';
 import { DateUtils } from '../utils/DateUtils.js';
+import { DragController } from '../core/DragController.js';
 
 export class WeekViewRenderer extends BaseViewRenderer {
   constructor(container, stateManager) {
@@ -196,6 +197,9 @@ export class WeekViewRenderer extends BaseViewRenderer {
     const first = days[0] ? new Date(days[0].date) : new Date();
     const label = `Week of ${new Intl.DateTimeFormat(locale, { month: 'long', day: 'numeric', year: 'numeric' }).format(first)}`;
     this._enhanceTimeGridAccessibility('.fc-week-day-column', label);
+
+    // Drag to move/resize events and drag empty grid to create
+    new DragController(this).enableTimeGrid('.fc-week-day-column');
   }
 
   _scrollToCurrentTime() {

package/src/utils/StyleUtils.js

@@ -2,6 +2,34 @@
  * StyleUtils - Styling utilities and theme management
  */
 
+/**
+ * Named theme presets applied via the <forcecal-main theme="..."> attribute.
+ * Each maps design tokens to a platform's visual language.
+ */
+export const THEME_PRESETS = {
+  // Salesforce Lightning Design System: looks native on the platform
+  slds: {
+    '--fc-primary-color': '#0176d3',
+    '--fc-primary-hover': '#014486',
+    '--fc-primary-light': '#eef4ff',
+    '--fc-accent-color': '#0b5cab',
+    '--fc-text-color': '#181818',
+    '--fc-text-secondary': '#706e6b',
+    '--fc-text-light': '#939393',
+    '--fc-border-color': '#e5e5e5',
+    '--fc-border-color-hover': '#c9c9c9',
+    '--fc-background': '#ffffff',
+    '--fc-background-alt': '#f3f3f3',
+    '--fc-background-hover': '#f3f3f3',
+    '--fc-background-active': '#d8e6fe',
+    '--fc-danger-color': '#ea001e',
+    '--fc-success-color': '#2e844a',
+    '--fc-border-radius': '0.25rem',
+    '--fc-border-radius-sm': '0.125rem',
+    '--fc-font-family': "'Salesforce Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  }
+};
+
 export class StyleUtils {
   /**
    * Default theme colors

package/types/components/ForceCalendar.d.ts

@@ -59,6 +59,12 @@ export declare class ForceCalendar extends BaseComponent {
     getStyles(): string;
     template(): string;
     renderView(): string;
+    /**
+     * Apply a named theme preset (e.g. theme="slds") as host-level custom
+     * properties so it cascades into the shadow DOM and stays overridable
+     * by page-level --fc-* variables.
+     */
+    _applyTheme(name: any): void;
     afterRender(): void;
     handleNavigation(event: any): void;
     handleViewChange(event: any): void;

package/types/core/DragController.d.ts

@@ -0,0 +1,56 @@
+/**
+ * DragController - pointer-driven interactions for calendar views.
+ *
+ * Implements drag-to-move (month and time grids), drag-to-resize, and
+ * drag-to-create using Pointer Events only: no HTML5 drag-and-drop (which
+ * misbehaves in shadow roots), no dependencies, Locker Service safe.
+ *
+ * Keyboard users have equivalent paths via the WAI-ARIA grid navigation
+ * (arrow keys + Enter) that every view already implements.
+ */
+/** Snap a minute offset to the grid. Exported for tests. */
+export declare function snapMinutes(minutes: any, snap?: number): number;
+/** Clamp a start minute so [start, start+duration] stays inside a day. */
+export declare function clampStartMinutes(startMinutes: any, durationMinutes: any): number;
+/**
+ * Combine a target day with an original start's time-of-day.
+ * Exported for tests.
+ */
+export declare function moveDatePreservingTime(targetDay: any, originalStart: any): Date;
+export declare class DragController {
+    renderer: any;
+    container: any;
+    stateManager: any;
+    _active: any;
+    _docListeners: any[];
+    _columnSelector: any;
+    _selectionEl: any;
+    constructor(renderer: any);
+    /** Month view: drag an event chip onto another day cell. */
+    enableMonthMove(): void;
+    /**
+     * Time grids (week/day): drag events vertically/across columns to move,
+     * drag the bottom handle to resize, drag empty grid to create.
+     */
+    enableTimeGrid(columnSelector: any): void;
+    /** Track from pointerdown; promote to a drag past the threshold. */
+    _arm(e: any, spec: any): void;
+    _onPointerMove(e: any): void;
+    _onPointerUp(e: any): void;
+    _cancel(): void;
+    _teardownDocListeners(): void;
+    _cleanupVisuals(a: any): void;
+    _cellAtPoint(x: any, y: any): any;
+    _monthDragMove(e: any): void;
+    _monthDrop(): void;
+    _columnAtPoint(x: any): any;
+    _timeMoveDragMove(e: any): void;
+    _timeMoveDrop(): void;
+    _resizeDragMove(e: any): void;
+    _resizeDrop(): void;
+    _createDragMove(e: any): void;
+    _createDrop(): void;
+    /** Append a resize handle to every timed event (idempotent per render). */
+    _injectResizeHandles(): void;
+}
+export default DragController;

package/types/utils/StyleUtils.d.ts

@@ -1,6 +1,32 @@
 /**
  * StyleUtils - Styling utilities and theme management
  */
+/**
+ * Named theme presets applied via the <forcecal-main theme="..."> attribute.
+ * Each maps design tokens to a platform's visual language.
+ */
+export declare const THEME_PRESETS: {
+    slds: {
+        '--fc-primary-color': string;
+        '--fc-primary-hover': string;
+        '--fc-primary-light': string;
+        '--fc-accent-color': string;
+        '--fc-text-color': string;
+        '--fc-text-secondary': string;
+        '--fc-text-light': string;
+        '--fc-border-color': string;
+        '--fc-border-color-hover': string;
+        '--fc-background': string;
+        '--fc-background-alt': string;
+        '--fc-background-hover': string;
+        '--fc-background-active': string;
+        '--fc-danger-color': string;
+        '--fc-success-color': string;
+        '--fc-border-radius': string;
+        '--fc-border-radius-sm': string;
+        '--fc-font-family': string;
+    };
+};
 export declare class StyleUtils {
     /**
      * Default theme colors