🌈 Interactive Calendar

A modern, animated, and responsive calendar widget built with beautiful gradients, smooth transitions, and advanced user interaction features. Perfect for web projects needing a stylish, fully-featured date picker!

---

🚀 Live Demo

Try it right now: Interactive Calendar Demo

---

🆕 New Features

Navigation & Interaction:

• Month Navigation: Click arrows or use keyboard (← →) to move between months
• Today Button: Instantly jump to the current date
• Date Selection: Click any date to select it (highlighted in red)
• Cross-month Navigation: Click previous/next month dates to navigate

Visual Enhancements:

• Modern Design: Beautiful gradient backgrounds and animations
• Hover Effects: Days scale up and highlight on hover
• Theme Toggle: Switch between light and dark themes (🌙/☀️ button)
• Animated Transitions: Smooth fade-in effects when changing months
• Pulse Animation: Current day pulses to draw attention

Smart Features:

• Event System: Sample events with tooltips (hover over colored dates)
• Current Date Highlighting: Today's date is prominently shown
• Selected Date Tracking: Shows both today and selected date in footer
• Responsive Design: Works perfectly on mobile and desktop

Keyboard Shortcuts:

• ← / → : Navigate between months
• Home / Space : Go to today
• Escape : Deselect current date

Event Indicators:

• Blue: Today's date
• Red: Selected date
• Orange: Days with events
• Legend: Footer shows what each color means

User-Friendly Elements:

• Tooltips: Hover over event dates to see event details
• Status Display: Shows current date and selected date
• Smooth Animations: All interactions are animated
• Accessible: Works with keyboard navigation

---

🎨 Easy Customization

Modify colors easily by changing CSS variables:

:root {
  --primary-color:  #3498db;    /* Main blue color */
  --accent-color:   #e74c3c;    /* Selection red */
  --success-color:  #27ae60;    /* Today button green */
  --warning-color:  #f39c12;    /* Event orange */
}

---

📅 Sample Events

• October 15, 2025: Project Deadline
• October 20, 2025: Team Meeting
• October 25, 2025: Birthday Party
• November 1, 2025: Monthly Review
• November 14, 2025: Conference

---

🚀 How to Use

1. Open interactive-calendar.html in your browser
2. Click the arrows to navigate between months
3. Click Today to return to the current date
4. Click any date to select it
5. Click the 🌙 icon to toggle dark/light theme
6. Hover over orange dates to see events
7. Use keyboard shortcuts for quick navigation

---

💡 Support & Feedback

• Found a bug? Need a feature? Open an issue
• For questions or suggestions, reach out via Discussions

---

⭐️ Give a Star!

If you find this project useful or interesting, please consider giving it a ⭐️! Your support helps improve and maintain the project.

---

🤝 Contributing

Contributions are welcome! Please check the contributing guidelines (if available) or open a pull request.

---

📜 License

This project is open source. See LICENSE for details.

---