📆 Interactive Calendar

A fast, lightweight, and responsive calendar web application built with React + Vite, featuring holiday support for India and other countries.

🔗 Live Demo: interactive-calendar-bice.vercel.app

🚀 Features

• Monthly calendar view — Clean, intuitive grid layout for any month
• Month & year navigation — Quickly jump forward and backward through time
• Today highlight — Current day is visually emphasized at a glance
• Holiday display — Shows Indian public holidays and holidays from other countries
• Interactive date selection — Click any date to select and interact with it
• Fully responsive — Works seamlessly on desktop, tablet, and mobile
• Fast & lightweight — Powered by Vite for near-instant load times

---

📸 Screenshots

---

🛠️ Tech Stack

Layer	Technology
UI	React 19
Styling	Tailwind CSS 4
Date logic	date-fns 4
Animations	Framer Motion 12
Holidays API	Calendarific (via Axios)

---

📁 Project Structure

Interactive_Calendar/
├── public/
│   ├── favicon.svg
│   └── icons.svg
├── src/
│   ├── components/
│   │   ├── Calendar.jsx        # Main calendar component
│   │   ├── DayCell.jsx         # Individual day cell
│   │   ├── Grid.jsx            # Calendar grid layout
│   │   ├── Header.jsx          # Month/year navigation
│   │   ├── HolidayPanel.jsx    # Holiday info panel
│   │   └── NotesPanel.jsx      # Notes panel
│   ├── hooks/
│   │   ├── useCalendar.js      # Calendar state logic
│   │   ├── useDateRange.js     # Date range selection
│   │   ├── useHolidays.js      # Holiday fetching
│   │   └── useLocalStorage.js  # Persistent storage
│   ├── services/
│   │   └── holidayService.js   # Calendarific API calls
│   ├── utils/
│   │   └── dateHelpers.js      # Date utility functions
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── index.html
├── vite.config.js
├── .env
├── package.json
└── .gitignore

---

⚙️ Getting Started

Prerequisites

• Node.js (v16 or higher recommended)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/Praneeth860/Interactive_Calendar.git
cd Interactive_Calendar

# Install dependencies
npm install

Running Locally

npm run dev

Open http://localhost:5173 in your browser.

🔧 Environment Variables

Create a .env file in the project root:

VITE_CALENDARIFIC_API_KEY=your_api_key_here

Get your free API key at calendarific.com.

⚠️ Never commit your .env file to version control. It is already listed in .gitignore.

---

🌍 Holiday Support

The calendar fetches public holidays via the Calendarific API, including:

• 🇮🇳 India — National and state-level public holidays
• 🌐 Other countries — International holiday data

---

🚢 Deployment

This project is deployed on Vercel. To deploy your own fork:

1. Push your code to GitHub
2. Import the repo on vercel.com
3. Add VITE_CALENDARIFIC_API_KEY in the Vercel dashboard under Environment Variables
4. Deploy!

---

🤝 Contributing

Contributions are welcome! Feel free to:

• Open an issue for bugs or feature requests
• Submit a pull request with improvements

---

Built with ❤️ by Praneeth860