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

我已经构建了一个PHP日历系统，几乎完成了所有工作，但不确定如何处理UI问题，其中涉及到事件在几天内的发展情况。我希望能够在一个div中扩展一个事件，该div跨越日历中的这几天。基本上我想知道如何实现什么

---

我一直在尝试如何使用PHP来实现它，但我觉得我可能尝试了错误的事情。也许这是通过javascript实现的

真的，要解释如何做到这一点需要相当长的时间。不过，我可以给你一些一般性的建议

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

我最终所做的是违背我强烈的反表心理，在表本身中使用

元素的

colspan

属性。每行事件都是一个

，每个事件都是一个

。因为

s可以使用

colspan

属性跨越多个“列”

所以，要打破它

日历是一个

。每周还有一个100%宽度的

，包含两个表格：

第一个表仅包含单元格边框，以提供日历外观

第二个包含日期、事件等

在第二个表中，第一行有7列（一周中的每一天1列）。所有第三行仅具有显示其事件所需的行数。因此，一周只有一个事件，比如说，星期四，跨越两天（从星期四到星期五），将有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列内容）

每个表固定在父“周”分区上。。。第一个表具有较低的z索引，因此第二个表（事件等）将显示在顶部并跨越日历单元格边框

这实际上是谷歌用来构建谷歌日历的东西。它实际上非常优雅，易于使用，而且几乎没有疯狂的javascript可供编写。最具挑战性的事情是将一个活动从一周的星期四包装到另一周的星期三（因为您必须根据可见日历空间中跨越的周数制作n个colspan

）

所以，我的建议实际上是调查谷歌的G-Cal表结构，看看你能从中推断出什么。简单的方法是使用Firebug从中复制整个HTML，并将其粘贴到编辑器中，然后在了解它的工作原理之前一直玩转

---

我希望我所展示的能有所帮助。祝你好运，伙计。

谷歌日历解决这个问题的方法是，信不信由你，通过表格。它有点复杂（它们有一个用于日历网格的表，然后叠加在顶部的是另一个用于内部事件的表），但基本方法是为每个日历框使用多行，每行、每列放置一个事件。然后，当您想将事件延长几天时，只需在该特定事件的表单元格中使用colspan即可。大概是这样的：

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

              ...

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

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

---

我还想推荐一些东西，比如Michael所说的，研究Google日历，但是比查看代码更好的方法是获取Firefox（希望您已经拥有了它）并安装Firebug扩展（希望您也已经拥有了）。然后进入Firebug菜单，选择“Inspect element”并单击日历上的一个事件，然后从那里开始研究结构。

使用跨越多个“单元格”的单个div的问题是，您将面临换行。比如说，一个活动从周四持续到周二，但每周（从周一开始）都会有自己的一排

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

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

（文本）

当然，这样做的缺点是描述将局限于第一个div。因此，两个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>

1天事件
多日活动

---

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

请注意：这里的事实是日历是表格数据，因此表格结构实际上具有语法和语义意义。在这里使用它们不必感到内疚。这真的为我指明了正确的方向。基本上我听从了你的建议，研究了谷歌日历，并使用PHP试图模仿它的布局。我用的不是两张桌子，而是一张桌子