React/Redux Developer Task - React Calender with Reminders
The aim of this exercise is to create a demo calendar application using React & Redux. You should take no more than 1h30m to complete this task.
You should start by rendering a single month view of a calendar for the current month - along the lines of the below illustration:
Once this is rendered, please implement as many of the following requirements as time allows:
- Ability to add a new “reminder” (max 30 chars) for a user entered day and time.
- Display reminders on the calendar view in the correct time order.
- Allow the user to select a colour when creating a reminder and display it appropriately.
- Properly handle overflow when multiple reminders appear on the same date.
- Ability to edit reminders – including changing text, day and time & colour.
- Ability to delete reminders.
- Expand the calendar to support more than current month.
My React Calendar Dev Test
Here's what my final UI looked like.
yarn yarn start // http://localhost:3000/
- It would have been nice to have more time on this, it was very rushed for the time limit.
- The styling is just CSS. I could have added something like
styled-componentsbut think importing the
index.cssworks perfectly well for this example.
- I would have liked to have cleaned up the reducers a bit and adding
- Could have wrote some nice tests for the
- I've gone back through and commented much of the code to help show logic for others. (please don't comment about code should be clear enough just to read without comments)
Bugs and Todo's
- It doesn't work for December because the weeksIndex is higher than the first of Jan
- If a day of the next month is shown on the current month. And you enter a reminder for that. Then navigate to the next month. The reminder will not show. I have not merged the reminders for this.
Subscribe to React.js Examples
Get the latest posts delivered right to your inbox