Page 1 of 1

Css Calendar Style a Calendar with these simple rules Rate Topic: -----

#1 Speechist  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 97
  • Joined: 02-December 04

Post icon  Posted 30 January 2005 - 01:14 AM

Ok, this is a no-brainer but it was fun to create! The attached CSS sheet was generated by MM Dreamweaver (I really don't have time to crank CSS from scratch, but I can modify it if need be by hand), and I haven't told DW to use the "shorthand" method of writing CSS. Thus there are a lot of "border" lines and such--better for the newcomer to learn! For examples of what this can look like, visit:

Tenpins Bowling Site Calendar

This style sheet helps you create a basic calendar by making use of a combination of classes and ID's, as well as styling a few regular-occurring tags (p, h5, h6). The attached style sheet provides a way to turn a basic table into a nice-looking calendar that is easy to maintain, add event information, and whatever else you'ld like to do. The down-side to this approach is that you have to manually configure the numbers (dates) for each new month (but that only takes a minute or so), and occasionally you might see some alignment issues if you add a lot of event info. The up-side is that it's really easy to add event info, pics, or whatever to each date. Also, the entire thing is accomplished with NO pictures or spacer images!

Procedure:
1. Create a table that will hold a typical month worth of days. Mine is the standard 7-day cal with day names along the top, and planning for the old and next month days to look differently than the days of the current month. Type the day dates into each square, and day names across the top.

2. Create a style for H6: The fun of CSS is that it lets you do things that you couldn't accomplish with plain HTML or images (gag!). Most calendars place the date for each day inside a little square of its own typically in the upper-left corner of the day's square. The CSS accomplishes this by using some positioning and border rules:

h6 {  
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	color: #003399; 
	background-color: #FFFFDD; 
	text-align: center; 
	vertical-align: middle; 
	display:block; 
	margin-top: 0px; margin-right: 30%; margin-bottom: 0px; margin-left: 0px; 
	padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; 
	height: 15px; 
	width: 22px; 
	border: #003399 solid; border-width: 0px 1px 1px 0px; 
	clip:     rect(   )
}


Aside from the obvious styling of the text, it's interesting to note the zero margins except the 30% right which pushes the right edge to the left thus creating a little box in the upper-left corner. H6 is a block-level element so it's redundant to put display:block, but I like to be safe. Notice that the borders are styled for Right and Bottom but not Top and Left. Now assign the format designation for all the day dates to H6 and you'll see a nifty little box around them.

3. Style the event text - H5: Again, a block-level element, it's not necessary to do anything in the positioning of this element and it will naturally flow beneath the H6:

<td class="date"> <h6>5</h6>
      <h5>&nbsp;</h5></td>


Here I've got a simple non-breaking space just waiting for me to type event information into it, but if there's none, no prob Bob. The styling for the H5 element is straight-forward:

h5 {  
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 9px; 
	color: #003399; 
	text-decoration: none; 
	text-align: left; 
	padding-top: 0px; 
	padding-right: 0px; padding-bottom: 0px; padding-left: 0px; 
	list-style-type: circle;  
	margin-top: 2px; margin-right: 0px; margin-bottom: 3px; margin-left: 5px
}


The only notable things about this styling is setting the padding to zero (that will be handled by the style applied to the td), and the margin setting that pushes the content away from the H6 above it. The font is also small, and I added a couple of amenities like no decorations on text that might be a link or list items using a circle instead of a dot.

3. Style the Day Names along the top- easy:
This is just styling the text, background color, padding, and borders. The only unusual thing is to make sure the bottom border, when combined with the top border of the cells below it, equals the width of the other borders (in this case 2px). Assign the ".dayname" class to the td's along the top.

4. Set up the rules for cells that will be in the "middle" (not along any edges). This is the .date class and is straight-forward:

.date {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	background-color: #F2FFFF;
	text-align: left;
	vertical-align: top;
	height: 65px;
	width: 14%;
	border: #003399;
	border-style: solid;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	color: #003399;
	margin: 0px;
	padding: 0px 3px 3px 0px;
}


Here we're just aligning things to the top, making the borders all 1px, zero margins, a set height/width (the cells will expand as you add event info but the heighth declaration insures that the cells don't collapse if they don't contain stuff, and note the width set to 14%--do the math), and font declarations. Of note here is that the padding for Top and Left is zero. This allows the H6 to sit flush up against the top & left edges of the cell, while Right and Bottom push content away from the other edges slightly.

5. Style for Saturdays and Sundays: Really all that's needed here is some adjustment for the borders:
#sundays {  
	border: #003399 solid; 
	border-width: 1px 1px 1px 2px
}

#saturdays { 
	border: #003399 solid; 
	border-width: 1px 2px 1px 1px
}


If you just look at the values for the borders, they'll make sense (remember they go in order: Top-Right-Bottom-Left. The acronym for this is TRBL, or "you'll be in TROUBLE if you don't put your values in this order!").

6. But what about the lower-left and lower-right corners? Yup, you'll need to do a quick style for them as well:
Lower-left:
#lowerleft {  
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 9px; color: #003399; 
	background-color: #F2FFFF; 
	text-align: left; 
	vertical-align: top; 
	margin-top: 0px; 
	margin-right: 0px; margin-bottom: 0px; margin-left: 0px; 
	padding-top: 0px; padding-right: 3px; padding-bottom: 3px; padding-left: 0px; 
	border: #003399; border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 2px; 
	border-left-width: 2px
}

Here you get the idea of what to do; you're just styling the borders a bit differently. Look at the attached style sheet to see the commensurate code for lower-rights.

7. Now for those bottom cells (not the NEW month cells). Here we'll create a declaration that handles those pesky borders:
#bottoms { 
	border: #003399 solid; 
	border-width: 1px 1px 2px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 9px; color: #003399; background-color: F2FFFF
}


8. Really the only thing left to do at this point is come up with different styles for the OLD and NEW month days--those that live before and after the current month. It helps visually to have those appear differently, so just a little tweaking of their properties (while maintaining similar borders for continuity with the rest of the table) is all that's needed. Here's the NEW month code (for the bottom cells):
#newmonth {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #006600;
	background-color: #FFFFDF;
	text-align: left;
	vertical-align: top;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FF3366;
	border-right-color: #003399;
	border-bottom-color: #003399;
	border-left-color: #FF3366;
}

I know this looks long, but basically it's just setting a style for the background, borders, margins, and alignment that helps it stand out from the current month's days. Same situation for the OLD month day styling.

Summary:
Ok, nothing earth-shattering here, but it is fun to play with, and I'm sure some CSS purists will blast my bloated code and redundancy (repeated font declarations). But you can really experiment with all kinds of styles and colors for different effects. Add a month title cell at the top and style it as you want (or use mine), add a background image for the BODY that matches the season, and so on.

My only regret about running this type of calendar is the need for manual entering of dates and event info each month. Maybe one of those ColdFusion geniuses here in DIC can write some code for dynamically populating this thing with dates automatically, and maybe a form for entering event info!

I hope this is helpful to someone; please don't hesistate to let me know what you think! :rolleyes:

Attached File(s)


This post has been edited by Speechist: 03 December 2005 - 12:05 AM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1