Creare un calendario in stile Google Calendar

[luk3s]

Ciao, volevo proporvi un problema a cui non riesco a trovare soluzione. Sto cercando di creare un calendario, il codice html è il seguente.

<div id="container">

<div id="daysRow">
<div class="dayCell"></div>
<div class="dayCell"></div>
<div class="dayCell"></div> 
<div class="dayCell"></div>
<div class="dayCell"></div>
<div class="dayCell"></div> 
<div class="dayCell"></div> 
</div>

<div class="monthRow">
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
</div>

<div class="monthRow">
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
</div>

<div class="monthRow">
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
</div>

<div class="monthRow">
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
</div>

<div class="monthRow">
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
</div>

<div class="monthRow">
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
<div class="monthCell"></div>
</div>

</div>

Il codice Css utilizzato è il seguente:

.monthCell, .dayCell{background-color: #A2B8AC; border: 1px solid #000000; float:left; min-width:1px; text-align:center; width:14%;}
.monthRow, #dayRow{clear:both; height:0px;}

Quello che ottengo è una tabella 7x7 che tramite javascript riempirò con in dati corretti (prima riga i nomi dei giorni, le rimanenti i giorni della settimana del mese precedente, corrente e successivo, come nei normali calendari, tipo quello di windows o di google calendar).

Ecco il mio problema: quando ridimensiono la pagina vorrei che i 7 div di ogni riga non andassero a capo ridimensionandosi fino alla dimensione minima, stesso concetto per l'altezza. In pratica vorrei che succedesse come in google calendar, ridimensionato la finestra altezza e larghezza si ridimensionassero per manetere il layout originale. Spero di essermi spiegato (se qualcuno ha un account google può vedere direttamente cosa intendo). Aspetto una vostra risposta, grazie anticipatamente!

[luk3s]

up

[Mich_]

Penso che dovresti "giocare" con i min-width da applicare sia alla tabella completa, che alle singole celle.
probabilmetne ciascuna cella dovrabbe avere un
min-width: 3em;
mentre per la tabella e le varie righe potrebba andare bene qualcosa come:
min-width: 22em;
(grosso modo 7x la larghezza della cella + qualcosa)

[luk3s]

Non riesco ad ottenere nulla anche "giocando" con min-weight, forse sto sbagliando qualcosa.

Per farmi capire meglio ho fatto un paio di screenshot prima e dopo il ridimensionamento della pagina di google calendar, vorrei riuscire ad ottenere il risultato della seconda immagine usando solo i css. Qualcuno sa come darmi una mano?

Prima




Dopo

[luk3s]

up