Calender TODO link -- https://calender-six-sable.vercel.app/
A fully functional Dynamic Event Calendar Application built with React.js and Vite. The app allows users to manage events, navigate between months, and provides a clean, modern UI for an excellent user experience.
-
Calendar View:
- Displays a grid-based calendar for the current month.
- Allows navigation between months using "Previous" and "Next" buttons.
- Highlights the current day and selected day.
-
Event Management:
- Add events by clicking on a day.
- Edit or delete existing events.
- Each event includes:
- Event Name
- Start Time and End Time
- Optional Description
-
Event List:
- Displays a list of events for a selected day in a modal.
-
Data Persistence:
- Saves events to localStorage, ensuring they persist between browser sessions.
-
Conflict Management:
- Prevents overlapping events (e.g., two events at the same time).
-
Event Filtering:
- Allows users to filter events by keywords.
-
Event Counts:
- Displays the number of events as badges on each calendar day.
-
Responsive Design:
- Fully optimized for both desktop and mobile devices.
-
Modern UI:
- Styled with a clean, user-friendly design.
-
Optional Enhancements:
- Drag-and-drop functionality for rescheduling events.
- Export events as JSON or CSV.
- React.js: For building UI components.
- Vite: For fast development and optimized builds.
- LocalStorage: For persisting data.
- CSS: For custom styling.
-
Prerequisites:
- Install Node.js (latest LTS version recommended).
-
Clone the Repository:
git clone <repository-url> cd <repository-folder>