how to calendar_selectionchanged event to raise a div region . ?

[sureshl]

In my calandar_select ionchanged event .. am showing a div region in my page on the top of the calendar .
Like www.bytes.com on clicking Login You will find a small page opens similarly which i want
Sameway, i want to open a div region on below to the selected date...how can it be made ..
am using vs2005 vb.net code ajax ...

This is the div region should open on every calendar_select ionchanged event...
[code=html]
<div id="daydetail" runat="server" visible="false" >
<h2>Details for <span id="selectedday " runat="server" /></h2>
<span id="daydetail_r ender" runat="server" />
<asp:TextBox ID="TextBox2" runat="server"> </asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"> </asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>[/code]

vb.net

Public Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
        myCommand = New SqlCommand("Date1", myConnection)
        myCommand.CommandType = CommandType.StoredProcedure
        Dim parameter_Date As New SqlParameter("@_Date", SqlDbType.DateTime, 8)
        parameter_Date.Value = Calendar1.SelectedDate
        myCommand.Parameters.Add(parameter_Date)
        myConnection.Open()
        myDataReader = myCommand.ExecuteReader()
        Dim temp As String = ""
        While (myDataReader.Read())
            temp &= "Title : <a href=""somepage.aspx?ID=" & myDataReader.Item("id") & """>" & myDataReader.Item("Country") & "</a><br><br>Email : " & myDataReader.Item("State") & "<br>"     ' This Is the div region which ll be displayed  
        End While
        daydetail.Visible = True
        daydetail_render.InnerHtml = temp
        myDataReader.Close()
        myConnection.Close()
        selectedday.InnerHtml = Calendar1.SelectedDate.ToString("MMM d, yyyy")
        tempDate = Calendar1.SelectedDate
        Get_DBItems()
    End Sub

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Calendar1" EventName="SelectionChanged" />
              </Triggers>
                <ContentTemplate>
                <div id="daydetail" runat="server" visible="false">
                <h2>Details for <span id="selectedday" runat="server" /></h2>
                <span id="daydetail_render" runat="server" />
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </div>
         <asp:Calendar OnDayRender="Calendar1_DayRender" 
           OnSelectionChanged="Calendar1_SelectionChanged"
        OnVisibleMonthChanged="MonthChanged"
           Runat="server" id="Calendar1">
    </asp:Calendar><br><br>
                    <asp:TextBox ID="TextBox1" runat="server" Style="position: relative"></asp:TextBox>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>

[Frinavale]

Change your "daydetail" <div> into a Panel.
Panels are rendered as <div>'s. This will give you away to set the style property of the "daydetail" section in order to display it.

For example:

daydetail.style.remove("display")
daydetail.style.add("display","block")
daydetail.style.remove("position")
daydetail.style.add("position","absolute")

Or you can set it's CSS class:

daydetail.CssClass = "theCssClassToDisplayTheDiv"

Also it would be a good idea to change your <span>'s into Labels.
Labels are rendered in <span> tags.
This way you can easily set the text...So instead of having:

selectedday.InnerHtml="...."

You'd simply have:

selectedday.Text="...."

I have a feeling you'll be interested in checking out the Ajax Calendar Extender

-Frinny

[semomaniz]

i think you need to write a javascript function that changes the Div visibility to true and put the on OnClientClick event.

[semomaniz]

and also you have to have a return false included on it.

[Frinavale]

The problem with this is, in order for the calendar control to work it has to postback to the server.

So if you write JavaScript to display the <div>, it will be undone when the postback happens. It was suggested that you have the JavaScript return False, but this will only prevent the postback from happening....wh ich means that the calendar control won't be able to work properly.

That's why I suggested that you implement a server side solution...and take a look at the Ajax Calendar extensions available.

[sureshl]

can u help me how to do it in ajax calendar, am quite new to ajax .....

[Frinavale]

First I recommend going to that link I sent you.
Download the Ajax Tool Kit and install it according to their directions.
After that go back to that link, read it and watch the tutorial video (found near the bottom).

If you are still having problems with it, ask :)