根据开始时间格式化事件

Question

仍在我的计划/日历应用程序上工作.我差不多完成了,我有一些更难的部分工作,但我陷入了一个更困难的部分.我想根据他们的开始时间在网格中显示我的事件.

它没有显示在这张照片中,但假装有一个列在25日左边有几小时(早上8点到晚上11点左右).如果一个事件开始于...比如说,下午1点,我希望它显示在页面中间的某个位置.如果活动在上午8:30开始,则应在上午8点至9点之间显示.

我想我可以用桌子来做这件事,但我想知道是否有另一种方式.这是普通的html/css,也许是一些Javascript？有关实现这一目标的最佳方法的任何建议吗？如果我使用表格,我仍然不确定最好的方法是什么.每30分钟一个细胞？我可以从我的视图访问每个事件的开始和结束时间.事件数组(在此示例中为第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/array中读出事件的方式.这是我必须显示事件的代码,如我的截图所示,不介意我的复杂数组:

        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 中定义列的宽度。显然，在循环结束时，我执行了一个增量++。每天重复您显示的内容。

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

表格肯定会让这一切变得更容易（版本 1 是表格），但如果你有耐心，这两种方法都可以完成。