Quick Example
Selected:
📅
Multiple Types
Inline calendar, date picker, range picker, and custom variants
🔒
Date Restrictions
Block past dates, weekends, or custom date ranges
🎉
Holidays
Built-in USA & Canada holiday support with visual indicators
📱
Responsive
Optimized for all devices from mobile to desktop
Quick Installation
1. Include Dependencies
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Alpine.js -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- AlpineCalendar -->
<script src="alpinecalendar.js"></script>2. Use in Your HTML
<div x-data="calendarExample1()">
<!-- Your calendar markup -->
</div>