Hi All,

On my page, there are 3 Rad Calendars with MultiViewColumns="2" MultiViewRows="6". Above them there are 4 Rad buttons for navigation purpose ( 2 for backward & 2 for forward) . I want to navigate all 3 calendars by clicking on those 4 buttons. In buttons' click event, I am setting focusdate of each calendar but it doesn't work properly. 

1) Is it possible to do this ?
2) If no, then, is it possible that by clicking on one RadCalendar's navigation button, for other 2 calendars navigation events also get fired?
3) Any other way around to do that.


Thanks,
-AA

AA:

Yes, it's possible to control navigation of one or more RadCalendars using RadButton client-side click events to call your javascript. You would use the "calendar.get_focusedDate()" to return a "triplet" {array} of the currently focused date. Then, you'd use javascript to increment/decrement it by month or year, depending on the button that is clicked. Finally, you'd call "calendar.navigateToDate(focusedDate)" to update your calendar display focus to the new date.

See the RadCalendar Client Object documentation for insights.

Here's some partial code from "Default.aspx" to assist you:
 
You can use RadButton client-side click events to call these functions.


And, your RadCalendar instances would look something like this:

I'll post a more comprehensive sample to assist later today, if time permits.

Hope this helps!

Above is working fine with one calender. If we try to move forward and backward for more than one calender  in same functions, it does not work properly. See below code

EX.
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
    function GoBackOneYear() {
        var calendar = $find("<%=RadCalendar1.ClientID%>");
        var focusedDate = [];
        focusedDate = calendar.get_focusedDate();
        var year = parseInt(focusedDate.shift());
        year = year - 1;
        focusedDate.unshift(year.toString());
        calendar.set_rangeMinDate([1960, 1, 1]);
        calendar.navigateToDate(focusedDate);

        var calendar2 = $find("<%=RadCalendar2.ClientID%>");
        var  focusedDate2 = [];
        focusedDate2 = calendar2.get_focusedDate();
        var year2 = parseInt(focusedDate2.shift());
        year2 = year2 - 1;
        focusedDate2.unshift(year2.toString());
        calendar2.set_rangeMinDate([1960, 1, 1]);
        calendar2.navigateToDate(focusedDate2);
    }

  
</script>
</telerik:RadCodeBlock>

Focus date gets changed only for last calender i.e RadCalendar2. I think, here issue is when calendar2.navigateToDate(focusedDate2) gets executed, it canceled/abort previous statement calendar.navigateToDate(focusedDate);

Any work around?

Thanks ,
kiran
 
 

Kiran:

I've updated the code to work with a single instance of a multi-view calendar. The four RadButtons can be used to replace the embedded navigation buttons. And, they navigate the calender forward/backward by months and years, depending on button clicked,  But, as you've noted, since the calender.navigateToDate(triplet) causes a postback, any attempts to navigate multiple instances of the calendars will be overridden by the last call.

This means that the navigation has to occur server-side. And, I've not yet found a way to do this successfully. I am continuing to investigate, but we may have to wait on Telerik to provide some insights here.

Default.aspx:

Cheers!

Thanks  for reply.
when we sleep JavaScript  some millisecond like 300 ms within two calender navigate call then its working.
but i think this is not a proper solution .
So , kindly give me some  proper solution.

thanks ,
kiran.
 

Kiran:

If you do not have to use multiview calendars, then you can set autopostback to false for the three calendar instances and the following works nicely to navigate by month/year in each direction. (see code that follows).

But, if you must use multiview calendars, then you will have to set triplets containing the focused date for each calendar client side, save the values in hidden field(s), and pass this to the code behind and reset the calendars on Page_Load. And, in order to accomplish this, you would need to determine, server-side, which button was clicked. You can refer to this link for more information how this can be accomplished: http://geekswithblogs.net/mahesh/archive/2006/06/27/83264.aspx

Default.aspx:

Hope this helps!