locked
AJAX Calendar Extender customization questions RRS feed

  • Question

  • User-1352156089 posted

    Hi All,

     I am working on a AJAX calendar extender and I would like to understand what is the best mothod that one should follow in order to:

    • When we open the calendar via AJAX calendar extender and we are in a month, let's say April, this month is also populated with some days belonging to May and some belonging to March. Is it possible to completely remove those days that do not belong to the month selected?
    • When we pass the mouse over a day, we see that there is a small tooltip coming up. This is because if we look at the HTML code generated by AJAX the div contains the "title" tag: is it possible to get rid of this?
    <div id="MainContent_CalendarExtender2_day_2_6" class="ajax__calendar_day" title="Sunday, April 19, 2015">19</div>
    • How can I disable the functionality to navigate in the month and year views? To better explain myself, when we open the calendar we see that in the header of it the month and year is shown as a link. If you click on this link you navigate to the month view and then on the year view.

    • Imagine we have 2 calendar extender (FROM - TO). How can I disable in the  TO Calendar extender the days prior to the date selected in the FROM calendar? As for example, if I select April 1st in the FROM Calendar, how can I disable all dates from Jan 1st to April 1st  in the TO calendar?

    • Possibly, is there a way to show a 2 month calendar instead of the default 1 month view?

    Thank you so much

    Thursday, April 2, 2015 12:37 PM

Answers

  • User2103319870 posted

    When we open the calendar via AJAX calendar extender and we are in a month, let's say April, this month is also populated with some days belonging to May and some belonging to March. Is it possible to completely remove those days that do not belong to the month selected?

    AFAIK you cannot change the default behavior of data display in CalendarExtender Control.However If you are looking for a solution to show only the current month or selected month dates. then you can try with the below css solution

     <style>
            .ajax__calendar_other .ajax__calendar_day,
            .ajax__calendar_other .ajax__calendar_year {
                display: none !important;
            }
    
          
        </style>

    Above css style will hide all other days except current month dates.

    Complete Code:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            .ajax__calendar_other .ajax__calendar_day,
            .ajax__calendar_other .ajax__calendar_year {
                display: none !important;
            }
    
          
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
                <asp:TextBox ID="A" runat="server"></asp:TextBox>
                <ajaxToolkit:CalendarExtender ID="AjaxCalendarExtender1" runat="server" TargetControlID="A"
                            CssClass="cssCalendar" Format="yyyy/MM/dd" PopupButtonID="img1" />
            </div>
        </form>
    </body>
    </html>

    Rendered Output:

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 2, 2015 2:25 PM
  • User2103319870 posted

    Imagine we have 2 calendar extender (FROM - TO). How can I disable in the  TO Calendar extender the days prior to the date selected in the FROM calendar? As for example, if I select April 1st in the FROM Calendar, how can I disable all dates from Jan 1st to April 1st  in the TO calendar?

    You can try with the below code

      <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release"
                CombineScripts="false">
            </ajax:ToolkitScriptManager>
            From
            <asp:TextBox ID="txtTo" runat="server"></asp:TextBox>
            <ajax:CalendarExtender ID="FromCalendarExtender" runat="server" TargetControlID="txtTo"
                OnClientDateSelectionChanged="OnClientDateSelectionChanged" />
            <script type="text/javascript">
                function OnClientDateSelectionChanged(sender, args) {
                    //Disable selected dates in TOCalendar
                    $find("<%=TOCalendarExtender.ClientID %>").set_startDate(sender._selectedDate);
                }
            </script>
            To<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <ajax:CalendarExtender ID="TOCalendarExtender" runat="server" TargetControlID="TextBox2" />

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 2, 2015 2:52 PM
  • User61956409 posted

    Hi Claudio7810,

    Thanks for your post.

    When we pass the mouse over a day, we see that there is a small tooltip coming up. This is because if we look at the HTML code generated by AJAX the div contains the "title" tag: is it possible to get rid of this?

    You could refer to the following code to change the title attribute.

    $(function () {
        $("#newExpDate").click(function () {
            $(".ajax__calendar_day").each(function () {
    
                var mes = "Hello Everyone";
                $(this).attr("title", mes);
    
            });
        });
    
    }) 
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 3, 2015 2:18 AM

All replies

  • User2103319870 posted

    When we open the calendar via AJAX calendar extender and we are in a month, let's say April, this month is also populated with some days belonging to May and some belonging to March. Is it possible to completely remove those days that do not belong to the month selected?

    AFAIK you cannot change the default behavior of data display in CalendarExtender Control.However If you are looking for a solution to show only the current month or selected month dates. then you can try with the below css solution

     <style>
            .ajax__calendar_other .ajax__calendar_day,
            .ajax__calendar_other .ajax__calendar_year {
                display: none !important;
            }
    
          
        </style>

    Above css style will hide all other days except current month dates.

    Complete Code:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            .ajax__calendar_other .ajax__calendar_day,
            .ajax__calendar_other .ajax__calendar_year {
                display: none !important;
            }
    
          
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
                <asp:TextBox ID="A" runat="server"></asp:TextBox>
                <ajaxToolkit:CalendarExtender ID="AjaxCalendarExtender1" runat="server" TargetControlID="A"
                            CssClass="cssCalendar" Format="yyyy/MM/dd" PopupButtonID="img1" />
            </div>
        </form>
    </body>
    </html>

    Rendered Output:

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 2, 2015 2:25 PM
  • User2103319870 posted

    Imagine we have 2 calendar extender (FROM - TO). How can I disable in the  TO Calendar extender the days prior to the date selected in the FROM calendar? As for example, if I select April 1st in the FROM Calendar, how can I disable all dates from Jan 1st to April 1st  in the TO calendar?

    You can try with the below code

      <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release"
                CombineScripts="false">
            </ajax:ToolkitScriptManager>
            From
            <asp:TextBox ID="txtTo" runat="server"></asp:TextBox>
            <ajax:CalendarExtender ID="FromCalendarExtender" runat="server" TargetControlID="txtTo"
                OnClientDateSelectionChanged="OnClientDateSelectionChanged" />
            <script type="text/javascript">
                function OnClientDateSelectionChanged(sender, args) {
                    //Disable selected dates in TOCalendar
                    $find("<%=TOCalendarExtender.ClientID %>").set_startDate(sender._selectedDate);
                }
            </script>
            To<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <ajax:CalendarExtender ID="TOCalendarExtender" runat="server" TargetControlID="TextBox2" />

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 2, 2015 2:52 PM
  • User61956409 posted

    Hi Claudio7810,

    Thanks for your post.

    When we pass the mouse over a day, we see that there is a small tooltip coming up. This is because if we look at the HTML code generated by AJAX the div contains the "title" tag: is it possible to get rid of this?

    You could refer to the following code to change the title attribute.

    $(function () {
        $("#newExpDate").click(function () {
            $(".ajax__calendar_day").each(function () {
    
                var mes = "Hello Everyone";
                $(this).attr("title", mes);
    
            });
        });
    
    }) 
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 3, 2015 2:18 AM
  • User-1352156089 posted

    Hi A2H,

    thank you so much for your feedbacks.

    The CSS style you suggested is exactly what I was looking for and it's working perferctly!!

    However, the script you suggested doesn't "remove" or strike out the dates in the TOCalendar as per above requirements, which were to disable the dates in the TOCalendar extender which are previous to the date selected in the FROMCalendar extender.

    Could you suggest some other code?

    Thanks

    Friday, April 3, 2015 2:59 AM
  • User-1352156089 posted

    Hi Fei Han,

    thank you for your feedback.

    Is "newExpDate" the ID of the calendar extender? I am asking this because the code it's not working for the purpose of:

    "When we pass the mouse over a day, we see that there is a small tooltip coming up. This is because if we look at the HTML code generated by AJAX the div contains the "title" tag: is it possible to get rid of this?"

    Thanks a lot

    Friday, April 3, 2015 3:04 AM
  • User61956409 posted

    Hi Claudio7810,

    Claudio7810

    Is "newExpDate" the ID of the calendar extender?

    It is TargetControlID of ajax calendar extender.

    With Regards,

    Fei Han

    Friday, April 3, 2015 4:44 AM
  • User-1352156089 posted

    Thank you all but I am going to use JQuery datepicker.

    Saturday, April 4, 2015 2:55 PM