locked
AJAX calendar extrender control event to initiate javascript RRS feed

  • Question

  • User-359936451 posted

    I have an AJAX calendar extender on a textbox. I am trying to bold certain dates based on an array that is sent to javascript using a script manager from VB code behind. The process is working great for the current month only.

    I am updating the style to BOLD on the calendar when AJAX onClientShown event fires.

    My issue is when the month is changed, it appears I need to again process my date array for the new month that the user may have advanced the calendar to.

    I can not figure out how to fire the javascript function again when the AJAX calendar extender control advances months.

    ASPX....

        <asp:CalendarExtender ID="TextBox2_CalendarExtender" BehaviorID = "_Calendar1"          runat="server" Enabled="True" TargetControlID="TextBox2" OnClientShown="boldCalDTS" >

    The javascript just searches for the title tags which are the dates in the array and changes the style.

     

    Tuesday, October 15, 2013 3:39 PM

Answers

  • User-417640953 posted

    Hi march11,

    Thanks for your response.

    For this issue, there is an example below.

    <head runat="server">
        <title></title>
         <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
         <script>
            //test data.
             var dates = new Array();
             dates.push("2013/07/10");
             dates.push("2013/08/18");
             dates.push("2013/09/13");
             dates.push("2013/10/19");
             dates.push("2013/11/10");
             dates.push("2013/11/20");
             dates.push("2013/12/20");
             function IsExist(dates, strdate) {
                 for (var i = 0; i < dates.length; i++) 
                 {
                     if (dates[i] == strdate)
                         return true;
                 }
    
             }
              //change the style
              function setBold() { 
                  $(".ajax__calendar_day").css("font-weight", "normal");
                  $(".ajax__calendar_day").each(function () {
                      //change the bold style which included in your array 
                      if (IsExist(dates, (new Date($(this).attr("title"))).format("yyyy/MM/dd"))) {
                          $(this).css("font-weight", "bold");
                      }
                  });
                
              }
             function boldCalDTSAndBindEvent() { 
                 setBold();
    
                 $(".ajax__calendar_next").on("click", function () {
                     setBold();
                     $("#TextBox1").blur().focus();
                 });
    
                 $(".ajax__calendar_prev").on("click", function () {
                     setBold();
                     $("#TextBox1").blur().focus();
                 });
             }
             function UnBindEvent() {
                 $(".ajax__calendar_next").off("click");
                 $(".ajax__calendar_prev").off("click");
             }
            
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div style=" font-weight:normal">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            </asp:ToolkitScriptManager>
             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
             <asp:CalendarExtender ID="CalendarExtender1" runat="server"   BehaviorID = "_Calendar1" TargetControlID="TextBox1" OnClientHidden="UnBindEvent" OnClientShown ="boldCalDTSAndBindEvent"></asp:CalendarExtender>
             
        </div>
        </form>
    </body>

    It works fine, please try it. If has any doubt, feel free to back. Thanks.

     

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 16, 2013 10:25 AM

All replies

  • Tuesday, October 15, 2013 11:58 PM
  • User-417640953 posted

    Hi march11,

    Thanks for your post.

    From your description, I see that you want to change the day cell style which in the CalendarExtender.

    And you can change the day cells style in current month. In order to change the day cells style when month changed, I suggest

    you bind a click event to month next button and prev button. Like below.

    <head runat="server">
        <title></title>
        <script src="../../Scripts/jquery-1.7.1.js"></script>
        <script>
            function boldCalDTSAndBindEvent() {
               
                $(".ajax__calendar_day").each(function () {
                    //change the bold style which included in your array
                    //........
                });
                
                $(".ajax__calendar_next").on("click", function () {
    
                    $(".ajax__calendar_day").each(function () {
                        //change the bold style which included in your array
                        //........
                    });
                     
                });
                $(".ajax__calendar_prev").on("click", function () {
                      //change the bold style which included in your array
                      //......
                });
            }
            function UnBindEvent() {
                $(".ajax__calendar_next").off("click");
                $(".ajax__calendar_prev").off("click");
            }
            
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="CalendarExtender1" runat="server"   BehaviorID = "_Calendar1" TargetControlID="TextBox1" OnClientHidden="UnBindEvent" OnClientShown="boldCalDTSAndBindEvent"></asp:CalendarExtender>
           <div id="MyDiv"></div>
        </div>
        </form>
    </body>

    Hope this helps. Thanks.

     

    Best Regards!

    Wednesday, October 16, 2013 2:54 AM
  • User-359936451 posted

    Hello Fuxiang,

     

    Your solution has gotten me a bit closer, Thank You.

    When I change months the correct dates for the new month are bolded. BUT the same cell from the previous month is also still bolded, it does not reset back to unbolded.

    After navigating to 3rd month, all of the event date cell locations in 3rd month are bolded from the locations of 1st, and 2nd month.

    Appears I need to reset the style for all days in new month before applying bold style to event dates.

    Not sure on how to do that.

     

     

     

    Wednesday, October 16, 2013 8:39 AM
  • User-417640953 posted

    Hi march11,

    Thanks for your response.

    For this issue, there is an example below.

    <head runat="server">
        <title></title>
         <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
         <script>
            //test data.
             var dates = new Array();
             dates.push("2013/07/10");
             dates.push("2013/08/18");
             dates.push("2013/09/13");
             dates.push("2013/10/19");
             dates.push("2013/11/10");
             dates.push("2013/11/20");
             dates.push("2013/12/20");
             function IsExist(dates, strdate) {
                 for (var i = 0; i < dates.length; i++) 
                 {
                     if (dates[i] == strdate)
                         return true;
                 }
    
             }
              //change the style
              function setBold() { 
                  $(".ajax__calendar_day").css("font-weight", "normal");
                  $(".ajax__calendar_day").each(function () {
                      //change the bold style which included in your array 
                      if (IsExist(dates, (new Date($(this).attr("title"))).format("yyyy/MM/dd"))) {
                          $(this).css("font-weight", "bold");
                      }
                  });
                
              }
             function boldCalDTSAndBindEvent() { 
                 setBold();
    
                 $(".ajax__calendar_next").on("click", function () {
                     setBold();
                     $("#TextBox1").blur().focus();
                 });
    
                 $(".ajax__calendar_prev").on("click", function () {
                     setBold();
                     $("#TextBox1").blur().focus();
                 });
             }
             function UnBindEvent() {
                 $(".ajax__calendar_next").off("click");
                 $(".ajax__calendar_prev").off("click");
             }
            
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div style=" font-weight:normal">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            </asp:ToolkitScriptManager>
             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
             <asp:CalendarExtender ID="CalendarExtender1" runat="server"   BehaviorID = "_Calendar1" TargetControlID="TextBox1" OnClientHidden="UnBindEvent" OnClientShown ="boldCalDTSAndBindEvent"></asp:CalendarExtender>
             
        </div>
        </form>
    </body>

    It works fine, please try it. If has any doubt, feel free to back. Thanks.

     

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 16, 2013 10:25 AM
  • User316927232 posted

    Dear Fuxiang,

    I've tried your example on my project but unfortunatly when I change month the dates stored into the Javascript Array are for the new month are not the good one. It's like of the I keep the index of the date for the last month.

    Any ideas ?

    Best Regards

    Wednesday, December 18, 2013 3:31 AM