CSS calendar Module layout

[factor1]

Does anyone have good examples of a clean CSS driven calendar module?

I am using the calendar module, and the one example of the CSS layout, but its messy, and cumbersome when you have a handful of events.

Is there any sample CSS files for this module out there? Or even examples of cleanly done calendars?

[RonnyK]

I've got one on www.ruimzicht.eu (calendar shows in the left sidebar) but there no entries in the future. If you want to see an entry and the behaviour, post the reply and I'll put in a test-entry.

Ronny

[factor1]

Wow ronny, thats great. That is exactly what I wanted it to do. I went to some past events to see how an event worked.

Is it possible to see your CSS for that? Is it just CSS or is CSS & Modifying the calendar output?

[Milhaus]

You can see my styling of calendar here. I especially tried to make it able display more events on one day - thats why events look like lists. If you want to use it, here is code:

Code: Select all

/* make all links red */


/* highlight "today" for the small calendar */
.calendar-today
{
font-weight: bold;
}

/* display the "upcominglist" as one line per entry (assuming table_id='cal-upcominglist') */
#cal-upcominglist .calendar-date-title
,#cal-upcominglist .calendar-summary-title
{
display: none;
}

#cal-upcominglist h2
,#cal-upcominglist .calendar-date
,#cal-upcominglist .calendar-summary
{
display: inline;
margin-right: 5px;
}

/* tidy up text sizes for lists */
#cal-list h1, #cal-upcominglist h1
{
color: red;
font-size: 120%;
}
#cal-list h2, cal-upcominglist h2
{
font-size: 110%;
}

/** large calendar rules (assuming table_id='big') **/
/* border on for #big */
#big{
margin-bottom: 10px;
border-collapse:    collapse;
border: 2px solid #999966;
}

/* nice squares for the #big table */
#big th
{
border: 1px solid #999966;
padding: 3px;
width: 75px;
}

#big td {
border: 1px solid #999966;
vertical-align: top;
padding: 3px;
height: 75px;
width: 75px;
}

/* format summaries nicely in #big */
#big ul
{
margin: 0px;
padding: 0px;
padding-left: 5px;
}

#big li
{
list-style-type: circle;
padding: 0px;
margin-left: 10px;
}
#big a
{

}
#big .dayurl
{
display:inline;
margin-left:0px;
}
#big .month_navigation
{
display:inline;
margin-left:0px;
}
/* background colours for #big */
#big td
{
background-color: khaki;
}

#big .calendar-day
{
background-color: ;
}

#big .calendar-today
{
font-weight: normal;
background-color: #999966;

}
#big .calendar-today a
{color:khaki;}
#big .calendar-today .dayurl
{display:inline;
 margin-left:0px;}
.calendar-event {margin-top:5px;
margin-bottom:10px;
padding-left:5px;
padding-bottom:5px;
border: 2px solid #999966;}
.calendar-event .calendar-date-title,
.calendar-event .calendar-summary-title,
.calendar-event .calendar-details-title
{
font-weight:bold;
}
.calendar-event .calendar-event-title
{width:100%;
background-color:khaki;
padding-top:5px;
padding-left:5px;
padding-bottom:5px;
margin-left:-5px;
border-bottom:1px solid #999966;}
#big caption
{margin-bottom:5px;}
#big caption a
{text-decoration:none;}
.calendar-prev{display:inline;}

Milhaus

[RonnyK]

I'm just back from holiday and saw your reply. If you stll want the styling, please post a reply. I'll put my code and CSS over here then.

Ronny