根据开始时间格式化事件

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

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

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

更新：

我一直在为此烦恼，老实说，我想不出最好的方法来做到这一点。首先，我认为我被卡住的原因是我从 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

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

如果他们只需要在正确的时间大致排队，我会从代表 15 分钟的行开始。您在每个区块上的:hover 效果可以显示确切的时间，然后表格就在那里，让您可以通过大约 15 分钟的时间段来rowspan 您的事件，以使其排列得足以具有视觉代表性。

Answer 2

您可以使用 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 3

我现在实际上也在这样做。我的解决方案是使用960.gs-like div。

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

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

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

现在，我开始计算每列代表多少时间。我每天都使用 foreach 循环进行组装：我从显示开始时间的小时开始并递增。如果事件的 start_time 等于增量器，我会根据我的着色标准启动一个样式适当的 div。同样，如果我的结束时间

我的概念是按时间为每周类型的日历执行此操作。但总体思路可以很容易地修改为月式日历，甚至是日历。

表格确实让这更容易（第 1 版是表格），但如果您有耐心，这两种方法都可以。

Answer 4

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

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

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

Answer 5

我建议不要使用表格，而是使用 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 6

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

现在桌子很硬，所以请原谅这里的粗鲁：P

-------------------------------------------------- ----------------------------------------- 小时 |分钟 |总分钟| 一天开始时间 | 10 | 0 |600 |以分钟为单位的运行时间 一天结束时间 | 23 | 30 |1410 |810 项目开始时间| 13 | 0 |780 |运行时间 |覆盖距离 |初始点 项目结束时间 | 16 | 40 |1000 |220 | 27.16% | 180 -------------------------------------------------- -----------------------------------------

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

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

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

谢谢。 千焦