Production-ready Web Components that work with any framework. Built on the forceCalendar core engine for maximum flexibility.
Main calendar component with full functionality. Includes navigation, view switching, and event management.
Month view component with event display, day selection, and responsive grid layout.
Week view with hourly grid, all-day events section, and time-based event positioning.
Day view with detailed hourly breakdown, current time indicator, and event stacking.
Event creation and editing form with validation, recurring event configuration, and reminders.
Search component with filtering, sorting, and advanced query capabilities.
import '@forcecalendar/interface';
function App() {
return (
<force-calendar
view="month"
date="2024-01-15"
locale="en-US"
/>
);
}<template>
<force-calendar
view="month"
:date="currentDate"
locale="en-US"
/>
</template>
<script setup>
import '@forcecalendar/interface';
const currentDate = ref('2024-01-15');
</script>import '@forcecalendar/interface';
@Component({
template: `
<force-calendar
view="month"
[date]="currentDate"
locale="en-US">
</force-calendar>
`
})
export class CalendarComponent {
currentDate = '2024-01-15';
}<template>
<force-calendar
view={view}
date={currentDate}
locale="en-US"
onselect={handleSelect}>
</force-calendar>
</template>CSS custom properties for complete styling control
WCAG 2.1 AA compliant with ARIA labels
Mobile-first design that works on all devices
RTL support and full localization