Changing Jquery Calendar size using google hosted theme
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 onli开发者_JAVA百科ne google hosted script, the arrows appear but the size is huge again.
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?
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%; }
精彩评论