根据开始时间格式化事件

Question

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

这张图片中没有显示，但假设 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

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

编辑：开始对此进行赏金，因为我仍然陷入困境，我希望得到一些反馈。

更新：

我一直在为此绞尽脑汁，老实说我不知道​​最好的方法。首先，我认为我陷入困境的原因是我从数据库/数组读取事件的方式。这是我必须显示屏幕截图中所示事件的代码，不要介意我的复杂数组：

        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，这样我就可以将事件分成中午之前和下午的块，然后只显示事件的时间（以避免必须处理 1000 个 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 是表格），但如果你有耐心，这两种方法都可以完成。

Answer 2

你关于桌子的想法听起来是最好的选择。假设表格边框全部隐藏，您可以选择应用程序指定的任何时隙大小，而不会使其看起来太混乱。

如果他们只需要在正确的时间大致排队，我就会从代表 15 分钟的一行开始。您在每个块上的 :hover 效果可以显示准确的时间，然后表格就在那里，让您可以在大约 15 分钟的时间段内行跨度您的事件，使其保持一致足够高以使其在视觉上具有代表性。

Answer 3

您可以采用 CSS 方法和日历条目的绝对定位。然后，您需要为每个时间段提供一个 css 类。只是为了提供一些指导：

.timeslot_0 {
 position: absolute;
 top: 0px;
}
.timeslot_1 {
 position: absolute;
 top: 50px;
}
.timeslot_2 {
 position: absolute;
 top: 100px;
}

<div id="calendar">
   <div class="day">
     <div class="entry timeslot_0>Schedule Enty</div>
     <div class="entry timeslot_2>Schedule Enty</div>
   </day>
   <div class="day">
     <div class="entry timeslot_1>Schedule Enty</div>
   </day>
   <div class="day"></day>
   <div class="day"></day>
   <div class="day"></day>
</div>

与 960grid 的想法相同

这 顶部位置的百分比，因此上午 8 点为 8%，下午 6 点为 100%。根据可用的大小和内容，这有点棘手，但可以解决。还没试过。只是让我想到了另一种可能性。

Answer 4

我建议不要使用表格，而是使用 Javascript 和 CSS。

1. 使用Javascript获取日历背景的宽度：例如：800像素。
2. 分割此宽度以容纳 24 小时内的 30 分钟时段； 800 / (24 * 2) = 16 像素
   • 24 * 2 (48) 是 24 小时内有多少个 30 分钟的时段。
   • 16 像素是每 30 分钟有多少空间。
3. 对于每个事件，以 30 分钟为单位获取其开始时间，并将其乘以 16 像素以获得其从左侧开始的位置。
   • 对于在 2:30 开始的事件（5x 30 分钟块），距左侧 5 * 16 = 80 像素
   • 对于 12:00 开始的事件（24x 30 分钟块），距左侧 24 * 16 = 384 像素
   • 对于在 14:30 开始的事件（29x 30 分钟块），距左侧 29 * 16 = 464 像素

我建议实现此目的的最简单方法是使用 jQuery 的功能；

var usableWidth = $('div.calendar').width();

eventsCollection.each(function(singleEvent) {
    $(singleEvent).width = (getStartTimeInMinutes(singleEvent) / 30) * (24 * 2); 

});

为此，您需要用 JSON（Javascript 对象表示法）表示事件。使用 php，使用 json_encode() 很容易做到这一点。

这种方法一开始可能有点难以理解，但它可以使您的标记 (HTML) 保持非常干净，并且适用于任何尺寸的屏幕。最重要的是，由于您的事件将表示为 Javascript 对象，因此它为您提供了一个创建真正丰富的 Ajax 应用程序的非常好的起点。

Answer 5

很高兴听到你正在取得进步。
在我看来，表格仍然是最好的解决方案。想一想：
- 您可以设置宽度、高度等样式，以类似网格的方式设置它们，这就是您想要的。
- 你确切地知道结构，所以运行表格是简单的循环代码

，对我来说最重要的是：
- 表格提供可访问性。由于屏幕阅读器可以为有视力障碍的观看者以有意义的方式解释表格，因此当内容通过行和列变得有意义时，表格特别有用，这正是您所拥有的。

顺便说一句，完成后请为我们输入正在运行的版本的 URL。

Answer 6

哟。我一直在寻找我必须构建的网站的日历模块的类似问题。我将其放在 C# 中，因此代码并不真正适合您的完整答案，但我查看数据的方式可能会有所帮助。

现在表格相当困难，所以请原谅它的粗糙性：P

-------------------------------------------------------------------------------------------
                 hrs | mins |total mins|        
day start time | 10  |  0   |600       |running time in mins        
day end time   | 23  | 30   |1410      |810     
item start time| 13  |  0   |780       |running time | distance to cover | starting point
item end time  | 16  | 40   |1000      |220          | 27.16%            | 180
-------------------------------------------------------------------------------------------

如果你会看上面的内容。我有一天有开始时间或结束时间。这可以转换为您需要的任何时间格式 周月 无论如何。重点是，您可以查看所有项目并找到最早开始日期和最晚结束时间，计算 100% 的活动距离（对我来说是 810 分钟）。

从这里您可以计算个人甚至需要覆盖的%点
（单个事件运行时间/总事件运行时间 * 100）。这将是绘制单个项目的距离。

并给该项目一个起点（这也应该是一个百分比），但事件一的起点是 180 分钟（总事件开始时间 - 项目事件开始时间）

谢谢。
凯杰