Skip to content

A modern, feature-rich calendar application built with React, TypeScript, and shadcn/ui components. This app enables users to seamlessly manage events, view them in an intuitive calendar interface, and enjoy persistent data storage.

Notifications You must be signed in to change notification settings

DevmanMikey/Calenderly

Repository files navigation

🌟 React Calendar App with Event Management 🌟

A modern, feature-rich calendar application built with React, TypeScript, and shadcn/ui components. This app enables users to seamlessly manage events, view them in an intuitive calendar interface, and enjoy persistent data storage.

✨ Features

📅 Calendar View

  • 🗓️ Monthly calendar grid with properly aligned days.
  • ⏪⏩ Month navigation with Previous/Next buttons.
  • 🚦 Visual distinction between weekdays and weekends.
  • 📍 Highlighting of the current day and selected day.

🎯 Event Management

  • Click-to-add event functionality.
  • ✏️ Comprehensive event editing and 🗑️ deletion.
  • 🏷️ Event properties include:
    • 📝 Event name
    • 🕒 Start and end times
    • 🖋️ Optional description
    • 🎨 Color coding (work, personal, other, etc.)
  • ❌ Prevention of event overlaps.
  • 📦 Drag-and-drop rescheduling of events.

🔍 Event List & Filtering

  • 📜 Side panel display of events for the selected day.
  • 🔑 Keyword-based filtering of events.
  • 📤 Export events to JSON/CSV formats.

💾 Data Persistence

  • 🛠️ Local storage implementation for event data.
  • 🔄 Persistent data across page refreshes.

🛠️ Tech Stack

  • ⚛️ React with TypeScript
  • 🛋️ shadcn/ui for rich UI components
  • 📂 Local Storage for data persistence
  • 🎨 TailwindCSS for styling

🚀 Getting Started

  1. Clone the repository:
git clone https://github.com/traveller318/Calender.git  
  1. Install dependencies:
npm install  
  1. Run the development server:
npm run dev  
  1. Open 🌐 http://localhost:5173 in your browser

🌍 Deployment

🔗 Live Application: Calenderly

Enjoy the seamless event management experience! 🎉

About

A modern, feature-rich calendar application built with React, TypeScript, and shadcn/ui components. This app enables users to seamlessly manage events, view them in an intuitive calendar interface, and enjoy persistent data storage.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published