SHARE
TWEET

Untitled

a guest Dec 11th, 2019 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ## The problem
  2.  
  3. The problem consists in rendering events on a calendar, avoiding overlapping events to visually overlap.
  4. Your implementation should meet the two following constraints:
  5.  
  6. * Every overlapping event should have the same width as every event it overlaps
  7. * Every event should use the maximum width available
  8.  
  9. A visual illustration of the problem is given below.
  10.  
  11. Rendering events on a calendar means here: the relative position of events to the top of the screen and their height is a function of the height of the screen, the start/end time of the calendar, and the start time/duration of the events. For example: if the calendar goes from 00:00 to 24:00 and the screen is 2400px high, an event starting at 12:00 and lasting 1h would be positioned at 1200px of the top of the screen and have a height of 100px.
  12.  
  13. ## The input
  14.  
  15. The input (available below) is an array of events occurring on the same date. They have the following structure:
  16.  
  17. ```javascript
  18. {
  19.   id: 1,
  20.   start: '15:00', // The event starts at 03:00 pm
  21.   duration: 90 // The duration is expressed in minutes
  22. }
  23. ```
  24.  
  25. ## The output
  26.  
  27. Your code should render the events on a webpage in a container spanning the whole window.
  28. The top of the page represents 09:00 am. The bottom of the page represents 09:00 pm.
  29.  
  30. The events should be represented as a `div` with a background color and a 1px border. The `div` should display the event's `id`.
  31.  
  32. Your implementation should be responsive (i.e. respond to window `resize` events).
  33.  
  34. ## Dependencies
  35.  
  36. You may use React, any lightweight templating library, or vanilla JS to do the rendering. You may use helper libraries such as lodash, etc. if you wish to. Javascript can be written in ES6.
  37.  
  38. The easiest way to share your code is a [sandbox](https://codesandbox.io/). If you wish to go with React, you may share a project created with [create-react-app](https://github.com/facebook/create-react-app), preferably on github.
  39.  
  40. ## Browser support
  41.  
  42. Your code should run in major modern browsers.
  43.  
  44. ## Evaluation
  45.  
  46. Our evaluation criteria are:
  47.  
  48. * the correctness of the algorithm
  49. * the readability of the code (code structure, variables naming, comments,…)
  50.  
  51. ## Visual illustration of the problem
  52.  
  53. **1 event**
  54.  
  55. ```
  56. ┌────────────┐
  57. |            |
  58. └────────────┘
  59. ```
  60.  
  61. **2 events**
  62.  
  63. ```
  64. ┌─────┐┌─────┐
  65. |     |└─────┘
  66. └─────┘
  67. ```
  68.  
  69. **3 events where events 1, 2 and 3 overlap, but events 1 and 3 do not**
  70.  
  71. ```
  72. ┌─────┐
  73. |  1  |┌─────┐
  74. └─────┘|     |
  75.        |  2  |
  76. ┌─────┐|     |
  77. |  3  |└─────┘
  78. └─────┘
  79. ```
  80.  
  81. The configuration above meets all constraints. Be careful, something like below would not meet constraint 2 :
  82.  
  83. ```
  84. ┌───┐
  85. | 1 |┌───┐
  86. └───┘|   |
  87.      | 2 |
  88.      |   |┌───┐
  89.      └───┘| 3 |
  90.           └───┘
  91. ```
  92.  
  93. **If we combine cases 1, 2 and 3, you should end up with something like**
  94.  
  95. *The schema below assumes the width of event 1 equals the width of the window.*
  96.  
  97. ```
  98. ┌────────────┐
  99. |     1      |
  100. └────────────┘
  101.  
  102. ┌─────┐┌─────┐
  103. |     ||  3  |
  104. |  2  |└─────┘
  105. |     |
  106. └─────┘
  107.  
  108. ┌─────┐
  109. |  4  |┌─────┐
  110. └─────┘|     |
  111.        |  5  |
  112. ┌─────┐|     |
  113. |  6  |└─────┘
  114. └─────┘
  115. ```
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top