neumie / nfctron-calendar Goto Github PK

This is a 7-day pre-employment assessment test project from NFCtron

live demo: link

• the application is developed in React 18

• auxiliary libraries of your own choice

• the application is written and typed in TypeScript (^4.9.0) (Couldn't find that version, so i used v^4.9.5)

• the application is at least visually optimized for desktop resolutions (> 1280px)

• the project has its own git repository

• the application is single-page

• the page contains a calendar view

• the calendar view is shiftable (forwards, backwards)

• the week starts with Monday and ends with Sunday

• the current day (if displayed) is indicated (color tinting, at your discretion)

• each day can contain 0 - n events

• events can be added and removed (in any way, e.g. via a button, by clicking on a day, at your own discretion)

• events do not need to be editable

• the event object contains the following properties:

  • title - string, required
  • from (time) - date, required
  • to (time) - date, required
  • color - string, optional

• events can be edited
• the form for adding (editing) the event is properly validated
• events can be multi-day (the display stretches over several days)
• "Today" button, which scrolls the calendar display to the current day
• the application is fully tuned for mobile resolution
• the application is deployed and available online

• Typescript
• React
• Material UI

• fine tuned for desktops, but still usable on smaller devices
• events are also stored in localStorage

• "Today" button, which scrolls to current day
• year/month selector with two arrows which shift the month forwards/backwards (monthly view)
• day selector (weekly view)
• view selector that allows you to switch from/to weekly/monthly view

• displays current selected date
• event editor which allows you to add/edit events
• event list that shows you 0 - n events for the selected day (becomes scrollable on overflow)
• event list also allows you to start editing events by clicking them (they get transferred to the event editor), or to delete events by clicking on the trash can icon

• weekly and monthy calendar view
• highlighted current day (if shown) with a bar on top of the cell
• highlighted selected day
• show's up to n events for each day (depends on the height of the device)
• if event spans for multiple days, then each day cell shows the event
• select a day by clicking on the grid (more information about the day shows on the legend)

(back to top)