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

[wm003]

I know how to use minDate and Max date and it works (only the allowed range is clickable) but is it also possible to lock the month and year select buttons to the allowes months only? so that it isn't possible to select or scroll into the "forbidden area"? It's not possible to click them anyway and thats good. But why should the user see the days and months? (in my case it's a range from 1st july till 31th dec 08)

Good suggestion! I'll implement this into the upcoming minor upgrade

this question is about the EventDates, I know how to use them and it works. But also - is there a way to remove the link from this special days. so that's possible to see them (different style) but not to click them?

i also will add this as an optional config item within the next minor version. Thanks for the suggestion.

[descheret]

thanks that sounds good for me. Is there a chance for me - in-between - to find a hardcoded solution? I looked to the scripts already but can't find the right lines. I think it's part of the original Ext JS code, isn't it? At the moment I'm not 100% fit and start with this framework with the first projects. So maybe you have an idea where I can have a look for help my self a bit.

also do you know when there is the next verion of the DatePickerPlus?

Thanks a lot
ronald

[descheret]

Hello,

I've managed my issue with the deactivating the EventDates, just in case anyone needs it too:

first define the config variable

/**
     * @cfg {Boolean} eventDatesSelectable
     * Whether the Event should be selectable or not
     */
    eventDatesSelectable : true,

add the "eventDatesSelectable: true" to the rest of config vars where you define your DatePickerPlus

add new event disabled css classes (similar to disable class but different background color)

.x-date-inner .x-datepickerplus-eventdates-disabled a:hover {
    background: #EB5F01;
    color: #fff;
    ... /* more css code */
}

.x-date-inner .x-datepickerplus-eventdates-disabled a {
    background: #EB5F01;
    color: #ffffff;
    cursor:default;
    ... /* more css code */
}

change this part and add the if/else to the ext.ux.datepickerplus.js

//mark dates with specific css (still selectable) (higher priority than weekends)
                if (cal.eventDatesNumbered[0].length>0) {
                    foundday = cal.eventDatesNumbered[0].indexOf(t);
                    if (foundday!=-1) {
                        if(cal.eventDatesNumbered[1][foundday]!==""){                        
                            if(cal.eventDatesSelectable) {
                                var eventClass = cal.eventDatesNumbered[2][foundday];
                            } else {
                                var eventClass = cal.eventDatesNumbered[2][foundday] + '-disabled';
                            }
                            eCell.addClass(eventClass);
                            tiptext = (cal.eventDatesNumbered[1][foundday]!=="" ? cal.eventDatesNumbered[1][foundday] : false);
                        }
                    }
                }

and finaly add the following to ext.ux.datepickerplus.js to the date click handler

if(t.dateValue && !Ext.fly(t.parentNode).hasClass("x-date-disabled") && !Ext.fly(t.parentNode).hasClass("x-datepickerplus-eventdates-disabled") ){

maybe there are better solutions - but it works

no I have to look to the next issue: allow only selecting and scrolling trough the allowed months and disable the prev/next month/year buttons for months before minDate and also for months later than maxDate.

[chemist458]

Dear wm003,
Great extension, just wondering...
Is there anyway of forcing users to select weeks only, so if u clicked on a row in the datepicker, it would select the whole week, and not the day you clicked on only?
Thanks in advance,

George

[wm003]

Dear wm003,
Great extension, just wondering...
Is there anyway of forcing users to select weeks only, so if u clicked on a row in the datepicker, it would select the whole week, and not the day you clicked on only?
Thanks in advance,

George

mmh, not on the roadmap. That's why i implemented the "click on the weeknumber to select weeks"-feature. To achive this you currently need to use the "afterdateclick" event to manually create the weekselection out of the selected day.
The more easier way to "force" users to select weeks only would be to disable the single date selection at all. I will implement an option for this in the upcoming release.

[chemist458]

Thanks for the answer,
I am using it to select weeks to show weekly stats in a main window containing a grid, so its best that way for me.
I thought that could be your answer, so I'm having a go right now at it, I'll post back with what I get to work, if thats helpful.
Thanks again
George

[sasho]

Hi:
Your extension is exactly what I need for a project. Thanks for your work!!

I am running into some troubles when using the following listeners:

"beforeyearchange"
"afteryearchange"
"beforemonthchange"
"aftermonthchange" 

Basically, the event is executed. However, the event get fired again and again, rather than just once.

For example: when I define the following listener:

listeners:{'afteryearchange':function(){ alert('changed year'); }} 

I would get a popup over and over again, and the year changes more than once too.
I tried with Firefox on Windows and linux, as well as IE6, and I get the same behavior with all of those.


Thanks in advance for your help My goal is to update/change the allowedDates array with the result from an Ajax call, when a month or a year gets changed.

[chemist458]

Dear wm003,
I thought I would post this as it maybe helpful, I have added to the afterdateclick event as you advised.
It works, see what you think.

listeners: {
            afterdateclick: function(dp, date){
                var startdate = new Date(dp.lastSelectedDate);//use this to check whats been clicked
                var firstday = new Date(date).getFirstDateOfWeek(dp.startDay);//get the first day of week date
                var lsdCell = dp.lastSelectedDateCell.split("#");//needed for the daycell value
                var tmpMonthCell = parseInt(lsdCell[0],10);
                var tmpDayCell = parseInt(lsdCell[1],10);
                if(tmpDayCell < 7){//set the start cell to select
                    var s = 0;
                }else if(tmpDayCell > 6 && tmpDayCell < 14){
                    var s = 7;
                }else if(tmpDayCell > 13 && tmpDayCell < 21){
                    var s = 14;
                }else if(tmpDayCell > 20 && tmpDayCell < 28){
                    var s = 21;
                }else{
                    var s = 28;
                }
                for (var i = 0; i < 7; i++) {//loop through and select them all
                    var nextday = firstday.clearTime().add(Date.DAY, i);
                    if(nextday.getElapsed(startdate) !== 0){//check for sameday value
                        dp.markDateAsSelected(nextday,true,0,s+i,true);
                        }
                }
            }
        } 

Thanks for the pointer before

George

[wm003]

Hi:
However, the event get fired again and again, rather than just once.

That might be the issue because of the KeyListener and/or clickrepeater.
As you need to click away the alert-box, try something similar by using the firefox console instead of an alert box. I guess, it won't get fired that often anymore then.

listeners:{
    'afteryearchange':function(){
        console.log('changed year');//that basically only works in Firefox
    }
} 

[sasho]

As you need to click away the alert-box, try something similar by using the firefox console instead of an alert box. I guess, it won't get fired that often anymore then.

listeners:{
    'afteryearchange':function(){
        console.log('changed year');//that basically only works in Firefox
    }
} 

Will do, thanks for the tip