Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geeta052/dynamic-event-calendar
A dynamic calendar application built using React. This app allows users to view their calendar in month, week, and day formats, add/edit/delete events, and manage event details such as name, time, description, and type. The events are saved in the browser's localStorage for persistence.
https://github.com/geeta052/dynamic-event-calendar
Last synced: 26 days ago
JSON representation
A dynamic calendar application built using React. This app allows users to view their calendar in month, week, and day formats, add/edit/delete events, and manage event details such as name, time, description, and type. The events are saved in the browser's localStorage for persistence.
- Host: GitHub
- URL: https://github.com/geeta052/dynamic-event-calendar
- Owner: geeta052
- Created: 2024-12-21T20:16:12.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-21T20:41:08.000Z (about 1 month ago)
- Last Synced: 2024-12-21T21:26:30.725Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://dynamic-event-calendar-zeta.vercel.app
- Size: 58.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dynamic Event Calendar App
## Features
- **Calendar View**: Displays a grid for the current month with aligned days. Navigate between months using "Previous" and "Next" buttons.
- **View Modes**: Switch between month, week, and day views to manage events.
- **Event Management**: Add, edit, and delete events with specific details (name, time, description, and type).
- **Event Type Color Coding**: Events are color-coded based on type (Work, Personal, Others).
- **Event List**: Lists all events for the selected day in a modal or side panel.
- **Persistent Storage**: Events are saved in localStorage to persist even after refreshing the page.
- **Responsive UI**: The app is responsive and works well on different screen sizes.
- **UI Design**: Developed using **shadcn** components for a clean and modern look. Highlights the current day and the selected day.
- **Complex Logic**:
- Handles month transitions (e.g., from January to February).
- Prevents overlapping events by validating time slots.
## Installation
To run the app locally:
1. Clone the repository to your local machine:
`git clone `
2. Navigate to the project directory:
`cd `
3. Install the required dependencies:
`npm install`
4. Start the development server:
`npm start`
5. Open your browser and go to `http://localhost:3000` to view the application.
## Deployment
- The app is deployed at: [Deployment Link](https://dynamic-event-calendar-zeta.vercel.app/)
- GitHub Repository: [GitHub Link](https://github.com/geeta052/Dynamic-Event-Calendar)
## Code Highlights
- Built using React functional components and hooks like `useState` and `useEffect`.
- Implements calendar logic manually without relying on external libraries.
- Features a modular, clean, and maintainable code structure.
## Screenshots
Below are some screenshots showcasing the app's features:
### Calendar View (Month)
### Add/Edit Events
