How can I set the default size of a jquery datepicker?

Question

Have a look at this page. The datepicker itself (called on <div id="calendar">) has a width of "68em" set initially. I then use $("#calendar").children().css("width","auto"); to set the width to auto (so it fills up the page). As you can see, this works. Changing the month (with the buttons), however, causes jQuery to change the width back. Is there a right way to fix this?

Answer 1

You can set the width to a fixed value using CSS only.

If you want to use Javascript to set the width of the #calendar you should hook your JS resizing function to the onChangeMonthYear event.

From the jQuery UI site:

$('.selector').datepicker({
   onChangeMonthYear: function(year, month, inst) { ... }
});

Answer 2

The quick and dirty solution is to use ! important to overwrite the styles set on the element:

#calendar .ui-datepicker-inline {
    width: auto ! important
}

This is not pretty, but it get's the job done without too much of a fuss.