Solved

Calendar Trouble

Posted on 2006-07-11
14
382 Views
Last Modified: 2013-12-03
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
Comment
Question by:radhakrishan
  • 7
  • 6
14 Comments
 
LVL 14

Expert Comment

by:Ramuncikas
ID: 17080841
With hyperLink
...
.Width = New Web.UI.WebControls.Unit(100, UnitType.Percentage)
...
End with
0
 

Author Comment

by:radhakrishan
ID: 17081710
Hi Ramuncikas,

I tried it but it still exactly the same problem, rather doing that the spacing between two lines always increases.
0
 
LVL 14

Expert Comment

by:Ramuncikas
ID: 17081882
Could you post Page source (a hyperlink part only) from a browser please
0
 

Author Comment

by:radhakrishan
ID: 17082030
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
 

Author Comment

by:radhakrishan
ID: 17082051
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
 
LVL 14

Expert Comment

by:Ramuncikas
ID: 17082195
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
 
LVL 4

Expert Comment

by:DarkXiphoid
ID: 17089370
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:radhakrishan
ID: 17097893
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
 
LVL 14

Expert Comment

by:Ramuncikas
ID: 17098088
Try removing the width value of a calendar.
0
 

Author Comment

by:radhakrishan
ID: 17098159
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
 
LVL 14

Expert Comment

by:Ramuncikas
ID: 17098178
<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
 

Author Comment

by:radhakrishan
ID: 17098224
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
 
LVL 14

Accepted Solution

by:
Ramuncikas earned 500 total points
ID: 17098271
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
 

Author Comment

by:radhakrishan
ID: 17098312
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Problem to be resolved in this article Currently, development of website and web application can be done without writing thousands of lines of programming code by hand. Description This can be done through by using a open source framework such …
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now