- For styling i have used materialize CSS .
- To fetch data i had created mock API using https://mockapi.io/ and stored all the given JSON in that API.
- For calendar i have added react-calendar-timeline as dependency.
###Project Website Link
I tried to keep code simple , i created three components
- UserData -Fetched data by calling API to get data and passed as props
- Modal - Implemented using materialize
- Calendar - Finally I formated the data as per Calendar UI and inserted in Calendar UI object to get start time and end time inside calendar.
Note : Calendar UI is little tricky by default it will be there in present date to view active hours please scroll the calendar .
If your facing difficulty go through the below npm https://www.npmjs.com/package/react-calendar-timeline