• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 408
  • Last Modified:

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
0
radhakrishan
Asked:
radhakrishan
  • 7
  • 6
1 Solution
 
RamuncikasCommented:
With hyperLink
...
.Width = New Web.UI.WebControls.Unit(100, UnitType.Percentage)
...
End with
0
 
radhakrishanAuthor Commented:
Hi Ramuncikas,

I tried it but it still exactly the same problem, rather doing that the spacing between two lines always increases.
0
 
RamuncikasCommented:
Could you post Page source (a hyperlink part only) from a browser please
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
radhakrishanAuthor Commented:
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>
0
 
radhakrishanAuthor Commented:
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
0
 
RamuncikasCommented:
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.
0
 
DarkXiphoidCommented:
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.
0
 
radhakrishanAuthor Commented:
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?

0
 
RamuncikasCommented:
Try removing the width value of a calendar.
0
 
radhakrishanAuthor Commented:
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">

0
 
RamuncikasCommented:
<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?
0
 
radhakrishanAuthor Commented:
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.

0
 
RamuncikasCommented:
Tes, I know that table and table cell differ :) But I also asume that if there is a setting for a width property of a calendar, then rendering engine should count widths of all <td>s.
Also pay attention to these properties of calendar:
  DayHeaderStyle
  DayStyle
  OtherMonthDayStyle
  SelectedDayStyle
  TodayDayStyle
  WeekendDayStyle

All of these have subproperty Width. Maybe somewhere there is a setting that makes calendar to be rendered like this.
MS IDE's have a command called "Autoformat" for calendar. If you choose remove formating in that dialog, then all formatting properties are cleared. Does dreamweaver have anything like this
0
 
radhakrishanAuthor Commented:
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}
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now