Multi Calendars Navigation by outside buttons

[Ashish]

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

[Richard]

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:

<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);
     }

     function GoForwardOneYear() {
         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);
     }

     function ViewChanged(sender, eventArgs) {
         var step = eventArgs.get_step();
         var msg = "The calendar moved ";
         if (step < 0) {
             msg = msg + "back ";
             step = -step;
         }
         else
             msg = msg + "forward "
             msg = msg + step + " views.";
             alert(msg);
     }
</script>
</telerik:RadCodeBlock>

 
You can use RadButton client-side click events to call these functions.

<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="<<" OnClientClicked="GoBackOneYear" >
</telerik:RadButton>

<telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" Text=">>" OnClientClicked="GoForwardOneYear" >
</telerik:RadButton>

And, your RadCalendar instances would look something like this:

<telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" ShowRowHeaders="false" MultiViewColumns="2" MultiViewRows="6" FocusedDate="1/1/2012 12:00:00 AM" >
     <ClientEvents OnCalendarViewChanged="ViewChanged" />
    <SpecialDays>
        <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday">
            <ItemStyle CssClass="rcToday"></ItemStyle>
        </telerik:RadCalendarDay>
    </SpecialDays>
</telerik:RadCalendar>

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

Hope this helps!

[Kiran]

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
 
 

[Richard]

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">

        function NavigatePrevYear() {
            var calendar = $find("<%=RadCalendar1.ClientID%>");
            var triplet = [calendar.FocusedDate[0] - 1, calendar.FocusedDate[1], calendar.FocusedDate[2]];
            calendar.navigateToDate(triplet);
/* This call will override previous calendar update */
//            var calendar2 = $find("<%=RadCalendar2.ClientID%>");
//            var triplet = [calendar2.FocusedDate[0] - 1, calendar2.FocusedDate[1], calendar2.FocusedDate[2]];
//            calendar2.navigateToDate(triplet);
        }

        function NavigatePrevMonth() {
            var calendar = $find("<%=RadCalendar1.ClientID%>");
            var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] - 1, calendar.FocusedDate[2]];
            calendar.navigateToDate(triplet);
        }

         function NavigateNextMonth() {
             var calendar = $find("<%=RadCalendar1.ClientID%>");
             var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] + 1, calendar.FocusedDate[2]];
             calendar.navigateToDate(triplet);
         }

         function NavigateNextYear() {
             var calendar = $find("<%=RadCalendar1.ClientID%>");
             var triplet = [calendar.FocusedDate[0] + 1, calendar.FocusedDate[1], calendar.FocusedDate[2]];
             calendar.navigateToDate(triplet);
         }

         function ViewChanged(sender, eventArgs) {
             var step = eventArgs.get_step();
             var msg = "The calendar moved ";
             if (step < 0) {
                 msg = msg + "back ";
                 step = -step;
             }
             else
                 msg = msg + "forward "
                 msg = msg + step + " views.";
                 alert(msg);
         }
    </script>
    </telerik:RadCodeBlock>
    <div>
        <table>
            <tr>
                <td>
                    <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="<<" OnClientClicked="NavigatePrevYear" >
                    </telerik:RadButton>
                    <telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" OnClientClicked="NavigatePrevMonth" Text="<"  >
                    </telerik:RadButton>
                    <telerik:RadButton ID="RadButton3" runat="server" AutoPostBack="false" OnClientClicked="NavigateNextMonth" Text=">" >
                    </telerik:RadButton>
                    <telerik:RadButton ID="RadButton4" runat="server" AutoPostBack="false" Text=">>" OnClientClicked="NavigateNextYear" >
                    </telerik:RadButton>
                </td>
            </tr>
            <tr>
            <td>
                <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" ShowRowHeaders="false" MultiViewColumns="2" MultiViewRows="6" FocusedDate="1/1/2012 12:00:00 AM" >
                     <ClientEvents OnCalendarViewChanged="ViewChanged" />
                    <SpecialDays>
                        <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday">
                            <ItemStyle CssClass="rcToday"></ItemStyle>
                        </telerik:RadCalendarDay>
                    </SpecialDays>
                </telerik:RadCalendar>
            </td>
            <td>
                <telerik:RadCalendar ID="RadCalendar2" runat="server" AutoPostBack="true" ShowRowHeaders="false" MultiViewColumns="2" MultiViewRows="6" FocusedDate="1/1/2013 12:00:00 AM" >
                    <SpecialDays>
                        <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
                    </SpecialDays>
                </telerik:RadCalendar>
            </td>
            <td>
                <telerik:RadCalendar ID="RadCalendar3" runat="server" AutoPostBack="true" ShowRowHeaders="false" MultiViewColumns="2" MultiViewRows="6" FocusedDate="1/1/2014 12:00:00 AM" >
                    <SpecialDays>
                        <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
                    </SpecialDays>
                </telerik:RadCalendar>
            </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Cheers!

[Kiran]

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.
 

[Richard]

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">

        function NavigatePrevYear() {
            var calendar = $find("<%=RadCalendar1.ClientID%>");
            var triplet = [calendar.FocusedDate[0] - 1, calendar.FocusedDate[1], calendar.FocusedDate[2]];
            calendar.navigateToDate(triplet);

            var calendar2 = $find("<%=RadCalendar2.ClientID%>");
            var triplet = [calendar2.FocusedDate[0] - 1, calendar2.FocusedDate[1], calendar2.FocusedDate[2]];
            calendar2.navigateToDate(triplet);

            var calendar3 = $find("<%=RadCalendar3.ClientID%>");
            var triplet = [calendar3.FocusedDate[0] - 1, calendar3.FocusedDate[1], calendar3.FocusedDate[2]];
            calendar3.navigateToDate(triplet);
        }

        function NavigatePrevMonth() {
            var calendar = $find("<%=RadCalendar1.ClientID%>");
            var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] - 1, calendar.FocusedDate[2]];
            calendar.navigateToDate(triplet);

            var calendar2 = $find("<%=RadCalendar2.ClientID%>");
            var triplet = [calendar2.FocusedDate[0], calendar2.FocusedDate[1] - 1, calendar2.FocusedDate[2]];
            calendar2.navigateToDate(triplet);

            var calendar3 = $find("<%=RadCalendar3.ClientID%>");
            var triplet = [calendar3.FocusedDate[0], calendar3.FocusedDate[1] - 1, calendar3.FocusedDate[2]];
            calendar3.navigateToDate(triplet);

        }

         function NavigateNextMonth() {
             var calendar = $find("<%=RadCalendar1.ClientID%>");
             var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] + 1, calendar.FocusedDate[2]];
             calendar.navigateToDate(triplet);

             var calendar2 = $find("<%=RadCalendar2.ClientID%>");
             var triplet = [calendar2.FocusedDate[0], calendar2.FocusedDate[1] + 1, calendar2.FocusedDate[2]];
             calendar2.navigateToDate(triplet);

             var calendar3 = $find("<%=RadCalendar3.ClientID%>");
             var triplet = [calendar3.FocusedDate[0], calendar3.FocusedDate[1] + 1, calendar3.FocusedDate[2]];
             calendar3.navigateToDate(triplet);
         }

         function NavigateNextYear() {
             var calendar = $find("<%=RadCalendar1.ClientID%>");
             var triplet = [calendar.FocusedDate[0] + 1, calendar.FocusedDate[1], calendar.FocusedDate[2]];
             calendar.navigateToDate(triplet);

             var calendar2 = $find("<%=RadCalendar2.ClientID%>");
             var triplet = [calendar2.FocusedDate[0] + 1, calendar2.FocusedDate[1], calendar2.FocusedDate[2]];
             calendar2.navigateToDate(triplet);

             var calendar3 = $find("<%=RadCalendar3.ClientID%>");
             var triplet = [calendar3.FocusedDate[0] + 1, calendar3.FocusedDate[1], calendar3.FocusedDate[2]];
             calendar3.navigateToDate(triplet);
         }
    </script>
    </telerik:RadCodeBlock>
    <div>
        <table>
            <tr>
                <td>
                    <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="<<" OnClientClicked="NavigatePrevYear" >
                    </telerik:RadButton>
                    <telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" OnClientClicked="NavigatePrevMonth" Text="<"  >
                    </telerik:RadButton>
                    <telerik:RadButton ID="RadButton3" runat="server" AutoPostBack="false" OnClientClicked="NavigateNextMonth" Text=">" >
                    </telerik:RadButton>
                    <telerik:RadButton ID="RadButton4" runat="server" AutoPostBack="false" Text=">>" OnClientClicked="NavigateNextYear" >
                    </telerik:RadButton>
                </td>
            </tr>
            <tr>
            <td>
                <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="false" ShowRowHeaders="false" FocusedDate="1/1/2012 12:00:00 AM" >
                    <SpecialDays>
                        <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday">
                            <ItemStyle CssClass="rcToday"></ItemStyle>
                        </telerik:RadCalendarDay>
                    </SpecialDays>
                </telerik:RadCalendar>
            </td>
            <td>
                <telerik:RadCalendar ID="RadCalendar2" runat="server" AutoPostBack="false" ShowRowHeaders="false" FocusedDate="1/1/2013 12:00:00 AM" >
                    <SpecialDays>
                        <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
                    </SpecialDays>
                </telerik:RadCalendar>
            </td>
            <td>
                <telerik:RadCalendar ID="RadCalendar3" runat="server" AutoPostBack="false" ShowRowHeaders="false" FocusedDate="1/1/2014 12:00:00 AM" >
                    <SpecialDays>
                        <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
                    </SpecialDays>
                </telerik:RadCalendar>
            </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Hope this helps!