Skip to content

Calendar planner in React - my personal project of 2+ months

Notifications You must be signed in to change notification settings

IkigaiFumeidesu/Calendar_Planner

Repository files navigation

Calendar_Planner

This is my personal project, which I've been working on for the past 2 months. Throughout its development I've get to know many new methods and technologies via encountering problems and solving them.

YT link: (https://youtu.be/nG91dX7rXjE)

Preview: image

To see the image clearly, click on it to display it in fullscreen

What can you find in this project?

  1. Manipulation of plans
  2. Search algorithm
  3. Different displays of the Calendar
  4. Login
  5. APIs

1. Manipulation of plans

Plan Creation

User can create a plan by giving it a title (required), date, hour, colour and its description. image

Plan details and choice to cancel the plan

By clicking on the plan, the user can display its details, the user can also fluently switch between plans. image

Plans cannot overlap

If the user tries to create a plan which would overlap with an existing one, the Calendar will throw an error. image

2. Search algorithm

If the user types in first 3 letters of any word present either in the title or description of any plan, the algorithm will find it.

image

These are the results:

image

By clicking on the "show me" button, the Calendar will instantly jump to the plan's location and show it to the user:

image

3. Different displays of the Calendar

Default display is Week (as shown above)

Month display

Month counts the number of plans in a given day and displays it. image

Year display

So far, year only shows the whole year to the user. image

4. Login

If the user chooses to, they can login, though since all data is stored locally usin JSON, it is not necessary. By clicking on the login symbol pops up this form:

image

Upon successfully logging in, the user's name is stored as a cookie and it is used to validate that user is logged in, password is not stored.

5. APIs

Currently, Calendar runs 2 APIs.

First API is used to get the CountryCode of the user. For this it is using this API: (https://ipinfo.io/)

Second API is used to get the public holidays of a country based on the submitted year and CountryCode. This API runs AFTER the first one finished retrieving CountryCode. API: (https://date.nager.at/)

If both API calls are successful, the user can see public holidays displayed in week, example for CountryCode CZ, year 2024:

image

About

Calendar planner in React - my personal project of 2+ months

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published