Lightweight, animated, fully customizable JavaScript calendar collection. No dependencies, no frameworks – just pure vanilla JS magic.
Each calendar is crafted for specific use cases, featuring smooth animations, dark mode support, and extensive customization options.
Full-featured calendar with month/week/day views, event dots, color tags, and smooth transitions.
View Demo →Date range selection with pricing, disabled dates, and visual feedback. Perfect for reservations.
View Demo →Compact, clean design for forms and dashboards. Keyboard accessible with dark mode support.
View Demo →Vertical timeline with events grouped by time. Expandable sections and sticky headers.
View Demo →Full 12-month overview with holiday highlights, color coding, and print-friendly layout.
View Demo →Select multiple individual dates with visual chips. Perfect for availability pickers.
View Demo →Select entire weeks at once with week numbers. Great for weekly scheduling.
View Demo →Date and time selection combined. 12/24 hour formats with minute stepping.
View Demo →Ultra-compact floating calendar widget. Perfect for toolbars and sidebars.
View Demo →Week view with time slots. Click & drag to create events. Full scheduling power.
View Demo →One-time purchase • Lifetime updates
Built with modern standards and best practices for seamless integration into any project.
Under 30KB minified. No bloat, just pure functionality.
CSS variables, themes, and extensive configuration options.
Works perfectly on desktop, tablet, and mobile devices.
Keyboard navigation and screen reader support built-in.
Get up and running in under 5 minutes
<!-- Include CSS -->
<link rel="stylesheet" href="dist/calendopro.min.css">
<!-- Include JS -->
<script src="dist/calendopro.min.js"></script>
<!-- Create Container -->
<div id="my-calendar"></div>
<!-- Initialize -->
<script>
new CalendoPro.Classic('#my-calendar', {
theme: 'light',
startDay: 'monday',
events: [
{ date: '2025-01-15', title: 'Meeting', color: '#6366f1' }
]
});
</script>