Calendar.CellSpacing Property

Reference

Definition

Namespace:: System.Web.UI.WebControls

Assembly:: System.Web.dll

Important

Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

Gets or sets the amount of space between cells.

public:
 property int CellSpacing { int get(); void set(int value); };

[System.ComponentModel.Bindable(true)]
public int CellSpacing { get; set; }

public int CellSpacing { get; set; }

[<System.ComponentModel.Bindable(true)>]
member this.CellSpacing : int with get, set

member this.CellSpacing : int with get, set

Public Property CellSpacing As Integer

Property Value

Int32

The amount of space (in pixels) between cells. The default value is 0.

Attributes: BindableAttribute

Exceptions

ArgumentOutOfRangeException

The specified cell spacing is less than -1.

Examples

The following code example demonstrates how to use the CellSpacing property to space the cells 5 pixels apart.

<%@ Page Language="C#" AutoEventWireup="True" %>
<!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>
    <title>Calendar Example</title>
</head>
<body>

   <form id="form1" runat="server">

      <h3>Calendar Example</h3>

      <asp:Calendar id="calendar1" runat="server"
           CellSpacing="5"
           ShowGridLines="true"/>
            
   </form>
        

</body>
</html>

<%@ Page Language="VB" AutoEventWireup="True" %>
<!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>
    <title>Calendar Example</title>
</head>
<body>

   <form id="form1" runat="server">

      <h3>Calendar Example</h3>

      <asp:Calendar id="calendar1" runat="server"
           CellSpacing="5"
           ShowGridLines="true"/>
            
   </form>
        

</body>
</html>

<%@ Page Language="C#" AutoEventWireup="True" %>

<!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" >
   <script runat="server" >
  
      void Selection_Change(Object sender, EventArgs e)
      {

         // Set the cell padding and cell spacing for the Calendar control
         // based on the values selected from the DropDownList control.
         Calendar1.CellPadding = CellPaddingList.SelectedIndex;
         Calendar1.CellSpacing = CellSpacingList.SelectedIndex;

      }
  
   </script>
  
<head runat="server">
    <title> Calendar CellPadding and CellSpacing Example </title>
</head>
<body>

   <form id="form1" runat="server">
  
      <h3> Calendar CellPadding and CellSpacing Example </h3>

      Select the cell padding and cell spacing values.

      <br /><br /> 
  
      <asp:Calendar id="Calendar1"
           ShowGridLines="True" 
           ShowTitle="True"
           runat="server"/>

      <br /><br />

      <table cellpadding="5">

         <tr>

            <td>

               Cell padding:

            </td>

            <td>

               Cell spacing:

            </td>

         </tr>

         <tr>

            <td>

               <asp:DropDownList id="CellPaddingList"
                    AutoPostBack="True"
                    OnSelectedIndexChanged="Selection_Change"
                    runat="server">

                  <asp:ListItem> 0 </asp:ListItem>
                  <asp:ListItem> 1 </asp:ListItem>
                  <asp:ListItem Selected="True"> 2 </asp:ListItem>
                  <asp:ListItem> 3 </asp:ListItem>
                  <asp:ListItem> 4 </asp:ListItem>
                  <asp:ListItem> 5 </asp:ListItem>

               </asp:DropDownList>

            </td>

            <td>

               <asp:DropDownList id="CellSpacingList"
                    AutoPostBack="True"
                    OnSelectedIndexChanged="Selection_Change"
                    runat="server">

                  <asp:ListItem Selected="True"> 0 </asp:ListItem>
                  <asp:ListItem> 1 </asp:ListItem>
                  <asp:ListItem> 2 </asp:ListItem>
                  <asp:ListItem> 3 </asp:ListItem>
                  <asp:ListItem> 4 </asp:ListItem>
                  <asp:ListItem> 5 </asp:ListItem>

               </asp:DropDownList>

            </td>

         </tr>
         
      </table>
  
   </form>

</body>
</html>

<%@ Page Language="VB" AutoEventWireup="True" %>

<!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" >
   <script runat="server" >
  
      Sub Selection_Change(sender As Object, e As EventArgs)

         ' Set the cell padding and cell spacing for the Calendar control
         ' based on the values selected from the DropDownList control.
         Calendar1.CellPadding = CellPaddingList.SelectedIndex
         Calendar1.CellSpacing = CellSpacingList.SelectedIndex

      End Sub
  
   </script>
  
<head runat="server">
    <title> Calendar CellPadding and CellSpacing Example </title>
</head>
<body>

   <form id="form1" runat="server">
  
      <h3> Calendar CellPadding and CellSpacing Example </h3>

      Select the cell padding and cell spacing values.

      <br /><br /> 
  
      <asp:Calendar id="Calendar1"
           ShowGridLines="True" 
           ShowTitle="True"
           runat="server"/>

      <br /><br />

      <table cellpadding="5">

         <tr>

            <td>

               Cell padding:

            </td>

            <td>

               Cell spacing:

            </td>

         </tr>

         <tr>

            <td>

               <asp:DropDownList id="CellPaddingList"
                    AutoPostBack="True"
                    OnSelectedIndexChanged="Selection_Change"
                    runat="server">

                  <asp:ListItem> 0 </asp:ListItem>
                  <asp:ListItem> 1 </asp:ListItem>
                  <asp:ListItem Selected="True"> 2 </asp:ListItem>
                  <asp:ListItem> 3 </asp:ListItem>
                  <asp:ListItem> 4 </asp:ListItem>
                  <asp:ListItem> 5 </asp:ListItem>

               </asp:DropDownList>

            </td>

            <td>

               <asp:DropDownList id="CellSpacingList"
                    AutoPostBack="True"
                    OnSelectedIndexChanged="Selection_Change"
                    runat="server">

                  <asp:ListItem Selected="True"> 0 </asp:ListItem>
                  <asp:ListItem> 1 </asp:ListItem>
                  <asp:ListItem> 2 </asp:ListItem>
                  <asp:ListItem> 3 </asp:ListItem>
                  <asp:ListItem> 4 </asp:ListItem>
                  <asp:ListItem> 5 </asp:ListItem>

               </asp:DropDownList>

            </td>

         </tr>
  
      </table>
  
   </form>

</body>
</html>

Remarks

Use this property to control the spacing between individual cells in the calendar. This spacing is applied both vertically and horizontally.

Note

Setting this property to -1 indicates that this property is not set in the rendered table.

Applies to