Skip to content

This is a dynamic Calendar App built using React that allows users to manage their schedules effectively. The app includes the following features: Month Navigation: Navigate between months seamlessly. Event Creation: Add events for specific days with a customizable time and description. Event Editing and Deletion: Modify or remove events as needed

Notifications You must be signed in to change notification settings

ayan-ali-khan/Dynamic-Calendar-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Calendar App with Event Management

Overview

This is a dynamic Calendar App built using React. The app allows users to view a calendar, add events, edit them, and delete them. It features an intuitive interface and effective event management functionality.


Video of App in Running Status

https://youtu.be/YGB4juO5F-U


Features

  • Month Navigation: Easily switch between months using navigation buttons.
  • Event Creation: Add events for specific days, including time and description.
  • Event Editing: Modify the details of existing events.
  • Event Deletion: Remove events with a simple action.
  • Real-Time Validation: Event descriptions are limited to 60 characters, and events can only be created for the current or future dates.
  • Interactive UI: Highlights the current day and displays events in chronological order.

Technologies Used

  • Frontend Framework: React
  • State Management: React Hooks (useState)
  • CSS: For styling and layout

Prerequisites

Before running the app locally, ensure you have the following installed:

  • Node.js (v14 or later)
  • npm (v6 or later) or yarn

Instructions to Run the App Locally

  1. Clone the Repository:

    git clone https://github.com/your-username/calendar-app.git
    cd calendar-app
  2. Install Dependencies: Run the following command to install the required npm packages:

    npm install

    Or, if you use yarn:

    yarn install
  3. Start the Development Server: Use the command below to start the app in development mode:

    npm start

    Or with yarn:

    yarn start
  4. Open the App: Once the development server starts, open your browser and navigate to:

    http://localhost:3000
    
  5. Enjoy the Calendar App!


Future Enhancements

  • Add support for recurring events.
  • Enable event search and filtering by date.
  • Improve accessibility and mobile responsiveness.

Contributing

If you'd like to contribute to this project, feel free to fork the repository and submit a pull request with your changes!


License

This project is open-source and available under the MIT License.

About

This is a dynamic Calendar App built using React that allows users to manage their schedules effectively. The app includes the following features: Month Navigation: Navigate between months seamlessly. Event Creation: Add events for specific days with a customizable time and description. Event Editing and Deletion: Modify or remove events as needed

Resources

Contributing

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published