CSS - Help With Formatting A Calendar

I have a style sheet which creates a calendar which is hooked up to a recordset. Like a blog calendar. My problem is on months that seem to have more data then others the calendar table pushes the page or the table therefor creating problems. Here is my CSS, is there a way to lock the table so if data population does occur it doesnt knock everything out of wack?

Thanks so much for any help you may offer.
Steve

/* CSS Document */
table#calendar {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
table#calendar caption {
font-size: 10px;
font-weight: normal;
}
table#calendar a {
text-decoration:none;
}
table#calendar tr#days th {
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
font-weight: normal;
padding: .3em 1px;
}
table#calendar tr#title th {
font-size: 10px;
background: White;
color: Black;
font-size: 10px;
border: 0px solid #224;
padding-top: 0.3em;
padding-left: 0.3px;
}
table#calendar td {
font-size: 10px;
width: 30px;
color: #000000;
text-align: right;
border: 0px solid gray;
border-color: FFFFFF;
vertical-align: top;
}
table#calendar .day7 {
border-right: 0px solid #FFFFFF;
}
table#calendar td a {
font-weight: normal;
display: block;
margin: 0;
padding: 0px;
width: 30px;
}
table#calendar th a {
font-weight: normal;
}
table#calendar a:link {color: 0000CC;}
table#calendar a:visited {color: 0000CC;}
table#calendar a:hover {
background: Silver;
}
table#calendar .day1, table#calendar .day7 {
background: White;
}
table#calendar .blank {
background: White;
border: 0px solid #;
border-right: 0px solid #99A;
}
table#calendar .lastweek td {
border-bottom: 0px solid #AAB;
}
table#calendar .today {
background-color: #A3AEB0;
border: 0px solid black;
}

Hi all.

I wonder if anybody can point me in the right direction.

I want/need to make a calendar that looks very similar to the google calendar's month view.

So, basically I need to span multi-day events over the days that they appear (mainly for readability). The calendar reads all the event information from a database, with data entry being on a different part of the site and independent of the actual calendar display. I don't need any fancy drag and drop scripts, or AJAX type things for it either.

I just want to know how I can do the same spanning effect as google calendar does. I assume it will only involve html and css (Don't see how javascript would come into the equation)

Oh, and if somebody has already posted a solution, i'm sorry for reposting, I'm not really sure what search terms to actually use for this

If you know how to do it, or can point me in the correct direction, please do so.

Thanks in advance

I have two questions related to modification of a Plans Calendar!
Are my problems my css modifications or my lack of understanding of perl? I want to make a seven day calendar into a five day calendar, displaying only Mon - Friday. The calendar can be seen at www.doldaycare.com (my kids' daycare center)

In plans/theme/style.css, i make my changes like below. The result is great for the change related to
Quote:
.day.saturday, .day.sunday {
display:none;

Saturday and Sunday only stop displaying as desired. My problem is that the words Saturday and Sunday still display such that the table cell for Monday has Sunday as a header, Tuesday has Monday as a header, etc.

This bring me to changing the other css class (correct term?) related today_names. All of the table cell properties for all days stop displaying when I try:
Quote:
:
/* td.day_names, sunday {
display:none;
} */

Instead I just want Saturday and Sunday to stop displaying. Is my css incorrect?

Here is my css as modified
Code:

td.day_names {                /* used for Sunday, Monday, etc.*/
  color:#000;
  font-weight:bold;
  font-size:small;
  font-style:italic;
  text-align:center;
  background-color:transparent;
  border-style:solid;
  border-width:0px;
  border-color: #000;
  margin:0px;
  width:14%;                /* -- modified from orginal 150px --this line makes each calendar cell at least a certain width */
}
                                                                                                                             
/* td.day_names, sunday {
  display:none;
  } */
                                                                                                                             
.day {               /* used for calendar cells*/
  background-color:#fff;
  border:solid 1px #333;
  padding:0;
  padding-left:2px;
  padding-right:2px;
  width:11%;
  font-size:small;
  font-weight:normal;
  vertical-align:top;
  height:2px;
}
                                                                                                                             
/*.day.saturday, .day.sunday {
  display:none;
  }*/

I believe that the key part of the perl.cgi related to the html display is:


Code:

    # print day names
    $return_text .=<<p1;
<table class="calendar">
<tr>
<td class="day_names">$weekday_sequence[0]</td>
<td class="day_names">$weekday_sequence[1]</td>
<td class="day_names">$weekday_sequence[2]</td>
<td class="day_names">$weekday_sequence[3]</td>
<td class="day_names">$weekday_sequence[4]</td>
<td class="day_names">$weekday_sequence[5]</td>
<td class="day_names">$weekday_sequence[6]</td>
</tr>
p1

where
@weekday_sequence = @day_names;

I know I've seen it somewhere, but I can't seem to find it anymore.

If someone could tell me of a site that has a calendar made using a CSS layout only (No tables), I'd appreciate it.

I want to see the code, because I figure it'll be a good lesson in CSS layout.

Thanks in advance.