Changing Jquery Calendar size using google hosted theme

Question

I am trying to implement the Jquery datepicker using a google hosted theme. But the Calendar is too big. Can I make it a smaller version by altering the function itself seeing I cant change the theme?

<link rel="stylesheet"  
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"      
      type="text/css" media="all" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(function() {
    $("#datepicker").datepicker({ dateFormat: $.datepicker.W3C });
  });
</script>

UPDATE: I downloaded the google hosted css file and manually changed the values in it. However, now the arrow keys in my calendar have gone way. If I switch the src= to the online google hosted script, the arrows appear but the size is huge again.

Answer 1

The demo page gives some sample HTML that you can style against:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
   <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
      <a class="ui-datepicker-prev ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
      <a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
      <div class="ui-datepicker-title">
         <span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span>
      </div>
   </div>
   <table class="ui-datepicker-calendar">
      <thead>
      <tr>
         <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
         ...
      </tr>
      </thead>
      <tbody><tr>
         <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td>
         ...
      </tr>
      </tbody>
   </table>
   <div class="ui-datepicker-buttonpane ui-widget-content">
      <button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button>
      <button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button>
   </div>
</div>

Apply new styles to those classes after you import the stylesheet from Google and you'll be good to go. For example (just as an example--I have no idea if this would look good):

.ui-datepicker-div { font-size: 75%; }

Answer 2

The size of the datepicker is determined by the font-size CSS property.

<div id="datepicker" style="font-size: 90%"></div>

Also, I see you're using Google's CDN to serve the CSS but not the JQuery script, why?