PHP AJAX mysql事件日曆 - 用於跨越多天的事件的UI

我已經構建了PHP日曆系統，幾乎完成了所有工作，但不知道如何處理涉及如何在兩天內延伸的事件的UI問題。我希望能夠延伸一個延續了幾天的活動，這個活動跨越了日曆中的那些日子。基本上我想知道如何實現什麼these guys have achieved with the event that stretches out from 21st to 22nd with the yellow div background。PHP AJAX mysql事件日曆 - 用於跨越多天的事件的UI

我一直在試圖看看如何用PHP做到這一點，但我覺得我可能會嘗試錯誤的東西。也許這是用JavaScript來完成的？

來源

2009-10-22 clientbucket

真的，解釋如何做到這一點需要相當長的一段時間。我可以給你一些通用的指針，但是...

基本上，在你提供的例子中，該日曆的作者使用絕對定位的日曆覆蓋整個日曆。如果您在Firefox中打開Firebug並檢查其中一個跨度，然後在重新調整瀏覽器大小時觀察該元素，則會發現它們變黃。這是因爲在添加項目或調整頁面大小時，JavaScript會主動調整元素的大小。我試圖做一些類似的事情一段時間，並最終放棄了，由於它的複雜性和不必要的繁瑣。

我最終做的是違背了我強烈的反表心態，並在表格本身中使用<td>元素的colspan屬性。每一行事件是一個<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列）。

每個表格固定地定位到父'week'div ...第一個具有較低的z-index，這樣第二個表格（事件等等）將顯示在頂部並跨越日曆單元格邊框。

這實際上是Google用來構建Google日曆的原因。它實際上非常優雅，易於使用，並且有很少或沒有瘋狂的JavaScript來編寫。最具挑戰性的是將一個事件從一週的星期四換成另一週的星期三（因爲你必須讓的數量取決於可見的週數日曆空間）。

所以，我的建議實際上是調查Google的G-Cal表格結構，看看你能從中推斷出什麼。簡單的方法是使用Firebug從它複製整個HTML並粘貼到一個編輯器中，然後只是玩弄，直到你明白它是如何工作的。

我希望我所顯示的幫助。祝你好運。

來源

2009-10-22 17:42:31 KyleFarris

請注意：這裏的事實是日曆*是*表格數據，所以表格結構實際上使句法和語義有意義。在這裏使用它們不需要感到內疚。 – KyleFarris 2009-10-22 18:18:17

這確實指出了我正確的方向。我完成了。 – clientbucket 2009-10-26 08:55:11

基本上，我遵循你的建議，研究谷歌日曆，並使用PHP試圖模仿佈局。我沒有使用兩個表格，只使用了一個，只是使用PHP來操作tr的渲染，主要是td元素。 – clientbucket 2009-10-26 08:57:21

Google日曆通過表格解決這個問題的方式是信不信由你。它有點複雜（它們有一個表格用於日曆網格，然後疊加在頂部是另一個表格內部的事件），但基本方法將讓您爲每個日曆框使用多行，並將每行一個事件，每列。然後，當您想要延長多天的事件時，只需在表格單元格上爲該特定事件使用colspan。例如：

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

       ...

其中雙線代表實際呈現的邊界，單線代表行之間不可見的邊界。在這個例子中，每個日曆網格上有4行（所以一天最多可以有4個事件）。

您可以通過仔細呈現HTML和使用CSS來實現所有這些。

我推薦的其他東西就像邁克爾說的，學習Google日曆，但是比看代碼更好的方法是獲得Firefox（你希望已經擁有它）並安裝擴展Firebug（你也希望已經有）。然後進入Firebug菜單並選擇「Inspect element」並點擊日曆上的其中一個事件，並從那裏研究結構。

來源

2009-10-22 17:50:16

使用跨越多個「單元格」的單個div的問題是您將面臨換行符。假設一個事件從星期四到星期二持續，但是每星期（從星期一開始）將獲得它自己的行。

另一種解決方案是使用多個div，併爲事件的第一天和最後一天設置單獨的類。像...

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

當然，這個缺點是說明將被限制在第一個div。因此，兩者的結合可能效果最好;一個div從一週開始到另一個週末，第二個（也可能是第三個，等等）直到事件的結束日期。

或者，在表的情況下，你可以ofcourse結合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」類將背景設置和頂部/底部邊框，而「第一」和「最後」類將分別設置左邊界和右邊界。（默認情況下，這些將是0）。

來源

2009-10-22 18:24:44 Duroth

PHP AJAX mysql事件日曆 - 用於跨越多天的事件的UI

回答

相關問題