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.
Taken from: An Example Senior React/Redux Developer Task - Developer Jobs Board
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
classnamesorstyled-componentsbut think importing theindex.cssworks perfectly well for this example. - I would have liked to have cleaned up the reducers a bit and adding
immutable-js. - Could have wrote some nice tests for the
createCalendarMonthin thecalender-reducerusing Enzyme - 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)
- 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.