Styling the jQueryUI DatePicker

Question

I am using the jquery datepicker (http://jqueryui.com/demos/datepicker/).

The datepicker on the demo page is small and compact. However, when I use the datepicker on my site, the calendar is HUGE. I would estimate that each date is using 12 pt font.

How do I get the days to be smaller?

Answer 1

jQuery UI has a theme roller that allows you to customize one of the existing themes including the fonts, colors and backgrounds before downloading. You can do other things like set the corner radius, margins and padding.

I'd recommend trying to customize it as much as you can before downloading so you'll have less to tinker when using it on your site.

Remember to set the default font sizes and such for the whole page after you've called the jQuery UI stylesheet.

Answer 2

This is a bit late, but for future reference only: Add this between your , after the jquery ui css reference.

<style type="text/css">
    .ui-datepicker { font-size: 9pt !important; }
</style>

and it will become smaller.