Wednesday, March 28, 2012

Change default view of CalendarExtender

I need to change the default calendar view from Days to Years when it initially pops up. Does anybody know how to do this?

Hi Arjang,

me@.arjang.ca:

I need to change the default calendar view from Days to Years

Would you please give us more clear explanations?Do you want to list all the Days of a year on the page? If yes , I think you'd better use javascript + HTML to write your own calendar.As far as I know, the CalendarExtender is designed for showing the Days of a month. For more details, please visit: http://www.asp.net/AJAX/Control-Toolkit/Live/Calendar/Calendar.aspx or the Ajax ControlToolkit's source code.Thanks.

Best regards,

Jonathan


Hi Jonathan

I wanted to have the ability to change the default calendar view from Days to Years when it initially pops up. One real world scenario when this would be very important would be when using the calendar to select a birthdate. The year could be 1950 so it's not practical for someone to scroll back month by month, and users don't always understand they have to click the title twice to switch to year. Exposing a property like "InitialView" that could be set at design time or runtime would be ideal. The calendar would pop up right to year selection, then month, then day.

Anyway, I fixed it by changing the Ajax source code and it seems it is working properly.

Thanks,

Arjang



I would be very interested in doing this as well, what did you change?(in CalendarBehavior.js?)

Also, I would like to fire the date selected event when the user selects a month rather than a day.

Any help would be appreciated.


I did the following changes:

1. added another parameter for default mode:

this._defaultMode ="days";

this._mode =this._defaultMode;

2. expose a property to handle default mode:

get_defaultMode :function() {returnthis._defaultMode;},

set_defaultMode :function(value) {

if (this._defaultMode != value) {

this._defaultMode = value;

this._mode =this._defaultMode;this.raisePropertyChanged("defaultMode");

}

},

3. in hide function change "days" tothis._defaultMode

this._switchMode(this._defaultMode,true);

4. finally, in_switchMonth function add the following code in the else section of "if (this._animated && !dontAnimate)".

if (this._mode !="days")

{

var element =this._modes[this._mode];

$common.setLocation(element, {x:0,y:0});

$common.setVisible(element,true);

}

Hope it helps! please let me know if you face any problem.


Worked like a charm. Thanks so much.

No comments:

Post a Comment