locked
Customizing Calendar control RRS feed

  • Question

  • User-19399675 posted

    Hello
    We are using asp:Calendar control (month view) in our touch screen application (asp web forms). When user touches the day on the month, it fires the on click event. The issue that was brought up, that user has to press exactly on the number, or the click event won't fire up. My boss wants us to change it, that if user presses anywhere in the date cell, it should fire the event. I looked into adding the button or link or hidden field into the cell on rendering (script), but have not found a way to attach click event... Is there any way to accomplish it? If not - is there any other control that would show the whole month and be customizable?
    Thanks!

    Friday, March 3, 2017 3:35 PM

All replies

  • User-271186128 posted

    Hi asanders2552,

    looked into adding the button or link or hidden field into the cell on rendering (script), but have not found a way to attach click event...

    Please try to use OnDayRender event to create an onclick event on calendar date cell.
    And use the onclick event to call a js function.
    Then in the js function fire button click event.
    For example:

    In aspx:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.1.1.js"></script>
        <script>
            function cal() {
                __doPostBack("Button1", "OnClick");
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div runat="server">
                <asp:Calendar ID="Calendar1" runat="server"  OnDayRender="Calendar1_DayRender"  >
                    <DayStyle   />
                    
                </asp:Calendar>
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Visible="false" />
            </div>
        </form>
    </body>
    

    Code behind:

    protected void Page_Load(object sender, EventArgs e)
            {
                Calendar1.CellSpacing = 5;
                Calendar1.CellPadding=5;
            }
        
            protected override void Render(HtmlTextWriter writer)
            {
                ClientScript.RegisterForEventValidation(Button1.UniqueID, "OnClick");
                base.Render(writer);
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                //do something 
            }
          
            protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
            {
                var cell = e.Cell;
                cell.Attributes.Add("OnClick","cal()");
            }
    
    

    Best regards,
    Dillion

    Monday, March 6, 2017 8:22 AM