php - 根据开始时间格式化事件

Question

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

这张照片中没有显示，但假装在 25 号左侧有一列时间(上午 8 点至晚上 11 点左右)。如果一个事件开始于……比如说，下午 1 点，我希望它显示在页面中间的某个地方。如果事件在上午 8:30 开始，则它应该在上午 8 点到 9 点之间显示。

我想我可以用表格做到这一点，但我想知道是否有其他方法。这是否可以使用纯 html/css，也许是一些 Javascript？关于实现此目标的最佳方法有什么建议吗？如果我使用表格，我仍然不确定最好的方法是什么。每三十分钟一个细胞？我可以从我的 View 中访问每个事件的开始和结束时间。事件数组(在本例中为第 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

我很感激你能给我的任何建议。非常感谢!

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

更新:

我一直为此伤脑筋，老实说，我想不出最好的方法。首先，我认为我被卡住的原因是我从数据库/数组中读出我的事件的方式。这是我必须显示屏幕截图中所见事件的代码，不要介意我的复杂数组:

        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。

我很想暂时保留它，只在事件 div 中显示开始/结束时间。直到我找到更好的方法从数组中读取它们并显示它们。

感谢任何帮助/建议。谢谢。

Answer 1

其实我现在也在做这个。我的解决方案是使用 960.gs -像div。

首先，我定义了一系列常量:显示开始时间、显示结束时间、每小时列数、总列数。就我的应用而言，这些变量可由用户配置。

其次，我查询了一系列我需要处理的事件。其中包括开始时间和结束时间，以及我要显示的详细信息。我将使用 jQuery QTip弹出悬停的详细信息，因此填充这些的数据也包含在此查询中。

现在，960.gs 概念。网格的基础是知道您有 X 空间来显示您的内容……960 是 960 像素。我的更习惯，但这提供了概念。您可以将其除以相当多的数字，这将成为如何拆分网格的基础。使用这种方法，我可以轻松地定义从 grid_1 到 grid_4 的列，并且它的宽度将占总宽度的相应百分比(即在 16 列布局上执行 4 列 div 将覆盖 25％)它是交叉的浏览器兼容，并且不需要明显数量的清晰 div。您只需将数字相加以匹配您要使用的列数。

现在，我开始计算每一列代表多少时间。我每天使用 foreach 循环进行汇总:我从显示开始时间的小时开始并递增。如果事件的 start_time 等于增量器，我将启动一个根据我的着色标准适当设置样式的 div。同样，如果我的结束时间 <= 增量器，我将停止 div 并在 id 中定义列的宽度。显然，在循环结束时，我执行了一个 incrementer++。每天重复显示。

我的想法是在每周类型的日历的时间基础上执行此操作。但总体思路可以很容易地修改为月历甚至日历。

表格确实使这更容易(第 1 版是表格)，但如果您有耐心，可以用任何一种方式完成。