Git Product home page Git Product logo

react-calendar-2's Introduction

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:

Design from React calendar dev test

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


My React Calendar Dev Test

Here's what my final UI looked like.

Screenshot from React calendar dev test

Installation

yarn

yarn start // http://localhost:3000/

Comments

  • 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 classnames or styled-components but think importing the index.css works 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 createCalendarMonth in the calender-reducer using 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)

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.

react-calendar-2's People

Contributors

drydenwilliams avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.