UI Components

@forcecalendar/interface

Production-ready Web Components that work with any framework.

Try Playground →

Live Preview

<forcecal-main view="month" locale="en-US" />

Components

<forcecal-main>

Complete calendar with month, week, and day views. The primary component for most use cases.

<forcecal-event-form>

Event creation and editing form with validation. Dispatches custom events on submit.

Works with any framework

Web Components are framework-agnostic by design.

App.jsx

import '@forcecalendar/interface';

function App() {
  return (
    <forcecal-main
      view="month"
      locale="en-US"
      timezone="America/New_York"
    />
  );
}

Theming

Complete visual control through CSS custom properties.

Available tokens (36)

--fc-primary-color--fc-primary-hover--fc-background--fc-background-alt--fc-background-hover--fc-text-color--fc-text-secondary--fc-text-light--fc-border-color--fc-border-radius--fc-font-family--fc-font-size--fc-header-bg--fc-header-color--fc-today-bg--fc-today-color--fc-selected-bg--fc-selected-color--fc-event-bg--fc-event-color--fc-event-border--fc-danger-color--fc-success-color--fc-warning-color--fc-shadow--fc-shadow-lg--fc-transition-speed--fc-z-index-dropdown--fc-z-index-modal--fc-cell-height--fc-cell-min-width--fc-header-height--fc-sidebar-width--fc-scrollbar-width--fc-scrollbar-color--fc-scrollbar-track

styles.cssCSS

forcecal-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-today-bg: #eff6ff;
  --fc-today-color: #2563eb;
  --fc-event-bg: #dbeafe;
  --fc-event-color: #1e40af;
}

Attributes & events

Attributes

Attribute	Type	Default	Description
`view`	string	`"month"`	Calendar view: month, week, day
`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
`theme`	string	`"light"`	Built-in theme: light or dark

Events

Event	Detail	Description
`event-click`	`{ event }`	Fired when an event is clicked
`date-select`	`{ date, view }`	Fired when a date cell is selected
`view-change`	`{ view }`	Fired when the view changes
`navigate`	`{ date, direction }`	Fired on calendar navigation

Ready to build?

Playground Documentation GitHub