Make calendar day view events fill up the correctly sized slots

Summary: Ref T4393, Make calendar day view events fill up the correctly sized slots. (not handling overlapping slots)

Test Plan: Create an event 4:30-5:30am. Day view should correctly reflect when event happens.

Reviewers: epriestley, #blessed_reviewers, chad

Reviewed By: epriestley, #blessed_reviewers

Subscribers: Korvin, epriestley

Maniphest Tasks: T4393

Differential Revision: https://secure.phabricator.com/D12700

resources/celerity/map.php

@@ -119,7 +119,7 @@ return array(
     'rsrc/css/layout/phabricator-hovercard-view.css' => '44394670',
     'rsrc/css/layout/phabricator-side-menu-view.css' => 'c1db9e9c',
     'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
-    'rsrc/css/phui/calendar/phui-calendar-day.css' => 'a4df5b72',
+    'rsrc/css/phui/calendar/phui-calendar-day.css' => '75b8cc4a',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1d0ca59',
     'rsrc/css/phui/calendar/phui-calendar-month.css' => 'a92e47d2',
     'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
@@ -780,7 +780,7 @@ return array(
     'phui-box-css' => '7b3a2eed',
     'phui-button-css' => 'de610129',
     'phui-calendar-css' => '8675968e',
-    'phui-calendar-day-css' => 'a4df5b72',
+    'phui-calendar-day-css' => '75b8cc4a',
     'phui-calendar-list-css' => 'c1d0ca59',
     'phui-calendar-month-css' => 'a92e47d2',
     'phui-crumbs-view-css' => '594d719e',

src/view/phui/calendar/PHUICalendarDayView.php

@@ -40,6 +40,7 @@ final class PHUICalendarDayView extends AphrontView {
       $hour_start = $hour->format('U');
       $hour_end = id(clone $hour)->modify('+1 hour')->format('U');
       foreach ($this->events as $event) {
+        // check if start date is in hour slot
         if ($event->getEpochStart() >= $hour_start
           && $event->getEpochStart() < $hour_end) {
           $events[] = $event;
@@ -49,10 +50,25 @@ final class PHUICalendarDayView extends AphrontView {
       $count_events = count($events);
       $event_boxes = array();
       $n = 0;
+      // draw all events that start in this hour
+      // all times as epochs
       foreach ($events as $event) {
+        $event_start = $event->getEpochStart();
+        $event_end = $event->getEpochEnd();
+
         $offset = (($n / $count_events) * 100).'%';
         $width = ((1 / $count_events) * 100).'%';
-        $event_boxes[] = $this->drawEvent($event, $offset, $width);
+        $top = ((($event_start - $hour_start) / ($hour_end - $hour_start))
+          * 100).'%';
+        $height = ((($event_end - $event_start) / ($hour_end - $hour_start))
+          * 100).'%';
+
+        $event_boxes[] = $this->drawEvent(
+          $event,
+          $offset,
+          $width,
+          $top,
+          $height);
         $n++;
       }
 
@@ -87,7 +103,9 @@ final class PHUICalendarDayView extends AphrontView {
   private function drawEvent(
     AphrontCalendarDayEventView $event,
     $offset,
-    $width) {
+    $width,
+    $top,
+    $height) {
     $name = phutil_tag(
       'a',
       array(
@@ -100,7 +118,11 @@ final class PHUICalendarDayView extends AphrontView {
       'div',
       array(
         'class' => 'phui-calendar-day-event',
-        'style' => 'left: '.$offset.'; width: '.$width.';',
+        'style' => 'left: '.$offset
+          .'; width: '.$width
+          .'; top: '.$top
+          .'; height: '.$height
+          .';',
       ),
       $name);
 

webroot/rsrc/css/phui/calendar/phui-calendar-day.css

@@ -32,13 +32,14 @@
   position: absolute;
   top: 0;
   bottom: 0;
+  min-height: 30px;
 }
 
 .phui-calendar-day-event-link {
   padding: 8px;
   border: 1px solid {$blueborder};
   background-color: {$bluebackground};
-  margin: 4px;
+  margin: 0 4px;
   position: absolute;
   left: 0;
   right: 0;