在日历中显示每日事件

Question

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

我现在正在做的是循环一天中的每个小时（从0到23）然后显示当时开始的任何事件。事件具有startingTime和endingTime，在数据库中存储为INT（时间戳）。

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

目前，我将小时数显示为120px高div，并且我将其设置为每15分钟持续时间对应30个像素。这是按预期工作的。为了处理事件的相对位置，我将它们放在position: absolute容器中的position: relative中，并根据开始时间设置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;"';

我稍后echo $style变量，当我为该事件制作div时。

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

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

TL：DR 我正在尝试找到将事件显示为具有相对高度和位置的框的最佳方式，具体取决于其持续时间和开始时间。为了保持代码易于维护，最好的方法是什么，而不是现在的大意大利面乱？

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

Answer 1

你有没有在div上使用数据属性或CSS类的原因？我不会使用内联样式，因为就像你说：如果需要更改设计，你将不得不改变你的PHP代码。总是试图从应用程序的逻辑中抽象出你的表达逻辑。

从我的观点来看，你有两个选择： 选项1：在div上使用数据属性，并使用属性值通过javascript计算其对应的位置和高度。所以我会将数据属性附加到div，如f.e.数据=＆＃34; sh1030-eh1330＆＃34 ;.然后我会用javascript来读取起始小时和结束小时值，计算高度并定位div。您可以选择百分比或像素。 选项2：为div的高度和垂直位置附加一个css类名。 F.E. class =＆＃34; timeslot drtu7 sh1330＆＃34; 然后为所有可能的值编写足够的css类。 F.E. .drtu7 {height：175px} .sh1230 {top：600px} 这意味着您需要编写相当多的CSS规则，但也只需要在设计需要更改时更改css代码，因为您将能够重用＆＃34; duration unit＆＃34; （在这个例子中，1＆＃34;持续时间单位＆＃34;是1/4小时，高度为25px）和'＃34;开始时间＆＃34; css类重新定义高度位置＆＃34;时间段＆＃34;的div。