title: Create Day view calendar and display event in React
body: <p>I'm using React Native to create a Day view calendar like Google that display event time block.</p>
  <p>I have an array that have many object with title, start time, end time and duration. For example:</p>
  <pre><code>[
     {title: &quot;Event A&quot;, startTime: &quot;01:00:00&quot;, endTime: &quot;02:00:00&quot;,duration: &quot;60 min&quot;},
     {title: &quot;Event B&quot;, startTime: &quot;01:00:00&quot;, endTime: &quot;03:00:00&quot;,duration: &quot;120 min&quot;},
     {title: &quot;Event C&quot;, startTime: &quot;02:00:00&quot;, endTime: &quot;04:00:00&quot;,duration: &quot;120 min&quot;},
     {title: &quot;Event D&quot;, startTime: &quot;03:00:00&quot;, endTime: &quot;04:00:00&quot;,duration: &quot;60 min&quot;},
  ]
  </code></pre>
  <p>And I want it to display event like this
  <a href="https://i.stack.imgur.com/CDPRU.png" rel="nofollow noreferrer">Example calendar</a> ( I draw it with GG sheet )</p>
  <p>I have look through this library <a href="https://github.com/duyluonglc/" rel="nofollow noreferrer">https://github.com/duyluonglc/</a> but it's last updated 3 years ago. So I clone that Repo and review the code. But his code really hard for me to understand the part that he calculated number of columns and expand the event time block width.</p>
  <p>I understand that he using position absolute style to draw black line of hours, start time is for position for the block, duration and end time is for the height of block. But the part that he calculated to divide columns and width of many event block in the same hour this really complicated.</p>
  <p>If anyone understand the algorithm or have better way to calculate it, please explain it clearly so I can understand how it display. Thank you.</p>