Question

我已经构建了一个PHP日历系统，并且已经完成了所有工作但不确定如何处理涉及如何在几天内延伸的事件的UI问题。我希望能够在一个跨越日历的那个日子里延伸一个延伸了几天的事件。基本上我想知道如何实现these guys have achieved with the event that stretches out from 21st to 22nd with the yellow div background。

我一直在试图看看如何用PHP做到这一点，但我觉得我可能会尝试错误的东西。也许这是用javascript完成的？

Answer 1

真的，解释如何做到这一点需要相当长的时间。我可以给你一些一般的指示，但是......

基本上，在您提供的示例中，该日历的作者使用了覆盖在日历上的绝对定位的div。如果您在Firefox中打开Firebug并在其中一个跨度中“检查元素”，然后在重新调整浏览器大小时观察该元素，您会发现它们变黄了。这是因为JavaScript在添加项目或重新调整页面大小时会主动调整元素的大小。我尝试做了类似的事情一段时间，并最终放弃了，因为它的复杂性和不必要的麻烦。

我最终做的是反对我强烈的反表心态，并在表格中使用colspan元素的<td>属性。每行事件都是<tr>，每个事件都是<td>。由于<td>可以使用colspan属性跨越多个“列”。

所以，要把它分解......

日历是<div>。每周是另一个包含两个表的100％-width <div>：

第一个表格只包含单元格边框，以显示日历。
第二个包含日期编号，事件等......

在第二个表中，第一行有7列（每周一天为1）。所有第三行仅具有显示其事件所需的行数。因此，一周只有1个事件，例如，星期四，跨越2天（从周四到周五）将有6列：

那一行会是这样的：

<tr>
    <td class="no-event"></td> <!-- Sunday -->
    <td class="no-event"></td> <!-- Monday -->
    <td class="no-event"></td> <!-- Tuesday -->
    <td class="no-event"></td> <!-- Wednesday -->
    <td class="no-event" colspan="2">  <!-- Thursday through Friday -->
        <div class="some-styling-class">Vacation to Orlando!</div>
    </td>
    <td class="no-event"></td> <!-- Saturday -->
</tr>

请注意，只有6列...（因为colspan="2"的事件占用2列值。）

每个表都固定地定位到父'周'div ...第一个表具有较低的z-index，以便第二个表（事件等...）将显示在顶部并跨越日历细胞边界。

这实际上是Google用于构建Google日历的内容。它实际上非常优雅，易于使用，并且几乎没有疯狂的javascript写。最具挑战性的事情是将一个事件从例如周四的一周发送到另一周的周三（因为你必须使 n 的colspans数量<td>取决于在可见日历空间中的周数。）

所以，我的建议实际上是调查Google的G-Cal表格结构，看看你可以从中推断出什么。简单的方法是使用Firebug从中复制整个HTML并将其粘贴到编辑器中然后只是玩弄它直到你理解它是如何工作的。

我希望我展示的内容有所帮助。祝你好运。

Answer 2

谷歌日历解决这个问题的方式是，无论信不信，通过表格。它有点复杂（它们有一个用于日历网格的表，然后叠加在顶部是另一个用于内部事件的表），但基本方法将让你为每个日历框使用多行，并且每行放一个事件，每列。然后，当您想要在多天内拉伸事件时，您只需在表格单元格上使用colspan来处理该特定事件。像这样：

===============================
||   Monday   ||   Tuesday   ||
===============================
||   Evt 1    ||    Evt 2    ||    ...
-------------------------------
||   Evt 3 (colspan=2)       ||
-------------------------------
||            ||             ||
-------------------------------    ...
||            ||             ||
===============================
||   Monday   ||   Tuesday   ||
===============================

              ...

其中双线表示实际渲染的边框，单线表示行之间的不可见边框。在此示例中，每个日历网格有4行（因此一天最多可以有4个事件）。

通过仔细呈现HTML和使用CSS，您可以从PHP实现所有这些。

我推荐的其他东西就像迈克尔所说，研究谷歌日历，但比查看代码更好的方法是获得Firefox（你希望已经拥有它）并安装扩展Firebug（你也希望已经有）。然后转到Firebug菜单并选择“Inspect element”并单击日历上的其中一个事件，并从那里开始研究结构。

Answer 3

使用跨越多个“单元格”的单个div的问题是，您将遇到换行符。比如，一个事件从周四持续到周二，但是每周（从星期一开始）都会有自己的行。

另一种解决方案是使用多个div，并为事件的第一天和最后几天设置单独的类。有点像...

<div class="event01 first">(text)</div>
<div class="event01"></div> <!-- repeat -->
<div class="event01 last"></div>

当然，这方面的缺点是描述将仅限于第一个div。因此，两者的结合可能效果最好;一个div从一周开始到一周结束，另一个div（可能是第三个等）直到事件的结束日期。

或者，就表格而言，你可以将Tekahera的答案结合起来：

<td class="event01 first last">1-day event</td>

<td class="event01 first">Multi-day event</td>
<td class="event01"></td>
<td class="event01 last"></td>

在两个示例中，“event01”类将设置背景和顶部/底部边框，而“first”和“last”类将分别设置左边框和右边框。（默认情况下，这些将为0）。

PHP AJAX mysql事件日历 - 跨越多天的事件的UI

3 个答案: