php - 在日历中显示每日事件

Question

我正在使用 PHP 开发一个日历 Web 应用程序，我需要帮助来显示一天的事件。

我现在正在做的是循环遍历一天中的每个小时(从 0 到 23)，然后显示从那个时间开始的所有事件。这些事件同时具有开始时间和结束时间，在数据库中存储为 INT(时间戳)。

在日历的左侧，我显示 23 小时，在右侧，我想显示放置在正确位置的框(每个事件一个)(以便它与开始时间对齐)和高度取决于其持续时间。

目前，我将小时数显示为 120 像素高的 div，并且我将其设置为每 15 分钟的持续时间对应 30 个像素。这按预期工作。为了处理事件的相对位置，我将它们放在 position: relative 容器中的 position: absolute 中，并设置了 top 属性取决于开始时间。

这是我用来执行此操作的代码:

//Get the starting hour
$startingHour = date("H", $event->startingTime);

//Get the duration
$duration = $event->endingTime - $event->startingTime;
$duration = ceil($duration / 60); //We want minutes

//Get the multiplier for the height
$height = ($duration / 15) * 30; //30 pixels per 15 minutes                     

//Get the offset from the top, depending on the starting hour
$topOffset = $startingHour * 120;           

$style = 'style="height: ' . $height . 'px; top: ' . $topOffset . 'px;"';

然后，当我为事件创建 div 时，我会echo $style 变量。

这按预期工作，但感觉不对。如果我稍后更改设计，每个 block 现在是 35 像素怎么办？我必须在多个地方更改我的代码以确保它仍然对齐。

我尝试使用表格，这似乎更适合类似的事情，但当我希望某些事件持续超过一个小时时，它会更加困惑。例如，从 3h00 开始的 1h45 事件将填满整个 3h00 block ，以及 4h00 block 的 3/4。

TL : DR 我正在尝试找到将事件显示为具有相对高度和位置的框的最佳方式，具体取决于事件的持续时间和开始时间。为了使代码易于维护，而不是像现在这样一团糟，最好的方法是什么？

这是我想要实现的图像 - 基本上是上面发布的代码输出的图像。我想要类似的输出，但以更语义化和更适当的方式。

Answer 1

您没有在 div 上使用数据属性或 CSS 类是有原因的吗？我不会使用内联样式，因为就像你说的:如果需要更改设计，则必须更改 php 代码。始终尝试从应用程序的逻辑中抽象出您的表示逻辑。

在我看来，您有两个选择:选项1:在div上使用数据属性，并使用属性的值通过javascript计算它们对应的位置和高度。所以我会像 f.e. 一样将数据属性附加到 div。数据=“sh1030-eh1330”。然后我将使用 javascript 读取开始时间和结束时间值，计算高度并定位 div。您可以选择百分比或像素。选项 2:为 div 的高度和垂直位置附加一个 css 类名。 F.e.类=“时隙drtu7 sh1330”然后为所有可能的值编写足够的 css 类。 F.e. .drtu7{height:175px} .sh1230 {top: 600px}这意味着您需要编写相当多的 css 规则，但也只需要在设计需要更改时更改 css 代码，因为您将能够重用“持续时间单元”(在本例中为 1 个“持续时间单元”是 1 刻钟和 25 像素的高度)和“开始时间”CSS 类重新定义“时间段”div 的高度和位置。