CSSCalendar

These FAQs are based on your actual questions. I'll add more as they come in.

• I followed your instructions, but no calendars are created!
• How to add events to a calendar?
• How do I change a cell's background color or image?
• Can I add background image to one cell?
• How can I alter the bg color of the Sat and Sun columns, in my "_up..." css file?
• How can I make a navigation element on my page to jump to THIS month's CSSCalendar page?
• Can I specify an a:link color in the Event (or other) div?
• Can I make the calendar much narrower?
  
  

I followed your instructions, but no calendars are created:

Two possibilities: a) Realize that the model page is not altered at all, rather new pages are created and added to your site. b) press the F5 key to force a Refresh of the Site Window and then look again for the added files, or c) You might not have noticed one subtle instruction - in DWMX and higher, use the InsertBar's Goodies tab to create cssCalendars, whereas in DW4, use the InsertMenu.

How to add events to a calendar:
(You may want to forward this to your Contribute user as well):

"Getting around the table. Mouse to any cell of the calendar. Each "{" is a placeholder. There are two events entered for each day. Each event has three fields: Title, Location, Hours. If you need a third event, you can simply select a Title, Age, Hours group of {s and copy/paste. Enter a Title, then RIGHT ARROW for the quickest way to the Age field, RIGHT ARROW again as you go from field to field. You may leave the {'s or remove them as you enter data, we'll be removing them in one step later anyway.

To create repeated events, like a group that meets every Tuesday at x o'clock, simply enter the event once in a cell, then copy/paste it to all the other appropriate cells.

Beneath the day's events, if you want to enter a special item, like Library Closed, or Valentine's Day, enter the text wherever you wish in the cell. Then select that text and in the upper left of the UI you'll see a dropdown - open that list and select Special.

Once you are done entering the entire month of data you will want to remove all those extraneous {'s. Easily done. Select any {, click ctl-F, Replace All, which will replace all {s with nothing and so remove them.

Now, should you ever need to update a Calendar, you can still enter the same event blocks, simply the {'s are gone. Left and Right arrows will get you where you need to go within a each cell. you will know when you are on the Title row, e.g. when the dropdown in the upper left of the UI shows "Title" This may take a few moments to get used to, but will be easy thereafter."

Note: Also realize that you can add an href link to any of your added text. After all, this is just html. You may want to add CSS rules for these links.

How do I change a cell's background color or image:

I was asked how to change the background color of one row. The best way I could find is to use inline-CSS for each cell, as in: (Note: you won't be able to see the effect of this in Design View, but it will appear in a browser) <td valign="top" class="thismonth mon" style="background-color:#ccbbee">

 

Can I add background image to one cell:

<td valign="top" class="thismonth fri" style="background-image:url(imagepath/imagefilename.jpg)"> 
where "imagepath/imagefilename.jpg" is naturally replaced by your own path and image.

How can I alter the bg color of the Sat and Sun columns, in my "_up..." css file:

table#calendar td.sat, table#calendar td.sun {
 background-color: #c99 !important;
 /*background-image: url(bgimages/gridmidblue.gif);*/
}

Note the c99 here. You change that to whatever color you wish. Note also I commented out the bgimage style there. 

How can I make a navigation element on my page to jump to THIS month's CSSCalendar page:

Simply create a blank document named, e.g. "cal.htm", and Link your navigation element to it. Then in the Head of cal.htm add this script:

<script language="JavaScript" type="text/JavaScript">
<!--
var arMnths = new Array("jan","feb","mar","apr","may", (no line break here)
"jun","jul","aug","sep","oct","nov","dec");
var d = new Date();
currentYear = d.getFullYear();
currentMonth = d.getMonth();
// you may need to add a prefix,
// or change the file extension in this example:
window.location.href = currentYear+arMnths[currentMonth]+".htm"
// -->
</script>

Now when the navigation element is clicked, cal.htm will start to load but immediately (and
invisibly) jump right to this month's calendar! You're welcome :-)

Can I specify an a:link color in the Event (or other) div:

The trick to this is to make the css "more specific" than "table a:link" that is already present in the css file. Be sure to enter like this and it should work fine. The same trick can be used for other styles that need to override others in the css file.

table#calendar div.event a:link {
 color: #CC3300;
}
Alternatively you can use " !important" as here:

div.event a:link {
 color: #CC3300 !important;
}

 

Can I make the calendar much narrower:

In the _up...css file you are using, simply:

a) control the overall width of the table itself here

table#calendar {
 background-color: #FFFBEA;
 background-position: center;
 background-repeat: repeat;
 font-size: 90%;
 width: 444px; /* or whatever width you wish.*/
}

b) add this style to set the minimum width of each col:

tr#spacers img{
 width: 10px; /* or whatever width you wish.*/
}

Far as I have seen this works fine, but there may be a browser out there that also requires that you remove the hard-coded image width from the shim images also - they are in the last row of the column (easily seen in Code View).

$39.00 US ver 1.0.14DW4-DWCS3