根据开始时间设置事件格式

仍在处理我的计划程序/日历应用程序。我几乎完成了，我得到了一些更难的部分，但我被困在一个更困难的部分。我想根据事件的开始时间在网格中显示我的事件。

它没有显示在这张照片中，但假设在25日左侧有一列，上面有小时（上午8点至晚上11点左右）。如果事件开始于..比如说，下午1点，我希望它显示在页面中间的某个地方。如果活动在上午 8：30 开始，则应在上午 8 点到上午 9 点之间显示。

我想我可以用桌子来做这件事，但我想知道是否有另一种方法。这对于普通的html / css，也许是一些Javascript来说可行吗？关于实现这一目标的最佳方法的任何建议？如果我使用表格，我仍然不确定执行此操作的最佳方法是什么。每三十分钟一个牢房？从我的视图中，我可以访问每个事件的开始和结束时间。事件数组（在此示例中为第 25 个）如下所示：

Array

[1] => Array
    (
        [title] => Ethiek
        [description] => Ethiek: Opdracht 1
        [time_start] => 11:30:00
        [time_end] => 12:00:00
    )

[2] => Array
    (
        [title] => Project Management
        [description] => Test: Project Management
        [time_start] => 15:00:00
        [time_end] => 16:00:00
    )

[event_count] => 2

感谢您给我的任何建议。多谢！

编辑：开始了赏金，因为我仍然卡住了，我会很感激一些反馈。

更新：

我一直在为此而崩溃，老实说，我无法找出最好的方法来做到这一点。首先，我认为我陷入困境的原因是我从db/数组中读出事件的方式。这是我必须显示的事件的代码，如我的屏幕截图所示，不要介意我的复杂数组：

        foreach($details[0] as $key => $detail)
    {
        echo "<div class='grid'>";
        $header = "<p class='detail_header'>";
        $header .= ucfirst($dates[0][$key]['name']) . ", " . $key . " " . $init['curr_month_name'];
        $header .= "<img src='" . base_url() . "assets/images/create_event.png' alt='Plan iets'></p>";

        echo $header;

        for($i = 1; $i <= $details[0][$key]['event_count']; $i++)
        {
            echo "<div class='event " . $details[0][$key][$i]['type'] . "'>";
                echo "<p class='event_title'>" . $details[0][$key][$i]['title'] . "</p>";
                echo $details[0][$key][$i]['description'];
            echo "</div>";
        }
        echo "</div>";  

    }

这有点混乱，更不用说我下次有相同的代码来修复一些异常。但更重要的是..我觉得这些循环不允许我对它进行很多修改。我尝试为AM和PM添加两个div，这样我就可以在中午之前和下午的块中拆分事件，然后只显示事件上的时间（以避免必须使用15分钟的一千个块）。但是，是的..这并没有奏效，因为如果下午有多个事件，它会放置几个“PM”div。

我很想让它保持原样，只在事件divs中显示开始/结束时间。直到我找到一种更好的方法来从数组中读取它们并显示它们。

任何帮助/建议都值得赞赏。谢谢。