Calendar Control and Text Clipping

subaru_sti

Active member
Joined
Jul 4, 2009
Messages
34
Programming Experience
Beginner
I have a calendar control on my page and inside one of the day squares, I have some text. I want to be able to keep the text on one line and clip it by adding an ellipsis (...) if the text is too long for the calendar square. Because the columns in the calendar change based on how big the screen is, the clipping isn't working. At the top of my code, I have a working example of the clipping which is using a div tag with a set width. Any ideas on how to do the same inside the calendar square?

aspx:

VB.NET:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>    
        .Clip
        {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 150px">
        <div class="Clip">This is a really long sentence to show clipping!</div>
    </div>    
    <br /><br />
    <div>
        <asp:Calendar 
                ID="Calendar1"
                DayStyle-Width="175" 
                DayStyle-Height="125"
                DayStyle-BorderColor="#DDDDDD" 
                DayStyle-BorderWidth="1"
                DayStyle-BorderStyle="Solid"
                DayStyle-HorizontalAlign= "Left"
                DayStyle-VerticalAlign="Top"
                runat="server">
        </asp:Calendar>
    </div>
    </form>
</body>
</html>

aspx.vb:

VB.NET:
Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Calendar1_DayRender(sender As Object, e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender
        If e.Day.Date.Day = 4 Then
            Dim panelEvent As New Panel
            panelEvent.CssClass = "Clip"
            panelEvent.Controls.Add(New LiteralControl("This is a really long sentence to show clipping!"))
            e.Cell.Controls.Add(panelEvent)
        End If
    End Sub
End Class
 
Like your other Div the Panel (renders as Div) need to have a width or max-width applied for the effect to take place.
 
Like your other Div the Panel (renders as Div) need to have a width or max-width applied for the effect to take place.

Is there a way to have it dynamic so that the calendar day column stays the same width as the rest? Since it changes, I cannot specify the div width.
 
Not that I'm aware of. You may have to use client-side script to get the actual rendered width of an element.
 
Okay, so I figured this out and thought I would post the code incase anyone else needs it.

You just have to ensure you do two things. Set the "td" tag to have a max-width of 1px. Secondly, set your calendar header to a specified width (DayHeaderStyle-Width="175")

aspx:

VB.NET:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>    
        td
        {
            max-width: 1px; 
        }
        .Clip
        {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 150px">
        <div class="Clip">This is a really long sentence to show clipping!</div>
    </div>    
    <br /><br />
    <div>
        <asp:Calendar 
                ID="Calendar1"
                DayStyle-Width="175" 
                DayStyle-Height="125"
                DayHeaderStyle-Width="175"
                DayStyle-BorderColor="#DDDDDD" 
                DayStyle-BorderWidth="1"
                DayStyle-BorderStyle="Solid"
                DayStyle-HorizontalAlign= "Left"
                DayStyle-VerticalAlign="Top"
                runat="server">
        </asp:Calendar>
    </div>
    </form>
</body>
</html>

aspx.vb:

VB.NET:
Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Calendar1_DayRender(sender As Object, e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender
        If e.Day.Date.Day = 4 Then
            Dim panelEvent As New Panel
            panelEvent.CssClass = "Clip"
            panelEvent.Controls.Add(New LiteralControl("This is a really long sentence to show clipping!"))
            e.Cell.Controls.Add(panelEvent)
        End If
    End Sub
End Class
 
Amazingly that works, but only in Chrome and Firefox, not IE.
 
Tested with IE 9, no clipping in calendar table there.
 
Nice catch - I appreciate the testing.

Okay, came up with this new way of doing it. I've tested it in Safari, Firefox, Chrome, and IE 8, 9, 10, and 11 and it seems to work!

aspx:

VB.NET:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style>    
        .parentDiv {
			position: relative;
		}
		.childDiv {
			position:absolute;
			top:0;
			left:0;
			width:100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="parentDiv" style="width: 150px">
        <div class="childDiv">This is a really long sentence to show clipping!</div>
    </div>    
    <br /><br />
    <div>
        <asp:Calendar 
                ID="Calendar1"
                DayStyle-Width="175" 
                DayStyle-Height="125"
                DayHeaderStyle-Width="175"
                DayStyle-BorderColor="#DDDDDD" 
                DayStyle-BorderWidth="1"
                DayStyle-BorderStyle="Solid"
                DayStyle-HorizontalAlign= "Left"
                DayStyle-VerticalAlign="Top"
                runat="server">
        </asp:Calendar>
    </div>
    </form>
</body>
</html>

aspx.vb:

VB.NET:
Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Calendar1_DayRender(sender As Object, e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender
        If e.Day.Date.Day = 4 Then
            Dim panelParent As New Panel
            panelParent.CssClass = "parentDiv"
            Dim panelChild As New Panel
            panelChild.CssClass = "childDiv"
            panelChild.Controls.Add(New LiteralControl("This is a really long sentence to show clipping!"))
            panelParent.Controls.Add(panelChild)
            e.Cell.Controls.Add(panelParent)
        End If
    End Sub
End Class
 
Great work! It works in all my tested browsers too.
 
Back
Top