Modern Calendar Component

Responsive calendar with Alpine.js & Tailwind CSS

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

1. Inline Calendar

Simple standalone calendar component with configurable settings

💡 Toggle settings above to enable/disable past dates and change week start day

2. Date Picker (Input)

Calendar attached to input field with popup (past dates disabled)

3. Date Range Picker

Select start and end dates with unified dual month view, holidays support (USA/Canada)

4. Month & Year Navigation

Navigate through different months and years (Week starts on Monday)

5. Disabled Dates

Weekends are disabled, only weekdays selectable

Weekends (Sat & Sun) are disabled in this example

Modern Calendar Component with Alpine.js & Tailwind CSS

Responsive • Past Date Blocking • Week Start • Dual Month Range • USA/Canada Holidays

Desktop, Tablet & Mobile Friendly