Link to home
Start Free TrialLog in
Avatar of radhakrishan
radhakrishan

asked on

Calendar Trouble

Hello Experts,


I am designing a calendar and one thing is troubling me big time.
My day render is quiet simple, picking data from a datatable and then creating the hyperlinks.
Now, when the hyperlinks are created the text goes on two lines if the number of characters are more than 13, even though it could easily fit about 30 characters
as I can see.


Can anyone pls tell why this thing is happening, and why not text is on single line when it could be.


 Private Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender
       
        Dim datarow1 As DataRow()
        datarow1 = Bookings1.Select( _
        String.Format("Dateto>= #{0}# AND Dateto <#{1}# AND DayDifference = 0", _
         e.Day.Date.ToLongDateString(), e.Day.Date.AddDays(1).ToLongDateString(), e.Day.Date.AddDays(2).ToLongDateString()))

        For Each xlrow As DataRow In datarow1
           
            If counter < 5 Then
                Dim hyperLink As System.Web.UI.WebControls.HyperLink
                hyperLink = New System.Web.UI.WebControls.HyperLink
                With hyperLink
                    .ID = "myNewHyperLink"
                    .Text = "<BR>" + "Nitin Sharma trying 1"
                    .NavigateUrl = "javascript:window.open('BookingPage.aspx?@id=" & xlrow.Item(8) & "&@cid=" & Trim(DropDownList1.SelectedValue) & "&@ctext=" & Trim(DropDownList1.SelectedItem.Text) & "','newBookingPage', 'width=500,height=370, status=no toolbar=no');void(0);"
                    .ToolTip = Trim(xlrow.Item(0)) + Trim(xlrow.Item(4)) + " - " + Trim(xlrow.Item(5))
                End With
                e.Cell.Controls.Add(hyperLink)
            End If
            e.Cell.BackColor = Color.Aqua
        Next

    End Sub
Avatar of Ramuncikas
Ramuncikas
Flag of Lithuania image

With hyperLink
...
.Width = New Web.UI.WebControls.Unit(100, UnitType.Percentage)
...
End with
Avatar of radhakrishan
radhakrishan

ASKER

Hi Ramuncikas,

I tried it but it still exactly the same problem, rather doing that the spacing between two lines always increases.
Could you post Page source (a hyperlink part only) from a browser please
4</a><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<a id="newHyperLink" title="Complete View" href="javascript:window.showModalDialog('Daydescription.aspx?@cid=1&amp;@did=04/07/2006&amp;@ctext=Rooms&amp;@dday=11/07/2006 00:00:00','', 'dialogHeight: 400px; dialogWidth: 650px; status:no; resizable: yes; edge: raised'); ">Expand</a>
<a id="newHyperLink" title="Room A 08:00-08:15" href="javascript:window.open('BookingPage.aspx?@id=86&amp;@cid=1&amp;@ctext=Rooms','newBookingPage', 'width=500,height=420, status=no toolbar=no');void(0);">
<BR>Room A 08:00</a>
<a id="newHyperLink" title="Room A 09:00-21:30" href="javascript:window.open('BookingPage.aspx?@id=81&amp;@cid=1&amp;@ctext=Rooms','newBookingPage', 'width=500,height=420, status=no toolbar=no');void(0);">
<BR>Room A 09:00</a>
If I change this from:
Room A 08:00
to
Room A 08:00 xxxxxxx

It would take it to next line and show like
Room A 08:00
xxxxxxx
Add this:

With hyperLink
...
.BorderStyle = BorderStyle.Solid
.BorderWidth = 1
...
End with

and see how your hyperlink expands.
Calendar is rendered as a table and has default cellspacing and cellpadding set. Maybe it is worth to try to add a CSS file and override your calendars styles.
I can point you towards a ready-made event-calendar.

http://www.codeproject.com/aspnet/MellDataCalendar.asp

I think it's in C#, but you don't need to do any real coding yourself.

Hope this helps.
Hi,

I tried to do that thing and it still does not solve the problem.
I actually found the problem and its that in every cell a <td> is created and the height and width of that <td> is 100px if I remove that thing and make it a html page it works fine as i would expect everything coming on one line..

But because its system generated settings how can i actually make that not to happen?

Try removing the width value of a calendar.
The trouble is I am not setting the width anywhere:

--Code:

<td title=" Toshiba Tec. 09:00 - 09:30" align="Left" valign="Top" onmouseover="onOverDay(this, '#FFE0C0');"
onmouseout="onOutDay(this);" style="background-color:#E5E5EF;border-width:1px;border-style:Solid;height:100px;width:100px;">

<a href="javascript:__doPostBack('Calendar1','2384')" style="color:Black">12</a>

<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><a id="newHyperLink" title="Complete View" href="javascript:window.showModalDialog('Daydescription.aspx?@cid=2&amp;@did=12/07/2006&amp;@ctext=Laptops&amp;@dday=13/07/2006 00:00:00','', 'dialogHeight: 400px; dialogWidth: 650px; status:no; resizable: yes; edge: raised'); ">Expand</a>

<a id="newHyperLink" title="Toshiba Tec. 09:00-09:30" href="javascript:window.open('BookingPage.aspx?@id=131&amp;@cid=2&amp;@ctext=Laptops','newBookingPage', 'width=500,height=420, status=no toolbar=no');void(0);"><BR>Toshiba Tec. 09:00</a><span>*</span></td>


If I dreamweaver I remove this from
<td title=" Toshiba Tec. 09:00 - 09:30" align="Left" valign="Top" onmouseover="onOverDay(this, '#FFE0C0');"
onmouseout="onOutDay(this);" style="background-color:#E5E5EF;border-width:1px;border-style:Solid;height:100px;width:100px;">

to

<td title=" Toshiba Tec. 09:00 - 09:30" align="Left" valign="Top" onmouseover="onOverDay(this, '#FFE0C0');"
onmouseout="onOutDay(this);" style="background-color:#E5E5EF;border-width:1px;border-style:Solid;">

It seems to work fine, and take it all the way  down.


My style sheet for calendar looks like this:

<style>
.CalStyle { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 8pt; PADDING-BOTTOM: 5px; WORD-SPACING: 0px; PADDING-TOP: 5px; FONT-FAMILY: Verdana; WHITE-SPACE: normal; LETTER-SPACING: -1px; CellPadding: "0"; CellSpacing: "1"; BorderColor: "Black" }
</style>

<asp:calendar id="Calendar1" style="Z-INDEX: 105; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server"
CssClass="CalStyle" Width="1232px" PrevMonthText="Backward" NextMonthText="Forward" Height="664px"
BorderColor="Black">

<asp:calendar id="Calendar1" style="Z-INDEX: 105; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server"
CssClass="CalStyle" Width="1232px" PrevMonthText="Backward" NextMonthText="Forward" Height="664px"
BorderColor="Black">

Width="1232px"??? See that?
Thats really the width to make the calendar display on complete page size.
If I remove that then still the problem exist, as the size is calendar is half the size set in that width...


But don't u know Calendar width and Cell Width ( <td> width) are two different things completely.
and when I can see from the calendar that it could easily fit that in but still its not able to do it...


<td title=" Toshiba Tec. 09:00 - 09:30" align="Left" valign="Top" onmouseover="onOverDay(this, '#FFE0C0');"
onmouseout="onOutDay(this);" style="background-color:#E5E5EF;border-width:1px;border-style:Solid;height:100px;width:100px;">


What I don't understand is that where this
height:100px;width:100px; above is coming from, if I remove this then it seems to work.

ASKER CERTIFIED SOLUTION
Avatar of Ramuncikas
Ramuncikas
Flag of Lithuania image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Fantastic,

Cheers matey I found the reason in Daystyle property i was setting that height and width to be 100px.

thanks for directing me in the rite way.

Much appreciated.

{I can ave lunch now! hehe}