Interface Package Overview

Architecture

@forcecalendar/interface provides a Web Components layer that consumes @forcecalendar/core. All components use Shadow DOM (mode 'open') for style encapsulation.

interface/src/
├── components/
│   └── ForceCalendar.js     Main <forcecal-main> Web Component
├── core/
│   ├── BaseComponent.js     Foundation for all components
│   └── EventBus.js          Cross-component communication
├── renderers/
│   ├── MonthViewRenderer.js  Month grid renderer
│   ├── WeekViewRenderer.js   Week timeline renderer
│   └── DayViewRenderer.js    Day timeline renderer
└── utils/
    ├── StyleUtils.js         CSS custom property theming
    ├── DateUtils.js          Date formatting helpers
    └── DOMUtils.js           DOM manipulation utilities

Component Hierarchy

The main entry point is the <forcecal-main> custom element (ForceCalendar class). It:

1. Extends BaseComponent for lifecycle management
2. Creates a StateManager, which wraps a Calendar instance from @forcecalendar/core
3. Delegates rendering to view-specific renderers (Month, Week, Day)
4. Emits CustomEvents for external integration
5. Uses EventBus for internal cross-component communication

Custom Element Registration

Importing the package automatically registers the custom element:

import '@forcecalendar/interface';
// <forcecal-main> is now available

Named imports from the same entry point also run custom-element registration:

import { ForceCalendar, BaseComponent, EventBus } from '@forcecalendar/interface';

Exports

Current interaction contract

Interface 1.9 includes snapshots, visible-range callbacks, details/edit/delete dialogs, read-only interaction, recurring-event guards and explicit lifecycle cleanup. See Web Components for the supported methods and limitations. The grid uses browser-local dates; the timezone attribute is not arbitrary-zone rendering. Salesforce requires LWS.