|
Controlling the Full Calendar |
|
|
|
|
Thursday, 15 December 2005 |
gigCalendar's default Full Calendar template uses this basic semantic structure:
- wrapper: <div id="gigcal">
- introduction container: <div id="gigcal_intro">
- navigation: <div id="gigcal_navigation">
- next month and next year fields: <p class="gigcal_nextmonth">, <p class="gigcal_nextyear">
- "jump to month" widget: <form>
- GigCal wrapper: <div id="gigcal_wrapper">
- GigCalendar: <table>
- days of the week: <th>
- normal days: <td>
- weekends: <td class="gigcal_weekend">
- current date: <td class="gigcal_current">
- current date (weekend): <td class="gigcal_weekend_current">
- "empty" days (days from previous or next months): <td class="gigcal_empty">
- events: <div class="gigcal_event">
- event listing: <dl>
- event field: <dt>
- field description: <dd>
Most classes are static (will be the same regardless of output) with the exception of the individual table cells. The idea here is that the class attribute assigned will reflect the day of the month:
- regular day: no class attribute
- weekend: class="gigcal_weekend"
- current date: class="gigcal_current"
- current date (weekend): class="gigcal_weekend_current"
- empty day: class="gigcal_empty"
NOTE: Internet Explorer currently does not support multiple classes. IE 7 is expected to change that, so classes could one day be assigned like so:
- current date (weekend): class="gigcal_weekend gigcal_current"
And the CSS referencing this class:
.gigcal_current.gigcal_weekend { styles }
But this is for another time. :)
There are a few "hacks" used in the CSS of these templates which work around various Internet Explorer rendering issues. These hacks will very likely need to be revisited with the release of Internet Explorer 7. The best, most future-proof way of using IE-only styles is to place IE rules in a separate CSS file, then call that stylesheet using Internet Explorer's proprietary conditional comments:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/css/iestyle.css" media="screen" />
<![endif]-->
Rules inside of these comments will be read only by Internet Explorer browsers version 6 and below.
Internet Explorer versions 6 and below only support the ":hover" psuedo-class when used on <a> tags. The default template uses the following rule:
#gigcal td div.gigcal_event:hover { background: #d1dddf; }
…which changes the background color on a div within a cell with an event on mouse hover. To enable :hover on specific elements in IE (in this case, <div>), you can use the following code, modified from http://htmldog.com/articles/suckerfish/hover/:
sfHover = function() {
var sfEls = document.getElementById("gigcal").getElementsByTagName("div");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
You can either include this code in the template, or save it as a separate file and include it using conditional comments (see above):
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/css/iestyle.css" media="screen" />
<script type="text/javascript" src="/js/iehover.js"></script>
<![endif]-->
…then add the "sfhover" class to the element in the CSS rule, like so:
#gigcal td .gigcal_event:hover, #gigcal td div.sfhover { background: #d1dddf; }
The templates use ems for sizing and positioning when possible. To adjust the overall size of elements within the calendar, change the percentage value in the following code:
#gigcal {
font: 86%/1.5em "lucida grande", verdana, arial, sans-serif;
}
Good cross-browser percentages are 60%, 69%, 76%, 86%, and 93%. See more at http://www.thenoodleincident.com/tutorials/typography/incremental_differences.html
|
