Urgent help: Calendar control and sql database

[rajarya_222]

Hello every1. I came across a code sample for event calendar display as per this page http://www.4guysfromrolla.com/articles/041603-1.2.aspx.
I wanted some urgent help. Its my humble request to all. Here is my situation: I have 3 fields in the table named as Lngr in Gssc.mdf database, namely: ID(Is Identity), date and Description of type date and VarChar(Max) respectively. I just want to simply display the description on the associated date within the calendar but when hovered on a cell of that date, if possible. One more thing I would like to add is that I am using C# with asp.net 3.5 and Sql Database with Sql Express.

Note: Hover part is not much necessary but just if possible, else we can click the date and the description associated with it will be displayed in some label or literal control.

Below I have given a link to the image for the way I want the calendar to display as. I am a starter in site development. so I request all the guys to please help me with less messy and clean solution. will be checking the thread in almost every hour or less time.

Sample Image

[Ribeyed]

Hi,

The calendar control has DayRender event. In your dayRender event you add an event to the cell attributes that will then create the pop up you require.

example code from: http://weblogs.sqlteam.com/jhermiz/a...-Calendar.aspx

Protected Sub Calendar13_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar13.DayRender
 	 Dim onmouseoverStyle As String = "this.style.backgroundColor='#D4EDFF'"
	 Dim onmouseoutStyle As String = "this.style.backgroundColor='@BackColor'"
	 Dim rowBackColor As String = String.Empty
            
	 e.Cell.Attributes.Add("onmouseover", onmouseoverStyle)
	 e.Cell.Attributes.Add("onmouseout", onmouseoutStyle.Replace("@BackColor", rowBackColor))
    
     If Not e.Day.IsWeekend Then
                e.Cell.Attributes.Add("onmouseover", onmouseoverStyle)
                e.Cell.Attributes.Add("onmouseout", onmouseoutStyle.Replace("@BackColor", rowBackColor))
     End If
 End Sub

you just need to adapt the code for your own needs.

regards

Ribs

[rajarya_222]

thnx for ur response... I got a few things to work, my code and markup is given below.... now wat I want is the popup part... I am using tooltip right now, which I dont want at all bcoz of its display... (small font, unwanted background color, etc), so can u get that popup somehow using hovermenu extender or by any other way as shown in my sample image...?

        <div id="clndrdiv" runat="server">
            <asp:Calendar OnDayRender="Calendar1_DayRender" OnSelectionChanged="Calendar1_SelectionChanged"
                OnVisibleMonthChanged="MonthChanged" DayStyle-Width="45px"
                DayStyle-HorizontalAlign="Left" DayStyle-VerticalAlign="Top" DayStyle-Font-Size="12"
                TitleStyle-Font-Bold="False" TitleStyle-Font-Size="12" runat="server" ID="Calendar1"
                SelectedDayStyle-BackColor="#faebd7" SelectedDayStyle-ForeColor="#000000" DayStyle-BorderStyle="Solid"
                DayStyle-BorderWidth="1" BorderWidth="1px" Font-Names="Verdana" 
                Font-Size="9pt" DayNameFormat="FirstTwoLetters"
                NextPrevFormat="FullMonth" Height="278px" Width="353px" BackColor="White" BorderColor="White"
                ForeColor="Black">
                <SelectedDayStyle BackColor="#333399" ForeColor="White" />
                <DayStyle HorizontalAlign="Left" VerticalAlign="Top" BorderWidth="1px" BorderStyle="Solid" CssClass="dystl"
                    Height="45px"></DayStyle>
                <NextPrevStyle Font-Bold="true" Font-Size="12pt" ForeColor="#333333" VerticalAlign="Bottom" />
                <DayHeaderStyle Font-Bold="True" ForeColor="White" BackColor="Black" Font-Size="16pt" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
                <TitleStyle Font-Bold="True" Font-Size="12pt" BackColor="White" BorderColor="Black"
                    BorderWidth="1px" ForeColor="#333399"></TitleStyle>
                <OtherMonthDayStyle ForeColor="Silver"/>
            </asp:Calendar>
        </div>
        <br />
        <asp:Image runat="server" ImageUrl="~/Masterimg/bookavail.png" />
        </center>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=localhost\SqlExpress;Initial Catalog=Gssc;Integrated Security=True"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Annctb] WHERE ([date] = @date)">
                <SelectParameters>
                    <asp:Parameter Name="date" DbType="Date" DefaultValue="@date" />
                </SelectParameters>
            </asp:SqlDataSource>
    </div>

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
    {
        String Date, description;/*, linkStr;*/

        Date = e.Day.Date.ToString();
        e.Day.IsSelectable = false;
        e.Cell.HorizontalAlign = HorizontalAlign.Center;
        e.Cell.VerticalAlign = VerticalAlign.Middle;
        SqlConnection conn = new SqlConnection("Server=localhost\\SqlExpress;Database=Gssc;Integrated Security=True;Pooling=False;");
        SqlCommand comm = new SqlCommand(SqlDataSource1.SelectCommand, conn);
        comm.Connection = conn;
        comm.CommandType = CommandType.Text;
        comm.Parameters.Clear();
        comm.Parameters.AddWithValue("@date", Date);
        conn.Open();
        /*linkStr = "";*/

        SqlDataReader reader = comm.ExecuteReader(CommandBehavior.CloseConnection);
        if (reader.HasRows)
        {
            while (reader.Read())
            {
                description = reader["Description"].ToString();

                /*linkStr = "<span style=\"font-family:Arial; font-size:8pt; color:black\" title=\"" + description + "\"><br /></span>";
                e.Cell.Controls.Add(new LiteralControl(linkStr));*/
                e.Cell.BackColor = System.Drawing.Color.FromArgb(206,230,242);
                e.Cell.Style.Value = "font-family:Arial; height:48px; width:48px; font-size:18pt; font-Weight:bolder; Background-image:url('Masterimg/bookedbox.png'); background-repeat:no-repeat; color:black;";
                e.Cell.ToolTip = description;
            }
        }
        else
        {
            e.Cell.Style.Value = "font-family:Arial; height:48px; width:48px; Background-image:url('Masterimg/availbox.png'); background-repeat:no-repeat; font-size:18pt; font-Weight:bold; color:Black;";
            if (e.Day.IsOtherMonth)
            {
                e.Cell.Style.Value = "color:silver font-weight:bold;";
                e.Cell.BackColor = System.Drawing.Color.White;
            }
        }
    }

[Ribeyed]

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
    {
        String Date, description;/*, linkStr;*/

        Date = e.Day.Date.ToString();
        e.Day.IsSelectable = false;
        e.Cell.HorizontalAlign = HorizontalAlign.Center;
        e.Cell.VerticalAlign = VerticalAlign.Middle;
        SqlConnection conn = new SqlConnection("Server=localhost\\SqlExpress;Database=Gssc;Integrated Security=True;Pooling=False;");
        SqlCommand comm = new SqlCommand(SqlDataSource1.SelectCommand, conn);
        comm.Connection = conn;
        comm.CommandType = CommandType.Text;
        comm.Parameters.Clear();
        comm.Parameters.AddWithValue("@date", Date);
        conn.Open();
        /*linkStr = "";*/

        SqlDataReader reader = comm.ExecuteReader(CommandBehavior.CloseConnection);
        if (reader.HasRows)
        {
            while (reader.Read())
            {
                description = reader["Description"].ToString();

                /*linkStr = "<span style=\"font-family:Arial; font-size:8pt; color:black\" title=\"" + description + "\"><br /></span>";
                e.Cell.Controls.Add(new LiteralControl(linkStr));*/
                e.Cell.BackColor = System.Drawing.Color.FromArgb(206,230,242);
                e.Cell.Style.Value = "font-family:Arial; height:48px; width:48px; font-size:18pt; font-Weight:bolder; Background-image:url('Masterimg/bookedbox.png'); background-repeat:no-repeat; color:black;";
                e.Cell.ToolTip = description;
            }
        }
        else
        {
            e.Cell.Style.Value = "font-family:Arial; height:48px; width:48px; Background-image:url('Masterimg/availbox.png'); background-repeat:no-repeat; font-size:18pt; font-Weight:bold; color:Black;";
            if (e.Day.IsOtherMonth)
            {
                e.Cell.Style.Value = "color:silver font-weight:bold;";
                e.Cell.BackColor = System.Drawing.Color.White; 
                e.Cell.Attributes.Add("onmouseover", "ShowPopUp()");

            }
        }
    }

you can pass in some data at that point.

here is some example javascript for the popup:

code from: http://www.codeproject.com/KB/webforms/Tooltip.aspx

<script language="javascript">
function ShowTooltip(name,address,city,state,phone1,fax)
{
    document.getElementById("td0").innerText=name; 
    document.getElementById("td1").innerText=address;
    document.getElementById("td2").innerText=city;
    document.getElementById("td3").innerText=state;
    document.getElementById("td4").innerText=phone1;
    document.getElementById("td5").innerText=fax;
    x = event.clientX + document.body.scrollLeft;
    y = event.clientY + document.body.scrollTop + 10;
    Popup.style.display="block";
    Popup.style.le ft = x;
    Popup.style.top = y;
 }

function HideTooltip()
{
    Popup.style.display="none";
}
</script>

Again just the case of altering to suit your needs.


regards


Ribs

[rajarya_222]

I tried ur suggestion, but I am not able to get through with that... I dont know why, but my laptop is having some serious issues with javascript... I am very much tired of this... so can you plzz give me some code behind code...

[Ribeyed]

sorry but thats kind of rude, try fixing your laptop first and then try work with what is suggested, post your progress code. To say your to tired of this, it ain't my problem, I've gave you code but you not only want me to write it for you, you also want me to write it another way for you, sorry but you have no chance of that from me.

[rajarya_222]

I dont know how to correct those errors, and I didnt asked to write all the code for me... I am jst asking for suggestions like you gave earlier... I want alternative for javascript, thats all I am asking sir... I am new to this world, so I after trying many things for almost 1 month I decided to ask for guidance but not to provide me with a prepared recipe... I really apologise if you felt so...

[rajarya_222]

ok now I figured it out. if anybdy else needs it then plzz check this forum link...

http://forums.asp.net/p/1692242/4469...41849118587763