Coder Social home page Coder Social logo

weeklycalendar's Introduction

Project Title

Week View Calendar Challenge

Challenge Description

Create a week view calendar for mobile devices. The view should show a 5-day week on portrait, and 7-day week on landscape orientation. Only client side code is necessary. Add at least two events to the calendar. The calendar should be able to read data asynchronously (e.g. XHR, WebSQL, etc.)

Constraints Allowed technologies

Any or a mix of: React Native, JavaScript, HTML5, CSS3, Objective C, media queries

Thought process

  1. Create a something similar to excel.
  2. Since it should scroll vertically, and hide extra columns. Use rows!
  3. Lets make each row, represent 1 hr.
  4. Create a row with cells, that can take in child components.
  5. Create tasks as child compoents at Row level and pass that into cells that require it.
  6. Can we used Virtualizedlist here. Yes.. however did not use it. Read Learnings to know more.

Tests that ran

I ran, manual test. Since thats what i know.

  1. By changing startDay, to see if calendar is working as expected.
  2. Adding events that over lap, to see if all events are displayed.
  3. If an event is created, with end time before start time. It is not displayed.
  4. If an event is added to hiden date, it will be shown on rotation

Test that failed

  1. If event is less than 1 hr. it does not display
  2. When startDay is set to 0, vertical view does not show sunday.

Learnings

There were lots of learings

  1. Not to use multiple flatlist inside a single component.
  2. Creating muliple cells layout using virtualized list, can create similar results. However i feel that,
    1. This leads to a more complex code.
    2. Can trigger more updates, while during rotation. Had issues with the same.
  3. Write lots of comments discribing each helper function.
  4. Make code readable.

What i would like improve

  1. Move all of the in line styles to css.
  2. Write test.
  3. My writing skills.

Built With

"moment": "^2.21.0",
"react": "16.2.0",
"react-native": "0.53.3"

Moment.js was used, this was to make handling time easier.

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

weeklycalendar's People

Contributors

nagad814 avatar

Watchers

 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.