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 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?