Question

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

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

events

我想我可以用表来做这件事，但我想知道是否还有另一种方法。这是普通的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

您对表的看法听起来像是最好的选择。假设表格边框都是隐藏的，您可以根据应用程序的任何时间段大小调整，而不会让它看起来太乱。

如果他们只是需要在正确的时间大致排队，我会从一个代表15分钟的行开始。您对每个区块的:hover效果可以显示确切的时间，然后桌子可以让您通过粗略的15分钟时间段rowspan使您的事件排成一行，使其排成一行，使其具有视觉代表性。

Answer 2

我现在也是这样做的。我的解决方案是与960.gs一样 - 就像div一样。

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

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

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

现在，我开始计算每列代表的时间。我使用foreach循环每天组装：我从显示开始时间的小时开始并递增。如果事件的start_time等于增量器，我会根据我的着色标准启动一个适当样式的div。同样，如果我的结束时间＆lt; =增量器，我会停止div并在id中定义列的宽度。显然，在循环结束时，我做一个增量器++。每天重复显示。

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

表格肯定会让这更容易（版本1是表格），但如果你有耐心，它可以以任何一种方式完成。

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>

这与bedind 960grid

的想法相同

作为替代方案，您可以使用百分比从顶部开始，因此早上8点将是8％，下午6点是100％。这有点棘手，取决于可用的大小和东西，但可以解决。尚未尝试过。只是把我的想法作为另一种可能性。

Answer 4

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

使用Javascript获取日历背景的宽度：例如：800像素。
将此宽度分开以容纳30分钟的插槽24小时; 800 /（24 * 2）= 16像素
- 24 * 2（48）是24小时内有多少30分钟的插槽。
- 16像素是每30分钟有多少空间。
对于您拥有的每个事件，以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 Object Notation）表示事件。使用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分钟）。< / p>

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

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

感谢。 KJ

根据开始时间格式化事件

6 个答案: