Tier2 solo project : eCalendar

This project is the front-end part of an appointment managing app created with the react library.

This project was bootstrapped with Create React App.

Link : https://chingu-solo.github.io/solo-koala-195/

Dependecies

• React
• React-DOM
• React-Scripts
• uniqid
• react-fontawesome
• formik
• Yup

Installation

Clone

• Clone this repo to your local machine using git clone https://github.com/Chingu-Solo/solo-koala-195.git
• cd into solo-koala-195

Install

• Run yarn install | npm install

Start

• Run yarn start | npm start

Open http://localhost:3000 to view it in the browser.

Requirements

Structure

• Page divided into calendar potion and event list portion

• Calendar portion to have:

  • Title and Current year in header
  • Current month between previous and upcoming month
  • Calendar dates of the month with display of previous month’s last dates if first day of current month does not start on a Sunday
  • Arrows bordering the body of the calendar

• Event portion to have

  • Current day of the week displayed
  • Current month and date (numerical) displayed
  • List of Events with corresponding date of month divided by a vertical bar
  • Add event button at bottom

• At least 3 demo events in the event panel portion of the project

• A modal form activated via button click that floats above the content

Styling:

• Styles should be reminiscent of the demo versions. Feel free to use artistic licencse as long as the functionality doesn't suffer

Functionality

Upon Load:

• Calendar will display correct layout of the current month with the weeks starting on Sunday
• Displays last days of previous month and/or first days of next month as buffers when needed; set apart with styling
• Set the current date apart from the others (in the demo above it is bolded)

Scrolling:

• Your calendar must scroll backwards and forwards accurately

Modal Form:

• This form is used to add new events to to the calendar. It is displayed when the user clicks the add icon in appointment panel
• Be able to close form without submission and have form close on submission of event information
• Have modal displayed as shown in images below
• Have at least the event name and dates as required, the other fields shown are optional
• Is hidden when not in use

Other:

• Your repo needs to have a robust README.md
• Make sure that there are no errors in the developer console before submitting

Extras (Not Required)

• Make your design fully responsive (small/large/portrait/landscape, etc.)
• Optimized loading of calendar site (hint, consider the background image)
• Change the background image based on the season in which the current displayed month is part of

🚀 Deploy

Deployed using Github Pages service and npm package gh-pages.

🧝‍♂️ Author

• Github: @yassin