Multi-Month Calendar

[cocorossello]

Great job. Thx for sharing!

[LukeChi]

This is great! thanks for sharing~

[abudhahir]

Hi All Here
I am trying to put one month with all the navigational capabilities.
The problem here is I am till now not able to set the calendar to use all the available size( width and Height) of the contianing panel.
Can Anybody help?
Thanks

[DigitalSkyline]

Pretty sure that is handled by css.

[DigitalSkyline]

hiccup!

[Juanito]

Hello, first of all, thanks a lot for this widget. I am currently using YUI's CalendarGroup and had really wanted to switch to Ext's date picker for its ease of switching year/month and to be able to get rid of YUI files in our app. I was planning on writing this myself but I am glad you beat me to it.

One thing that (I think) is still missing in comparison to YUI calendars is the ability to specify custom styles on specific dates. We use that in our time entry app to highlight pay periods and the current period. YUI has two options to do that, a render event (where you can modify the css of cells) and you can specify renderers for specific dates (which turns out to be too slow when you add too many renderers)

If you don't plan on doing anything like that, I will (after higher priority issues we are working on) and post it here.

Thanks again!

[DeeZ]

Hi,

I needed the same layout with selectable days . I slightly changed the code to add this feature.

Just unzip the file in your "examples" directory to test it.

I tested it successfully wiht ExtJS 2.0.2 on FF 2, FF 3b4, IE 7, Safari 3.1.
A bug occurs on IE8b1 and I don't know why ...

DeeZ

[luigif]

There is a minor bug appearing when noOfMonthPerRow=1 and noOfMonth>1 causing the calendar to be incorrectly displayed.
It happens for example when it is required a single column of many months.

To correct it, you need to modify this lines in the onRender routine from:

if(x != this.noOfMonth-1) {
       m[m.length] = "<td width='3'></td>";
}
if( (x+1) % this.noOfMonthPerRow == 0 && x!= 0) {
      m[m.length] = "</tr><tr>"; 
}

to:

if(x != this.noOfMonth-1 && this.noOfMonthPerRow > 1) {
       m[m.length] = "<td width='3'></td>";
}
if( (x+1) % this.noOfMonthPerRow == 0) {
      m[m.length] = "</tr><tr>"; 
}

allowing it to work also when x=0.

[alexpgh]

Is it possible to define event handling for each selected date? For example, it would be nice to have a tooltip on mouseover describing what does each selected date represents....

[wm003]

Is it possible to define event handling for each selected date? For example, it would be nice to have a tooltip on mouseover describing what does each selected date represents....

Try DatePickerPlus. it has support for custom css and tooltips for definable dates aswell as eventhandling for every dateselection