Gerçekten, bunu nasıl açıklamak oldukça bir süre alacaktı. Ancak, bazı genel işaretçiler verebilir ...

Temelde, sağlanan örnekte, kullanılan takvim yazarları takvim üzerinde karşıladığı divs kesinlikle yer. Eğer Firefox kundakçı açmak ve açıklıklı birini 'elemanı incelemek', ve sonra tarayıcı boyutlarını yeniden olarak elemanı izlemek, onlar sararmaya fark edeceksiniz. JavaScript aktif öğeler eklenmiş veya sayfa olduğunda yeniden ölçekli olan elemanlarını yeniden boyutlandırma olmasıdır. Ben bir süre için buna benzer bir şey yapmaya çalıştım ve sonunda nedeniyle karmaşıklığı ve gereksiz cumbersomeness kadar verdi.

Ne sonunda yaptım benim güçlü anti-masa zihniyete karşı gitmek ve tablonun kendisini <td> elemanlarının colspan özniteliği kullanılır. Olayların her satırı bir <tr> ve her olay bir <td> olduğunu. <td> s colspan niteliğini kullanarak birden "sütun" yayılabilir beri.

Yani, onu yıkmak için ...

Takvim <div> olduğunu. : Her hafta başka bir% 100 genişlik <div> iki tablo içerir olduğunu

1. İlk tablo sadece takvim görünüm vermek için, hücre sınırları içerir.
2. İkinci gün sayıları, olayları, vs içeriyor ..

Ikinci tabloda, ilk satır (haftanın her günü için 1) 7 sütun vardır. Tüm üçüncül satırlar sadece olayları göstermek için gerekli satır numarası var. Bu nedenle, sadece (.. Perş-Cuma) 2 gün yayılan Perşembe, diyelim ki, 1 olay var bir haftada 6 sütun olurdu:

Bu satır gibi bir şey olurdu:

<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>

(Ile olay colspan="2" değerinde 2 sütun kaplıyor beri) sadece 6 sütun vardır ... nasıl fark.

Her tablo 'hafta' ebeveyne sabit div konumlandırılmış ... ikinci tablo (olaylar, vs ..) takvim hücresi sınırları üzerinde üst ve yayılma görünecektir böylece ilk alt bir z-index vardır.

Bu, Google, Google Takvim oluşturmak için kullandığı aslında ne olduğunu. Bu aslında oldukça zarif ile çalışmak kolay ve az-hiç yok yazmak için deli javascript. En zor şey colspans ve n numarası <td> 's yapmak zorunda beri (bir hafta on Çarşamba, diyelim ki, bir hafta Perşembe, diyelim ki, bir olay sarılmasıdır Görünür bir takvim boşlukta yayılmış hafta) miktarına bağlı olarak değişebilir.

Yani, benim önerim aslında Google'ın G-Cal tablo yapısını araştırmak ve bu çıkarım ne görmek olacaktır. Nasıl çalıştığını anlamak kadar kolay yolu sadece Firebug kullanarak gelen tüm HTML kopyalayıp bir editör ve çevresinde sonra sadece oyuncak yapıştırın etmektir.

Ben ne gösterdiğim yardımcı olur umarım. İyi şanslar dostum.

Google Takvim bu sorunu çözer yolu tablolar aracılığıyla, ister inanın ister inanmayın, olduğunu. (Onlar takvim ızgara için bir tablo var, ve daha sonra içeride olaylar için başka bir tablo üstüne üst üste) biraz daha sofistike, ama temel yaklaşım, her takvim kutusu için birden fazla satır kullanmak var, ve satır başına bir olay koyacağız , kolon başına. Eğer birden fazla gün içinde olayı uzatmak istiyorsanız o zaman, sadece bu özel olay için tablo hücresine colspan kullanın. Böyle bir şey:

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

              ...

Çift çizgiler aslında işlemek sınırları temsil ve tek satır satır arasındaki görünmez sınırları temsil etmektedir. Bu örnekte, takvim kılavuzunda başına 4 satır olurdu (yani bir gün içinde 4 olayların maksimum olabilir).

Sen PHP CSS HTML ve kullanım dikkatli render alarak tüm bu elde edebilirsiniz.

Michael dediği gibi ben tavsiye ederim başka bir şey, çalışma Google Takvim, ancak kod bakarak çok daha iyi bir yol Firefox olsun (umarım zaten var) ve uzantısı Firebug (siz de umarım zaten var) yüklemek olacaktır. Sonra Firebug menüsüne gidin ve "eleman kontrol edin" ve takvim üzerinde olaylardan birine tıklayın, ve orada gelen yapısını incelemek seçin.

Birden fazla 'hücre' kapsayan tek bir div kullanarak sorun, satır sonları ile karşı karşıya olacak olmasıdır. Bir olay Salı kadar Perşembe sürer, ama (Pazartesi başlayarak) her hafta kendi satır alacak, söyleyin.

Alternatif bir çözüm birden divs kullanmak olacaktır, ve bir olayın ilk ve son gün için ayrı bir sınıf ayarı olacaktır. Gibi bir şey ...

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

Tabii, bu olumsuz açıklama ilk div sınırlı olacağını olacaktır. Bu nedenle, ikisinin bir kombinasyonunu muhtemelen en iyisi; etkinliğin bitiş tarihine kadar bir hafta sonu için baştan uzanan div ve bir ikinci (ve muhtemelen üçüncü, vb.)

Veya, tablolar durumunda, tabii Tekahera cevabını birleştirmek olabilir:

<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>

"Ilk" ve "son" sınıflar sağ ve sol sınır set olur ise her iki örnekte de, "event01" class sırasıyla, arka ve alt / üst sınırları koyacaktır. (Varsayılan olarak, bu 0 olacaktır).