AlpineCalendar

Modern, responsive calendar component built with Alpine.js & Tailwind CSS

🔒 Past dates blocking 📅 Week start customization 📱 Fully responsive 📆 Dual month range 🎉 USA & Canada holidays

Quick Example

📅

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>