Ext.ux.DatePickerPlus: MultiMonth, MultiSelection, WeekNumbers, Custom CSS Days,...

[wm003]

New Version 1.2 released

As always grab the latest download packages from the first post of this thread (remember to download with firefox).

Enjoy

Changelog:
- support "allowOtherMenus" Config for DateFieldPlus
- datefieldplus can be hidden by clicking the triggerbutton again in cases hiding by clicking outside isn't possible
- added config "styleDisabledDates" to be able to set custom style dates (eventdates/weekends..) on disabled dates also (suggested by descheret)
- added config "eventDatesSelectable" to disble event-dates selection if desired (even if the dates are not disabled at all) (thanks to descheret)
- added config "disableSingleDateSelection" to force user to use week- or monthselection only (suggested by chemist458)
- added config "stayInAllowedRange" when setting minDate/maxDate, this will prevent to change months outside the allowed daterange (suggested by descheret)
- added config "summarizeHeader" to add an optional global header when using multimonth display containing the month range (e.g. january 2008-october 2008)
- added italian locale (thanks to andreabat)
- FIX: setMinDate/MaxDate/DateLimits did not update the viewport properly (reported by sasho)

[wm003]

New Version 1.3 supports ExtJS 2.2

(1.2 and below are not fully compatible to Ext 2.2)

updated first post and demopage as always

[stumpy_uk]

Firstly thanks for an Awesome UX, it really is very impressive.

I have a question and I feel the answer is obvious but I have had many goes and looked at the code and cannot find a way to plug in a JSON Store into the application. I can add items as an array but would like to store them in a DB and manage them in there if it is possible.

Cheers

Stumpy

[wm003]

This will need a DateConverter for the JSON String, as simply Ext.decode won't create valid DateObjects out of a JSON encoded Date.

I will support JSON Encoded Dates (e.g. 2008-08-05T12:22:00) for eventDates or disabledDates in the upcoming version. It already was on the roadmap
And this way you will be able to use an Ext.data.JSONStore for the mentioned datearrays in the future.

[gtomalesky]

First of all this is a great extension to the ExtJS product. For me it would be even better if I could get the calendar titles to show with the nice blue background. I am using 2.0 because switching to 2.2 breaks some things I don't have time to chase down. I did copy ext-base.js from 2.2 to get rid of that annoying "Ext.isArray is not a function" message, however. I attempted to use ext-all.css from that same distro but that did not make the calendars pretty. Any thoughts on this???

[wm003]

For me it would be even better if I could get the calendar titles to show with the nice blue background.

This should do (customize it for your needs)

.x-date-middle,.x-date-left,.x-date-right {
    background: url(../path/to/your/pickerheaderbackground.gif) repeat-x 0 0 !important;
    color:#FFF !important;/* change the textcolor aswell*/
}

to use the same lightblue as the daynames try this

.x-date-middle,.x-date-left,.x-date-right {
    background: #dfecfb url(../images/default/shared/glass-bg.gif) repeat-x left top !important;
    color:#233d6d !important;
}

[gtomalesky]

Thanks wm003! I have also tried to use the defaultEventDatesCls to put a black background on event dates but it does not seem to work. What am I doing wrong?

[wm003]

Thanks wm003! I have also tried to use the defaultEventDatesCls to put a black background on event dates but it does not seem to work. What am I doing wrong?

could you please provide the js code of your DatepickerPlus config and the Css Class definition?
maybe its an "!important" option needed on css or some typo in the classname? i cannot see any bug (yet) without some example code

[gtomalesky]

Thanks for your quick reply. Here are the code snippets:

Here is the code for an editor in an EditorGridPanel:

            editor:	new Ext.ux.form.DateFieldPlus({
				allowBlank:false,
				readOnly:true,
				showWeekNumber: false,
				disableMonthPicker:false,
				summarizeHeader:true,
				noOfMonth : 3,
				noOfMonthPerRow : 3,
				renderPrevNextYearButtons:true,
				showActiveDate:true,
				format:'M-d-Y',
				disabledLetter: "-",
				minDate: new Date(2008, 0, 1),
				//maxDate: new Date(2008, 4, 26),			
				width:120,
				eventDatesSelectable: false,
				styleDisabledDates:'blocked-dates',
				defaultEventDatesCls:'blocked-dates',
				eventDates : function(year) {
					var dates = [
					{
						date: new Date(year,5,26), //will be marked every year on June 26
						text: "June 26th, Greg's Birthday (Age:"+(year-1951)+")"
					}
							
					];
					return dates;
				}
        	})

and the CSS class: (shamelessly lifted from datepickerplus.css)

<style>
<!--
.blocked-dates a
{
	background-color:#000000;
	border:1px solid #000088;
	padding:1px 4px;	
}
-->
</style>

[gtomalesky]

I need to be able to place a calendar for the current month in between the previous month and the next month. I have been able to do this by subtracting one month off the current month and setting that as the "value". The problem is the incoming day( from a TriggerField) is not highlighted. Is there another way to set the start month in a row of months? Thanks in advance for you help and for a great extension.