Calendar pages in different rows

[damm]

Hello, I have a <p: calendar /> and I want to display the 12 month of the year. Using pages="12" I can do this, but the problem is that all the calendars appear in the same row, so a horizontal scrollbar is necessary to see all calendar pages. Is it posible to place the pages in different rows?

This is my calendar code:

Code: Select all

<p:calendar mode="inline" value="#{bean.date}" navigator="false"
                  pattern="dd/MM/yyyy" pages="12" mindate="01/01/2011"
                  maxdate="31/12/2011" styleClass="annualCalendar" />

and this is the style I added

Code: Select all

.annualCalendar .hasDatePicker {
    position: relative;
}

.annualCalendar .ui-datepicker {
    display: inline !important;
    position: relative;
}

After this, I could make pages appear in different rows, but still doesn't look good. The first page of the second row is displayed where the 2nd page should be displayed (there's a blank space at the begging of the second row); and in the 3rd row the blank space is even larger (takes the space of 2 pages).
Also in Internet Explorer 7 it looks really bad.
Any idea of how can I fix this?

Thanks

[damm]

in case anyone is interested.. the following code does what I want:

Code: Select all

$(document).ready( function () {
          $('.ui-datepicker-group:nth-child(4)').children('div').addClass('ui-corner-right');
          $('.ui-datepicker-group:nth-child(5)').children('div').addClass('ui-corner-left');
          $('.ui-datepicker-group:nth-child(8)').children('div').addClass('ui-corner-right');
          $('.ui-datepicker-group:nth-child(9)').children('div').addClass('ui-corner-left');
          $('.ui-datepicker-group:nth-child(4)').after($('<div class="ui-datepicker-row-break"></div>'));
          $('.ui-datepicker-group:nth-child(9)').after($('<div class="ui-datepicker-row-break"></div>'));                       
          $('.ui-datepicker').css('width', '648px');
 });

unfortunadtely, when you choose a date the calendar returns to original layout (all pages in one row). using <p:ajax event="onSelect" oncomplete="restyleCalendar()" /> applies the fix again; but it takes a second to complete so the change is visible and doesn't look good...

[Charriu]

Hello,
I had the same problem, the solution from 'damm' worked very well for view-only purposes. In my special case, the could select a date from the calendar, scroll throw a long period of months and process some commands in an external input field, which manipulating the calendars. Every command needs a JavaScript function to restyle the CSS, which results in a very ugly flickering while the javascript was running. So I overwrite my page CSS like this for an "4x3 calendar"-style:

Code: Select all

.ui-datepicker {
	width: 648px !important;
}

.ui-datepicker-group:nth-child(1),.ui-datepicker-group:nth-child(5),.ui-datepicker-group:nth-child(9)
	{
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;
	-khtml-border-top-left-radius: 4px;
	border-top-left-radius: 4px;
}

.ui-datepicker-group:nth-child(4),.ui-datepicker-group:nth-child(8),.ui-datepicker-group:nth-child(12)
	{
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	-khtml-border-top-right-radius: 4px;
	border-top-right-radius: 4px;
}

.ui-datepicker-group:nth-child(5), .ui-datepicker-group:nth-child(9) {
	clear: both;
}

I think it is quite self-explaining. For other style you have to change the "nth-child(x)" parts. The orginally style for .ui-datepicker-row-break contains { clear:both; width:100%; font-size:0em; }, which I got not working, but clear: both only did the trick for me.

Nevertheless, an attribute for p:calendar to style the component it selfs would be very nice.

Charriu