Popup Calendar 1.1 - DHTML Lab | 3

<dlcalendar click_element_id="img_0"
            nav_images="dlcalendar_prevyear_black.gif,dlcalendar_prevmonth_black.gif,dlcalendar_nextmonth_black.gif,dlcalendar_nextyear_black.gif"
            navbar_style="background-color: yellow; color:black;"></dlcalendar>

Try it:

The behavior is as expected. The CSS style properties defined in the navbar_style attribute are kicking in.

Now, pop up a calendar from the next image, below. The HTML code for this calendar instance is the same as for the previous one:

<dlcalendar click_element_id="img_0"
            nav_images="dlcalendar_prevyear_black.gif,dlcalendar_prevmonth_black.gif,dlcalendar_nextmonth_black.gif,dlcalendar_nextyear_black.gif"
            navbar_style="background-color: yellow; color:black;"></dlcalendar>

Try it:

In this case, navbar_style properties seem to be overlooked. Why?

The Reason

The values of the following attributes:

navbar_style,
daybar_style,
selecteddate_style,
weekenddate_style,
regulardate_style and
othermonthdate_style

are applied as inline CSS style rules, overriding any other styles set for the element they are applied to.

daybar_style, selecteddate_style, weekenddate_style, regulardate_style and othermonthdate_style are applied to individual table cells and are successful in overriding any other style declarations for those cells.

navbar_style is applied to the complete table that forms the calendar's navigation row. If the page the calendar resides in has an overhead style rule that specifically affects table cells, then navbar_style will not override it.

The above may seem confusing, but it is easily illustrated by looking at these hypothetical code snippets:

<style>
    td { color: green }
</style>
<table>
    <tr><td style="color: blue">Some Text in BLUE</td></tr>
</table>

The above code has a CSS style applied to all table cells. Any inline style= declaration in a cell will override any global cell styling.

<style>
    td { color: green }
</style>
<table>
    <tr style="color: blue"><td>Some Text in GREEN</td></tr>
</table>

The above code has a CSS style applied to all table cells. Any inline style= declaration in a row will not override any global cell styling.

<style>
    td { color: green }
</style>
<table style="color: blue">
    <tr><td>Some Text in GREEN</td></tr>
</table>

The above code has a CSS style applied to all table cells. Any inline style= declaration in a table will not override any global cell styling. This is how the calendar script applied navbar_style.

The Fix

The fix is, of course, to ensure that navbar_style is applied to every cell in the calendar navigation row.

Again, for those familar with the script, the changes made are:

1. Statement removal in the dlcalendar_createHeader() function.

2. Statement addition in the dlcalendar_createHeaderRow() function.

3. Statement addition in the dlcalendar_buildNavigationCell() function.

On the next page, we introduce a new feature.