From jQuery JavaScript Library

« Back to Plugins/Calendar

This page explains how to create a theme for the jQuery Calendar plugin.

Markup

<div id="calendar_div">
  <div class="calendar_control">
    <a class="calendar_clear">Clear</a><a class="calendar_close">Close</a>
  </div>
  <div class="calendar_links">
    <a class="calendar_prev">&lt;Prev</a>
    <a class="calendar_current">Today</a>
    <a class="calendar_next">Next&gt;</a>
  </div>
  <div class="calendar_header">
    <select class="calendar_newMonth"></select>
    <select class="calendar_newYear"></select>
  </div>
  <table class="calendar" cellpadding="0" cellspacing="0">
    <thead>
      <tr class="calendar_titleRow">
        <td><a>Su</a></td><td><a>Mo</a></td>...
      </tr>
    </thead>
    <tbody>
      <tr class="calendar_daysRow">
        <td class="calendar_daysCell calendar_weekEndCell
                   calendar_otherMonth calendar_unselectable">31</td>
        <td class="calendar_daysCell"><a>1</a></td>
        <td class="calendar_daysCell calendar_daysCellOver"><a>2</a></td>
        <td class="calendar_daysCell calendar_daysCellOver calendar_currentDay"><a>3</a></td>
        <td class="calendar_daysCell calendar_today"><a>4</a></td>
        ...
      </tr>
      ...
    </tbody>
  </table>
  <div style="clear: both;"></div>
</div>

IDs

• calendar_div - The container that wraps around the entire calendar. This element is shared by all pop-up calendars. Inline calendars have their own instances with IDs in the format calendar_div_nn, where nn is the internal instance number.

Classes

• calendar_inline - Container for the calendar if it is displayed inline.
• calendar_prompt - The row for a prompt when displayed in a dialog.
• calendar_control - The row containing the Clear and Close buttons.
• calendar_clear - The Clear link.
• calendar_close - The Close link.
• calendar_links - The row containing the Prev, Next, and Current buttons.
• calendar_prev - The Prev link.
• calendar_current - The Current link.
• calendar_next - The Next link.
• calendar_header - The row containing the month and year.
• calendar_newMonth - Drop down menu for selecting months.
• calendar_newYear - Drop down menu for selecting years.
• calendar - The main calendar table.
• calendar_titleRow - Header row of the table containing day names.
• calendar_daysRow - Row of day numbers on the calendar.
• calendar_daysCell - A standard day number.
• calendar_daysCellOver - Mouse over state for a selectable day.
• calendar_currentDay - Highlight the currently selected date.
• calendar_today - Highlight today's date.
• calendar_weekEndCell - Contains a weekend date.
• calendar_otherMonth - Dates before and after the days in the current month.
• calendar_unselectable - Days that are deactivated for users to select.
• calendar_cover - IFRAME that only displays in Internet Explorer 6 or below.

Tips

• Prevent select boxes from showing through the calendar in Internet Explorer 6 or below with this CSS:

.calendar_cover {
  display: none; /*sorry for IE5*/
  display/**/: block; /*sorry for IE5*/
  position: absolute; /*must have*/
  z-index: -1; /*must have*/
  filter: mask(); /*must have*/
  top: -4px; /*must have*/
  left: -4px; /*must have*/
  width: 193px; /*must have to match width and borders*/
  height: 200px; /*must have to match maximum height*/ 
}

• Set the calendar div to not display initially, and also make sure it is above all other elements on the page.

#calendar_div {
  display: none;
  z-index: 10; /*must have*/ 
}

• Websites typically style all of the links on the page, so you should reset all of the links on the calendar to a default style before setting your custom link styles.

/* Reset link properties and then override them with !important */
#calendar_div a, .calendar_inline a {
  cursor: pointer;
  margin: 0;
  padding: 0;
  background: none;
  color: #000;
}

• After you reset the styles (shown above), use the CSS attribute !important to make sure your styles being used and not any exterior styles.

.calendar_control a {
  padding: 2px 5px !important;
  color: #eee !important;
}