jQuery UI datepicker as "year calendar"

Question

I'm trying to get a full year calendar from jQuery UI datepicker, where I can interact with weeks rather than days.

I already found how to do the weekly part, but now I would like to display the full year, for a result similar to this :

I managed to add the 12 months, using the numberOfMonths: 12, but how can I set them display as a grid? I tried to set a width to the container, but it doesn't do anything.

For the starting month, I find on an other topic that I can change default date to 1st January adding defaultDate: new Date(new Date().getFullYear(), 0,1). This indeed make the months starting on January, but it also move the current day selection to 1st January... I would prefer, if someone knew a way to keep the current day as default selection.

Then for the previous/next button, is it possible to make them changing year in stead of month ? Else I think I may cheat, by adding an event handler to click 12 times instead of 1.

Finally, I would like to move the next button back to the third month like in the picture. It may not be very hard using CSS, so I'm just curious if there might be a function to do it more easily.

Here's a JSFiddle for my current code http://jsfiddle.net/AVZJh/2553/

Answer 1

I finally found all the missing part, result : http://jsfiddle.net/AVZJh/2625/

Grid & mooving previous/next button was both done changing numberOfMonths to an array : numberOfMonths: [4,3]

Previous/next switching year in stead of month was done adding stepMonths:12

Starting at january without changing default date was done adding showCurrentAtPos: new Date().getMonth()

Answer 2

Why don't you try AnyTime. It has all the features you ask for.