Live Calendar Demo
A fully functional calendar powered by @forcecalendar/core. Try switching views, navigating dates, and experiencing the performance.
How It Works
Clean separation between computation and presentation
Interface Features
Enterprise-grade components with modern capabilities
Web Components
Built with standard Web Components. Works with any framework or vanilla JavaScript. Shadow DOM isolation prevents style conflicts.
Multiple Views
Month, Week, Day, and Agenda views. Smooth transitions and consistent navigation. Each view optimized for its purpose.
Powered by Core
Uses @forcecalendar/core for all calendar logic. Spatial indexing ensures instant rendering even with thousands of events.
Enterprise Design
Clean, professional interface optimized for business use. High data density without sacrificing clarity.
Accessibility
ARIA compliant. Keyboard navigation. Screen reader support. Built for everyone to use.
Customizable
CSS custom properties for theming. Event system for integration. Extend or modify as needed.
Quick Start
Get up and running in minutes
HTML
<!DOCTYPE html>
<html>
<head>
<script type="module">
import '@forcecalendar/interface';
</script>
</head>
<body>
<force-calendar-view></force-calendar-view>
</body>
</html>
React
import '@forcecalendar/interface';
function CalendarApp() {
return (
<div>
<force-calendar-view></force-calendar-view>
</div>
);
}
Vue
<template>
<force-calendar-view></force-calendar-view>
</template>
<script>
import '@forcecalendar/interface';
export default {
name: 'CalendarApp'
}
</script>
JavaScript API
const calendar = document.querySelector('force-calendar-view');
// Add an event
calendar.addEvent({
title: 'Team Meeting',
start: new Date('2025-01-15T10:00:00'),
end: new Date('2025-01-15T11:00:00')
});
// Change view
calendar.setView('week');
// Navigate to date
calendar.goToDate(new Date());
Why Web Components?
The right technology for enterprise calendar interfaces
Framework Agnostic
Works with React, Vue, Angular, or vanilla JavaScript. No need to maintain separate components for each framework. One component, everywhere.
Enterprise Compatible
Works in Salesforce Lightning Web Components. Compatible with SharePoint. No conflicts with existing enterprise systems.
Future Proof
Web standards, not framework trends. Your calendar components will work for years without rewrites.
True Encapsulation
Shadow DOM provides real style isolation. No CSS conflicts. No global namespace pollution. Clean and contained.
Ready to Build Better Calendars?
Combine the power of forceCalendar Core with beautiful Interface components. Built for enterprise. Ready for production.