locked
CalendarExtender Blackout Dates RRS feed

  • Question

  • User1556928295 posted

    Ok here's one I have had a hard time getting a straight answer for. I'm trying to black out 14 days from todays date on my calendarextender.  I have this;

                tbDateOfDelivery_CalendarExtender.StartDate = DateTime.Now
                tbDateOfDelivery_CalendarExtender.EndDate = DateTime.Now.AddDays(14)

    which will blackout all dates except for the 14 days starting with today. However, I want the opposite of what this is doing and blackout ONLY those 14 days.

    Tuesday, May 5, 2015 9:15 AM

All replies

  • User-1965857832 posted

    You just need to set the StartDate as below (delete the other line)

    tbDateOfDelivery_CalendarExtender.StartDate = DateTime.Now.AddDays(14)

    Tuesday, May 5, 2015 9:49 AM
  • User1556928295 posted

    Ok that got me the 14 days after today, but it also blocked out the days prior to today as well. Those need to be open.

    Tuesday, May 5, 2015 10:03 AM
  • User61956409 posted

    Hi liefie2000,

    Thanks for your post.

    You could refer to the following sample to dynamically make specific dates invalid using jQuery.

    <div>
        <asp:TextBox ID="tbDateOfDelivery" runat="server"></asp:TextBox>
        <asp:CalendarExtender ID="tbDateOfDelivery_CalendarExtender" runat="server" TargetControlID="tbDateOfDelivery"></asp:CalendarExtender>
    </div> 
    
    <script>
        $(function () {
            $("#tbDateOfDelivery").click(function () {
                var n = 0;
                $("td").each(function () {
                    //get Today's date 
                    if ($(this).hasClass("ajax__calendar_today")) {
                        n = n + 1;
                        //make it invalid
                        $(this).addClass("ajax__calendar_invalid");
                    }
    
                    if (0 < n && n < 16) {
                        n = n + 1;
                        $(this).addClass("ajax__calendar_invalid");
                    }
                })
            });
        })
    </script> 
    

    Best Regards,

    Fei Han



    Wednesday, May 6, 2015 1:53 AM
  • User1556928295 posted

    I put;

        <script src="jquery/SiteJS.js" type="text/javascript">
    
        $(function () {
            $("#tbDateOfDelivery").click(function () {
                var n = 0;
                $("td").each(function () {
                    //get Today's date 
                    if ($(this).hasClass("ajax__calendar_today")) {
                        n = n + 1;
                        //make it invalid
                        $(this).addClass("ajax__calendar_invalid");
                    }
    
                    if (0 < n && n < 16) {
                        n = n + 1;
                        $(this).addClass("ajax__calendar_invalid");
                    }
                })
            });
        })
    
        </script>
    

    Into my code and the function never gets called. Shouldn't there be something in the;

                                                    <asp:CalendarExtender ID="tbDateOfDelivery_CalendarExtender" runat="server" TargetControlID="tbDateOfDelivery">
                                                    </asp:CalendarExtender>

    to call the function?

    Wednesday, May 6, 2015 9:11 AM
  • User61956409 posted

    Hi liefie2000,

    Here is my complete sample code, please create a new web page to test it.

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <div>
                <asp:TextBox ID="tbDateOfDelivery" runat="server"></asp:TextBox>
                <asp:CalendarExtender ID="tbDateOfDelivery_CalendarExtender" runat="server" TargetControlID="tbDateOfDelivery"></asp:CalendarExtender>
            </div>
        </form>
    </body>
    </html>
    <script>
        $(function () {
            $("#tbDateOfDelivery").click(function () {
                var n = 0;
                $("td").each(function () {
                    //get Today's date 
                    if ($(this).hasClass("ajax__calendar_today")) {
                        n = n + 1;
                        //make it invalid
                        $(this).addClass("ajax__calendar_invalid");
                    }
    
                    if (0 < n && n < 16) {
                        n = n + 1;
                        $(this).addClass("ajax__calendar_invalid");
                    }
                })
            });
        })
    </script> 
    

    Best Regards,

    Fei Han

    Sunday, June 7, 2015 2:50 AM
  • User1556928295 posted

    I added;

        <script src="jquery/SiteJS.js" type="text/javascript">
            $(function() {
                $("#tbDateOfDelivery").click(function() {
                    var n = 0;
                    $("td").each(function() {
                        //get Today's date 
                        if ($(this).hasClass("ajax__calendar_today")) {
                            n = n + 1;
                            //make it invalid
                            $(this).addClass("ajax__calendar_invalid");
                        }
    
                        if (0 < n && n < 16) {
                            n = n + 1;
                            $(this).addClass("ajax__calendar_invalid");
                        }
                    })
                });
            })
    
        </script>
    
    <asp:TextBox ID="tbDateOfDelivery" runat="server" MaxLength="30" ToolTip="99/99/9999"
        BackColor="PaleGoldenrod" Style="text-align: left" Font-Names="Calibri" TabIndex="20"></asp:TextBox>
    <asp:MaskedEditExtender ID="tbDateOfDelivery_MaskedEditExtender" runat="server" CultureAMPMPlaceholder=""
        CultureCurrencySymbolPlaceholder="" CultureDateFormat="" CultureDatePlaceholder=""
        CultureDecimalPlaceholder="" CultureThousandsPlaceholder="" CultureTimePlaceholder=""
        Enabled="True" Mask="99/99/9999" MaskType="Date" TargetControlID="tbDateOfDelivery"
        Century="2000">
    </asp:MaskedEditExtender>
    <asp:CalendarExtender ID="tbDateOfDelivery_CalendarExtender" runat="server" TargetControlID="tbDateOfDelivery">
    </asp:CalendarExtender>

    And it does nothing.

    Monday, June 8, 2015 10:01 AM
  • User943154038 posted

    Hi Fei Han,

    I am pretty impressed by your post. I did try that and it almost worked for me.

    What my issue is that,
    a] I am trying to DISABLE "ALL THE DATES SEVEN DAYS NEXT TO TODAY, INCLUDING PAST DATES AND FUTURE DATES AS WELL".
    b]  I have achieved it by setting the start date property of the Calendar Extender to +7 days from today in .cs file (Code Behind), everything seems to work fine to me, I found a dead end when this CalendarExtender is not working in IE8, which shows all the dates as ENABLED. (WHICH IS MY BIGGEST PROBLEM).

    C] Trying your solution , i dont find the disabled dates foor the FIRST TIME , because it doesn't find the "ajax__calendar_today" css for the first time, thereafter it finds it always.
    d] It doesn't apply the disabled date feature if i hit any other event in the same CalendarExtender.

    Any help would be appreciated.
    Please provide me your valuable suggestion.

    Wednesday, November 18, 2015 1:05 PM
  • User943154038 posted

    Hi liefie2000,

    Here is my complete sample code, please create a new web page to test it.

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <div>
                <asp:TextBox ID="tbDateOfDelivery" runat="server"></asp:TextBox>
                <asp:CalendarExtender ID="tbDateOfDelivery_CalendarExtender" runat="server" TargetControlID="tbDateOfDelivery"></asp:CalendarExtender>
            </div>
        </form>
    </body>
    </html>
    <script>
        $(function () {
            $("#tbDateOfDelivery").click(function () {
                var n = 0;
                $("td").each(function () {
                    //get Today's date 
                    if ($(this).hasClass("ajax__calendar_today")) {
                        n = n + 1;
                        //make it invalid
                        $(this).addClass("ajax__calendar_invalid");
                    }
    
                    if (0 < n && n < 16) {
                        n = n + 1;
                        $(this).addClass("ajax__calendar_invalid");
                    }
                })
            });
        })
    </script> 
    

    Best Regards,

    Fei Han

    Hi Fei Han,

    I am pretty impressed by your post. I did try that and it almost worked for me.

    What my issue is that,
    a] I am trying to DISABLE "ALL THE DATES SEVEN DAYS NEXT TO TODAY, INCLUDING PAST DATES AND FUTURE DATES AS WELL".
    b]  I have achieved it by setting the start date property of the Calendar Extender to +7 days from today in .cs file (Code Behind), everything seems to work fine to me, I found a dead end when this CalendarExtender is not working in IE8, which shows all the dates as ENABLED. (WHICH IS MY BIGGEST PROBLEM).

    C] Trying your solution , i dont find the disabled dates foor the FIRST TIME , because it doesn't find the "ajax__calendar_today" css for the first time, thereafter it finds it always.
    d] It doesn't apply the disabled date feature if i hit any other event in the same CalendarExtender.

    Any help would be appreciated.
    Please provide me your valuable suggestion.

    Wednesday, November 18, 2015 1:16 PM