Production-ready Web Components that work with any framework.
<forcecal-main view="month" locale="en-US" />Accessible by default: every view implements the WAI-ARIA grid pattern with full keyboard navigation, roving focus, and screen-reader labels.
<forcecal-main>Complete calendar with month, week, and day views. Load data through the events property or setEvents(). The primary component for most use cases.
<forcecal-event-form>Event creation and editing form with validation. Dispatches custom events on submit.
Use the Web Component directly, or install the first-party SSR-safe @forcecalendar/react and @forcecalendar/vue adapters.
// npm install @forcecalendar/react
import { ForceCalendar } from '@forcecalendar/react';
function App() {
return (
<ForceCalendar
view="month"
locale="en-US"
timezone="America/New_York"
onDateSelect={({ date }) => console.log(date)}
/>
);
}
// SSR-safe: works in Next.js with no workarounds--fc-primary-color--fc-primary-hover--fc-primary-light--fc-accent-color--fc-background--fc-background-alt--fc-background-hover--fc-background-active--fc-text-color--fc-text-secondary--fc-text-light--fc-border-color--fc-border-color-hover--fc-border-width--fc-border-radius--fc-border-radius-sm--fc-border-radius-lg--fc-border-radius-full--fc-font-family--fc-font-size-base--fc-font-size-xs--fc-font-size-sm--fc-font-size-lg--fc-font-size-xl--fc-font-weight-normal--fc-font-weight-medium--fc-font-weight-semibold--fc-font-weight-bold--fc-line-height--fc-spacing-xs--fc-spacing-sm--fc-spacing-md--fc-spacing-lg--fc-spacing-xl--fc-danger-color--fc-success-color--fc-shadow--fc-shadow-sm--fc-shadow-md--fc-shadow-lg--fc-transition--fc-transition-fast--fc-transition-slow--fc-z-dropdown--fc-z-modal--fc-z-tooltipforcecal-main {
--fc-primary-color: #2563eb;
--fc-background: #ffffff;
--fc-background-alt: #f8fafc;
--fc-border-color: #e2e8f0;
--fc-text-color: #0f172a;
--fc-text-secondary: #64748b;
--fc-font-family: 'Inter', system-ui;
--fc-border-radius: 0.375rem;
--fc-background-hover: #f1f5f9;
--fc-accent-color: #1e40af;
}| Attribute | Type | Default | Description |
|---|---|---|---|
view | string | "month" | Calendar view: month, week, day |
date | string | today | Initial date the calendar displays |
locale | string | "en-US" | BCP 47 locale tag |
timezone | string | local | IANA timezone identifier |
week-starts-on | string | "0" | 0 = Sunday, 1 = Monday, 6 = Saturday |
height | string | "800px" | Calendar height (any CSS length) |
theme | string | none | Named preset, e.g. "slds" for Salesforce Lightning styling |
| Event | Detail | Description |
|---|---|---|
calendar-date-select | { date } | Fired when a date cell is selected |
calendar-view-change | { view } | Fired when the view changes |
calendar-navigate | { action, date } | Fired on next/previous/today/goto navigation |
calendar-event-add | { event } | Fired when an event is added (also -update, -remove) |
calendar-events-set | { events, added, updated, removed, unchanged } | Fired once per events / setEvents() snapshot with the reconciled change set |
calendar-range-change | { start, end, view, date } | Fired after first render and whenever the visible date window changes; getVisibleRange() reads it on demand |