ASP.NET Tutorial/ASP.net Controls/Calendar — различия между версиями

Текущая версия на 12:00, 26 мая 2010

Содержание

1 Appointment based on Calendar (C#)
2 Bind selected dates from a calendar to asp:BulletedList
3 Calendar control and some of its colorful styles
4 Calendar day renderer event (C#)
5 Calendar selection changed event (C#)
6 Calendar style
7 Calendar with events
8 Controlling how a day is rendered in the Calendar (C#)
9 Controlling how a day is rendered in the Calendar (VB)
10 Convert Selected Date from Calendar to Long Date String
11 Creating a Pop-up Date Picker
12 Format value from asp:Calendar as "dddd, MMMM dd yyyy" (VB.net)
13 Format value retrieved from asp:Calendar (C#)
14 Important properties of the Calendar control
15 Retrieving a range of dates from a selection (C#)
16 Retrieving a range of dates from a selection (VB)
17 title style, day header style, today style, and other month day style

Appointment based on Calendar (C#)

File: Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Appointment" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <tr>
                <td>
                    Choose day:<br />
                    <asp:Calendar ID="MyCalendar" 
                                  runat="server" 
                                  OnDayRender="MyCalendar_DayRender" 
                                  OnSelectionChanged="MyCalendar_SelectionChanged">
                    </asp:Calendar>
                </td>
                <td >
                    Choose time:<br />
                    <asp:ListBox ID="lstTimes" 
                                 runat="server" 
                                 Height="168px" 
                                 Width="136px"></asp:ListBox></td>
            </tr>
    </div>        
    </form>
</body>
</html>

File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Appointment : System.Web.UI.Page
{
    protected void MyCalendar_SelectionChanged(object sender, EventArgs e)
    {
        lstTimes.Items.Clear();
        switch (MyCalendar.SelectedDate.DayOfWeek)
        {
            case DayOfWeek.Monday:
                lstTimes.Items.Add("10:00");
                lstTimes.Items.Add("10:30");
                lstTimes.Items.Add("11:00");
                break;
            default:
                lstTimes.Items.Add("10:00");
                lstTimes.Items.Add("10:30");
                lstTimes.Items.Add("11:00");
                lstTimes.Items.Add("11:30");
                lstTimes.Items.Add("12:00");
                lstTimes.Items.Add("12:30");
                break;
        }
    }
    protected void MyCalendar_DayRender(object sender, DayRenderEventArgs e)
    {
        if (e.Day.Date.Day == 28 && e.Day.Date.Month == 2)
        {
            e.Cell.BackColor = System.Drawing.Color.Yellow;
            Label lbl = new Label();
            lbl.Text = "<br/>My Birthday!";
            e.Cell.Controls.Add(lbl);
        }
        if (e.Day.Date.Year > 2000)
        {
            e.Day.IsSelectable = false;
        }
    }
}

Bind selected dates from a calendar to asp:BulletedList

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        bltResults.DataSource = Calendar1.SelectedDates;
        bltResults.DataBind();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Calendar SelectionMode</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Calendar
        id="Calendar1"
        SelectionMode="DayWeekMonth"
        runat="server" />
    <br /><br />
    <asp:Button
        id="btnSubmit"
        Text="Submit"
        OnClick="btnSubmit_Click"
        Runat="server" />
    <hr />
    <asp:BulletedList
        id="bltResults"
        DataTextFormatString="{0:d}"
        Runat="server" />
    </div>
    </form>
</body>
</html>

Calendar control and some of its colorful styles

<%@ Page language="C#"%>
<html>
<head runat="server">
    <title>Calendars</title>
</head>
<body>
    <div id="pageContent">
        <form id="Form1" runat="server">
            <asp:Calendar ID="Calendar1" 
                          runat="server" 
                          BackColor="White" 
                          BorderColor="#3366CC"
                          BorderWidth="1px" 
                          CellPadding="1" 
                          DayNameFormat="Shortest" 
                          Font-Names="Verdana"
                          Font-Size="8pt" 
                          ForeColor="#003399" 
                          Height="200px" 
                          SelectedDate="2007-08-16"
                          VisibleDate="2007-08-16" Width="220px">
                <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
                <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
                <WeekendDayStyle BackColor="#CCCCFF" />
                <OtherMonthDayStyle ForeColor="#999999" />
                <TodayDayStyle BackColor="White" ForeColor="Transparent" />
                <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
                <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
                <TitleStyle BackColor="#003399" 
                            BorderColor="#3366CC" 
                            BorderWidth="1px" 
                            Font-Bold="True"
                            Font-Size="10pt" 
                            ForeColor="#CCCCFF" 
                            Height="25px" />
            </asp:Calendar>
         </form>
    </div>
</body>
</html>

Calendar day renderer event (C#)

File: Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CalendarTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="MyCalendar" 
                      runat="server" 
                      BackColor="White" 
                      BorderColor="White" 
                      BorderWidth="1px" 
                      Font-Names="Verdana" 
                      Font-Size="9pt" 
                      ForeColor="Black" 
                      Height="190px" 
                      NextPrevFormat="FullMonth" 
                      OnDayRender="MyCalendar_DayRender" 
                      OnSelectionChanged="MyCalendar_SelectionChanged" 
                      SelectionMode="DayWeek" 
                      Width="350px">
            <SelectedDayStyle BackColor="#333399" ForeColor="White" />
            <OtherMonthDayStyle ForeColor="#999999" />
            <TodayDayStyle BackColor="#CCCCCC" />
            <NextPrevStyle Font-Bold="True" 
                           Font-Size="8pt" 
                           ForeColor="#333333" 
                           VerticalAlign="Bottom" />
            <DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
            <TitleStyle BackColor="White" 
                        BorderColor="Black" 
                        BorderWidth="4px" 
                        Font-Bold="True"
                        Font-Size="12pt" 
                        ForeColor="#333399" />
        </asp:Calendar>
        <br />
        <asp:Label ID="lblDates" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class CalendarTest : System.Web.UI.Page
{
    protected void MyCalendar_SelectionChanged(object sender, EventArgs e)
  {
    lblDates.Text = "You selected these dates:<br />";
    foreach (DateTime dt in MyCalendar.SelectedDates)
    {
      lblDates.Text += dt.ToLongDateString() + "<br />";
    }
  }
  protected void MyCalendar_DayRender(object sender, DayRenderEventArgs e)
  {
    if (e.Day.Date.Day == 28 && e.Day.Date.Month == 2)
    {
      e.Cell.BackColor = System.Drawing.Color.Yellow;
      Label lbl = new Label();
      lbl.Text = "<br />My Birthday!";
      e.Cell.Controls.Add(lbl);
    }

  }
}

Calendar selection changed event (C#)

File: Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CalendarTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="MyCalendar" 
                      runat="server" 
                      BackColor="White" 
                      BorderColor="White" 
                      BorderWidth="1px" 
                      Font-Names="Verdana" 
                      Font-Size="9pt" 
                      ForeColor="Black" 
                      Height="190px" 
                      NextPrevFormat="FullMonth" 
                      OnDayRender="MyCalendar_DayRender" 
                      OnSelectionChanged="MyCalendar_SelectionChanged" 
                      SelectionMode="DayWeek" 
                      Width="350px">
            <SelectedDayStyle BackColor="#333399" ForeColor="White" />
            <OtherMonthDayStyle ForeColor="#999999" />
            <TodayDayStyle BackColor="#CCCCCC" />
            <NextPrevStyle Font-Bold="True" 
                           Font-Size="8pt" 
                           ForeColor="#333333" 
                           VerticalAlign="Bottom" />
            <DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
            <TitleStyle BackColor="White" 
                        BorderColor="Black" 
                        BorderWidth="4px" 
                        Font-Bold="True"
                        Font-Size="12pt" 
                        ForeColor="#333399" />
        </asp:Calendar>
        <br />
        <asp:Label ID="lblDates" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class CalendarTest : System.Web.UI.Page
{
    protected void MyCalendar_SelectionChanged(object sender, EventArgs e)
  {
    lblDates.Text = "You selected these dates:<br />";
    foreach (DateTime dt in MyCalendar.SelectedDates)
    {
      lblDates.Text += dt.ToLongDateString() + "<br />";
    }
  }
  protected void MyCalendar_DayRender(object sender, DayRenderEventArgs e)
  {
    if (e.Day.Date.Day == 28 && e.Day.Date.Month == 2)
    {
      e.Cell.BackColor = System.Drawing.Color.Yellow;
      Label lbl = new Label();
      lbl.Text = "<br />My Birthday!";
      e.Cell.Controls.Add(lbl);
    }

  }
}

Calendar style

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Calendar</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>Calendar Control</h1>
    <h2>Styles</h2>
     <asp:Calendar ID="Calendar1" runat="server" 
      SelectionMode="DayWeekMonth" 
      CellPadding="7" 
      CellSpacing="5" 
      DayNameFormat="FirstTwoLetters" 
      FirstDayOfWeek="Monday" 
      NextMonthText="Next >" 
      PrevMonthText="< Prev" 
      ShowGridLines="True" 
      DayStyle-BackColor="White" 
      DayStyle-ForeColor="Black" 
      DayStyle-Font-Names="Arial">
       <DayHeaderStyle 
        BackColor="Black" 
        Font-Names="Arial Black" 
        ForeColor="White" />
       <SelectedDayStyle 
        BackColor="Cornsilk" 
        Font-Bold="True" 
        Font-Italic="True" 
        Font-Names="Arial"
        ForeColor="Blue" />
       <SelectorStyle 
        BackColor="Cornsilk" 
        Font-Names="Arial" 
        ForeColor="Red" />
       <WeekendDayStyle 
        BackColor="LavenderBlush" 
        Font-Names="Arial" 
        ForeColor="Purple" />
       <OtherMonthDayStyle 
        BackColor="LightGray" 
        Font-Names="Arial" 
        ForeColor="White" />
       <TodayDayStyle 
        BackColor="Cornsilk" 
        Font-Bold="True" 
        Font-Names="Arial" 
        ForeColor="Green" />
       <NextPrevStyle 
        BackColor="DarkGray" 
        Font-Names="Arial" 
        ForeColor="Yellow" />
       <TitleStyle 
        BackColor="Gray" 
        Font-Names="Arial Black" 
        ForeColor="White" 
        HorizontalAlign="Left" />
     </asp:Calendar>
    </div>
    </form>
</body>
</html>

Calendar with events

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CalenderRender" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Calender DayRender</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>Using DayRender</h1>
    <asp:Calendar ID="calRender" 
                  runat="server" 
                  BackColor="White" 
                  BorderColor="Black" 
                  BorderStyle="Solid" 
                  CellSpacing="1" 
                  Font-Names="Verdana" 
                  Font-Size="9pt" 
                  ForeColor="Black" 
                  Height="504px" 
                  NextPrevFormat="ShortMonth" 
                  Width="664px" 
                  OnDayRender="calRender_DayRender" 
                  OnSelectionChanged="calRender_SelectionChanged"  >
        
        <SelectedDayStyle BackColor="#333399" ForeColor="White" />
        <OtherMonthDayStyle ForeColor="#999999" />
        <DayStyle BackColor="#CCCCCC" />
        <TodayDayStyle BackColor="#999999" ForeColor="White" />
        <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
        <DayHeaderStyle Font-Bold="True" 
                        Font-Size="8pt" 
                        ForeColor="#333333" 
                        Height="8pt" />
        <TitleStyle BackColor="#333399" 
                    BorderStyle="Solid" 
                    Font-Bold="True" 
                    Font-Size="9pt"
                    ForeColor="White" Height="9pt" />
            
    </asp:Calendar>
    <asp:Label ID="labMessage" runat="server" />
    </div>
    </form>
</body>
</html>
File: Default.aspx.cs
using System.Collections;
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
public class CalenderEvent
{
  public enum EventTypes
  {
    AllDayEvent, Appointment, ToDoReminder
  }
  private string _shortDescription;
  private string _fullDescription;
  private DateTime _eventDate;
  private EventTypes _eventType;
  public CalenderEvent(string shortDescription, string fullDescription, DateTime eventDate, EventTypes eventType)
  {
    _shortDescription = shortDescription;
    _fullDescription = fullDescription;
    _eventDate = eventDate;
    _eventType = eventType;
  }
  public override string ToString()
  {
    StringBuilder sb = new StringBuilder();
    sb.Append(this.Date.ToShortDateString());
    sb.Append(" -- ");
    sb.Append(this.EventTypeString);
    sb.Append("<br/>");
    sb.Append(FullDescription);
    return sb.ToString();    
  }
  public string FullDescription
  {
    get { return _fullDescription; }
    set { _fullDescription = value; }
  }
  public string ShortDescription
  {
    get { return _shortDescription; }
    set { _shortDescription = value; }
  }
  public DateTime Date
  {
    get { return _eventDate; }
    set { _eventDate = value; }
  }
  public EventTypes Type
  {
    get { return _eventType; }
    set { _eventType = value; }
  }
  public string EventTypeString
  {
    get
    {
      if (this.Type == EventTypes.AllDayEvent)
        return "All Day Event";
      else if (this.Type == EventTypes.Appointment)
        return "Appointment";
      else
        return "To Do Reminder";
    }
  }
  public string ImageFile
  {
    get
    {
      if (this.Type == EventTypes.AllDayEvent)
        return "cal_allday.gif";
      else if (this.Type == EventTypes.Appointment)
        return "cal_appointment.gif";
      else
        return "cal_todo.gif";
    }
  }
}
public partial class CalenderRender : System.Web.UI.Page
{
  private ArrayList _events;
    protected void Page_Load(object sender, EventArgs e)
    {
    FillCalender();
    }
  private void FillCalender()
  {
    _events = new ArrayList();
    _events.Add(new CalenderEvent("A", "event a", DateTime.Now, CalenderEvent.EventTypes.Appointment));
    _events.Add(new CalenderEvent("B", "event b", DateTime.Now.AddDays(2.0), CalenderEvent.EventTypes.ToDoReminder));
    _events.Add(new CalenderEvent("C", "event c", DateTime.Now.AddDays(5.0), CalenderEvent.EventTypes.AllDayEvent));
  }
  protected void calRender_DayRender(object sender, DayRenderEventArgs e)
  {
    DateTime renderDay = e.Day.Date;
    foreach (CalenderEvent cEvent in _events)
    {
      if (renderDay.ToShortDateString() == cEvent.Date.ToShortDateString())
      {
        Image img = new Image();
        img.ImageUrl = "~/images/" + cEvent.ImageFile;
        img.ToolTip = cEvent.ShortDescription;
        img.ImageAlign = ImageAlign.Middle;
        e.Cell.Controls.Add(img);
      }
    }
  }
  protected void calRender_SelectionChanged(object sender, EventArgs e)
  {
    DateTime selectDay = calRender.SelectedDate;
    string message = "";
    foreach (CalenderEvent cEvent in _events)
    {
      if (selectDay.ToShortDateString() == cEvent.Date.ToShortDateString())
      {
        message = cEvent.ToString();
      }
    }
    if (message == "")
      labMessage.Text = "No event scheduled for " + selectDay.ToShortDateString();
    else
      labMessage.Text = message;
  }
}

Controlling how a day is rendered in the Calendar (C#)

<%@ Page Language="C#" %>
<script runat="server">
    protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
    {
        e.Cell.VerticalAlign = VerticalAlign.Top;
        if (e.Day.DayNumberText == "25")
        {
            e.Cell.Controls.Add(new LiteralControl("User Group Meeting!"));
            e.Cell.BorderColor = System.Drawing.Color.Black;
            e.Cell.BorderWidth = 1;
            e.Cell.BorderStyle = BorderStyle.Solid;
            e.Cell.BackColor = System.Drawing.Color.LightGray;
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Using the Calendar Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="Calendar1" 
                      Runat="server" 
                      OnDayRender="Calendar1_DayRender" 
                      Height="190px" 
                      BorderColor="White" 
                      Width="350px" 
                      ForeColor="Black" 
                      BackColor="White" 
                      BorderWidth="1px" 
                      NextPrevFormat="FullMonth" 
                      Font-Names="Verdana" 
                      Font-Size="9pt">
            <SelectedDayStyle ForeColor="White" 
             BackColor="#333399"></SelectedDayStyle>
            <OtherMonthDayStyle ForeColor="#999999"></OtherMonthDayStyle>
            <TodayDayStyle BackColor="#CCCCCC"></TodayDayStyle>
            <NextPrevStyle ForeColor="#333333" VerticalAlign="Bottom" 
             Font-Size="8pt" Font-Bold="True"></NextPrevStyle>
            <DayHeaderStyle Font-Size="8pt" Font-Bold="True"></DayHeaderStyle>
            <TitleStyle ForeColor="#333399" BorderColor="Black" Font-Size="12pt" 
                Font-Bold="True" BackColor="White" BorderWidth="4px">
            </TitleStyle>
        </asp:Calendar>
    </div>
    </form>
</body>
</html>

Controlling how a day is rendered in the Calendar (VB)

<%@ Page Language="VB" %>
<script runat="server">
    Protected Sub Calendar1_DayRender(ByVal sender As Object, _
      ByVal e As System.Web.UI.WebControls.DayRenderEventArgs)
        e.Cell.VerticalAlign = VerticalAlign.Top
        
        If (e.Day.DayNumberText = "25") Then
            e.Cell.Controls.Add(New LiteralControl("User Group Meeting!"))
            e.Cell.BorderColor = Drawing.Color.Black
            e.Cell.BorderWidth = 1
            e.Cell.BorderStyle = BorderStyle.Solid
            e.Cell.BackColor = Drawing.Color.LightGray
        End If
    End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Using the Calendar Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="Calendar1" 
                      Runat="server" 
                      OnDayRender="Calendar1_DayRender" 
                      Height="190px" 
                      BorderColor="White" 
                      Width="350px" 
                      ForeColor="Black" 
                      BackColor="White" 
                      BorderWidth="1px" 
                      NextPrevFormat="FullMonth" 
                      Font-Names="Verdana" 
                      Font-Size="9pt">
            <SelectedDayStyle ForeColor="White" 
                              BackColor="#333399"></SelectedDayStyle>
            <OtherMonthDayStyle ForeColor="#999999"></OtherMonthDayStyle>
            <TodayDayStyle BackColor="#CCCCCC"></TodayDayStyle>
            <NextPrevStyle ForeColor="#333333" 
                           VerticalAlign="Bottom" 
                           Font-Size="8pt" 
                           Font-Bold="True"></NextPrevStyle>
            <DayHeaderStyle Font-Size="8pt" Font-Bold="True"></DayHeaderStyle>
            <TitleStyle ForeColor="#333399" BorderColor="Black" Font-Size="12pt" 
                Font-Bold="True" BackColor="White" BorderWidth="4px">
            </TitleStyle>
        </asp:Calendar>
    </div>
    </form>
</body>
</html>

Convert Selected Date from Calendar to Long Date String

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CalendarSelect" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Calendar Selection</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:calendar id="calTest" 
                  runat="server" 
                backcolor="PaleGoldenrod" 
                width="250px" 
                height="200px"
                font-size="12px" 
                font-names="Arial" 
                borderwidth="2px" 
                bordercolor="#000000" 
                nextprevformat="shortmonth"
                  OnSelectionChanged="calTest_SelectionChanged">
    
    </asp:calendar>
    
  Date Selected:
  <asp:TextBox ID="txtSelected" Runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>
File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class CalendarSelect : System.Web.UI.Page
{

  protected void calTest_SelectionChanged(object o, EventArgs e)
  {
    txtSelected.Text = calTest.SelectedDate.ToLongDateString();
  }
}

Creating a Pop-up Date Picker

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void calEventDate_SelectionChanged(object sender, EventArgs e)
    {
        txtEventDate.Text = calEventDate.SelectedDate.ToString("d");
    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblResult.Text = "You picked: " + txtEventDate.Text;
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <script type="text/javascript">
        function displayCalendar()
        {
            var datePicker = document.getElementById("datePicker");
            datePicker.style.display = "block";
        }
    </script>
    <style type="text/css">
        #datePicker
        {
            display:none;
            position:absolute;
            border:solid 2px black;
            background-color:white;
        }
        .content
        {
            width:400px;
            background-color:white;
            margin:auto;
            padding:10px;
        }
        html
        {
            background-color:silver;
        }
    </style>
    <title>Calendar with JavaScript</title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="content">
    <asp:Label
        id="lblEventDate"
        Text="Event Date:"
        AssociatedControlID="txtEventDate"
        Runat="server" />
    <asp:TextBox
        id="txtEventDate"
        Runat="server" />
    <img src="Calendar.gif" onclick="displayCalendar()" />
    <div id="datePicker">
    <asp:Calendar
        id="calEventDate"
        OnSelectionChanged="calEventDate_SelectionChanged"
        Runat="server" />
    </div>
    <br />
    <asp:Button
        id="btnSubmit"
        Text="Submit"
        Runat="server" OnClick="btnSubmit_Click" />
    <hr />
    <asp:Label
        id="lblResult"
        Runat="server" />
    </div>
    </form>
</body>
</html>

Format value from asp:Calendar as "dddd, MMMM dd yyyy" (VB.net)

<%@ Page Inherits="ParentPage" src="test.aspx.vb" %>
<html><body>
   <form runat="server">
      <asp:Calendar id="Calendar1" runat="server"
         OnSelectionChanged="DateChanged"
         Cellpadding="5" Cellspacing="5"
         DayHeaderStyle-Font-Bold="True"
         DayNameFormat="Short"
         Font-Name="Arial" Font-Size="12px"
         height="250px"
         NextPrevFormat="ShortMonth"
         NextPrevStyle-ForeColor="white"
         SelectedDayStyle-BackColor="#ffcc66"
         SelectedDayStyle-Font-Bold="True"
         SelectionMode="DayWeekMonth"
         SelectorStyle-BackColor="#99ccff"
         SelectorStyle-ForeColor="navy"
         SelectorStyle-Font-Size="9px"
         ShowTitle="true"
         TitleStyle-BackColor="#ddaa66"
         TitleStyle-ForeColor="white"
         TitleStyle-Font-Bold="True"
         TodayDayStyle-Font-Bold="True" />
   </form>
   You selected: 
   <asp:Label id="lblMessage" runat="server"/>
</body></html>
File: test.aspx.vb
Imports System
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Public Class ParentPage : Inherits Page
   public lblMessage as Label
   public Calendar1 as Calendar
   
   Public sub Page_Load(obj as object, e as eventargs)
      if not Page.IsPostBack then
         Calendar1.SelectedDate = DateTime.Now
         lblMessage.Text = Calendar1.SelectedDate. _
            ToString("dddd, MMMM dd yyyy")
      end if
   End Sub
   
   Public sub DateChanged(obj as object, e as eventargs)
      if Calendar1.SelectedDates.Count > 1 then
         lblMessage.Text = Calendar1.SelectedDates(0). _
            ToString("dddd, MMMM dd yyyy") & " through " & _
            Calendar1.SelectedDates(Calendar1.SelectedDates. _
            Count - 1).ToString("dddd, MMMM dd yyyy")
      else
         lblMessage.Text = Calendar1.SelectedDate. _
            ToString("dddd, MMMM dd yyyy")
      end if
   End Sub
End Class

Format value retrieved from asp:Calendar (C#)

<%@ Page Inherits="ParentPage" src="test.aspx.cs" %>
<html><body>
   <form runat="server">
      <asp:Calendar id="Calendar1" runat="server"
         OnSelectionChanged="DateChanged"
         Cellpadding="5" Cellspacing="5"
         DayHeaderStyle-Font-Bold="True"
         DayNameFormat="Short"
         Font-Name="Arial" Font-Size="12px"
         height="250px"
         NextPrevFormat="ShortMonth"
         NextPrevStyle-ForeColor="white"
         SelectedDayStyle-BackColor="#ffcc66"
         SelectedDayStyle-Font-Bold="True"
         SelectionMode="DayWeekMonth"
         SelectorStyle-BackColor="#99ccff"
         SelectorStyle-ForeColor="navy"
         SelectorStyle-Font-Size="9px"
         ShowTitle="true"
         TitleStyle-BackColor="#ddaa66"
         TitleStyle-ForeColor="white"
         TitleStyle-Font-Bold="True"
         TodayDayStyle-Font-Bold="True" />
   </form>
   You selected: 
   <asp:Label id="lblMessage" runat="server"/>
</body></html>
File: test.aspx.cs
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public class ParentPage : Page {
   public Label lblMessage;
   public Calendar Calendar1;
   
   public void Page_Load(Object Sender, EventArgs e) {
      if (!Page.IsPostBack) {
         Calendar1.SelectedDate = DateTime.Now;
         lblMessage.Text = Calendar1.SelectedDate.ToString("dddd, MMMM dd yyyy");
      }
   }
   
   public void DateChanged(Object Sender, EventArgs e) {
      if (Calendar1.SelectedDates.Count > 1) {
         lblMessage.Text = Calendar1.SelectedDates[0].ToString("dddd, MMMM dd yyyy") + " through " + Calendar1.SelectedDates[Calendar1.SelectedDates.Count - 1].ToString("dddd, MMMM dd yyyy");
      } else {
         lblMessage.Text = Calendar1.SelectedDate.ToString("dddd, MMMM dd yyyy");
      }
   }
}

Important properties of the Calendar control

DayNameFormat:     style of the days of the week. 
                   Possible values are FirstLetter, FirstTwoLetters, Full, Short, and Shortest.
NextMonthText:     the text that appears for the next month link.
NextPrevFormat:    style of the next month and previous month link. 
                   Possible values are CustomText, FullMonth, and ShortMonth.
PrevMonthText:     the text for the previous month link.
SelectedDate:      get / set the selected date.
SelectedDates:     get / set a collection of selected dates.
SelectionMode:     how dates are selected. 
                   Possible values are Day, DayWeek, DayWeekMonth, and None.
SelectMonthText:   text for selecting a month.
SelectWeekText:    text for selecting a week.
ShowDayHeader:     hide or display the day names.
ShowNextPrevMonth: hide or display the links for the next and previous months.
ShowTitle:         hide or display the title bar displayed at the top of the calendar.
TitleFormat:       format the title bar. 
                   Possible values are Month and MonthYear.
TodaysDate:        set current date. 
                   This property defaults to the current date.
VisibleDate:       set the month displayed. 
                   defaults to the month for TodaysDate.
DayRender:         Raised as each day is rendered.
SelectionChanged:  Raised when a new day, week, or month is selected.
VisibleMonthChanged: Raised when the next or previous month link is clicked.

<%@ Page Language="C#" %>
<!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>Show Calendar</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Calendar
        id="Calendar1"
        Runat="server" />
    </div>
    </form>
</body>
</html>

Retrieving a range of dates from a selection (C#)

<%@ Page Language="C#" %>
<script runat="server">
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        Label1.Text = "<b><u>You selected the following date/dates:</u></b><br>";
        
        for (int i=0; i<Calendar1.SelectedDates.Count; i++) {
            Label1.Text += Calendar1.SelectedDates[i].ToShortDateString() + "<br>";
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Using the Calendar Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="Calendar1" Runat="server" 
         OnSelectionChanged="Calendar1_SelectionChanged" 
         SelectionMode="DayWeekMonth">
        </asp:Calendar>
        <asp:Label ID="Label1" Runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

Retrieving a range of dates from a selection (VB)

<%@ Page Language="VB" %>
<script runat="server">
    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _
      ByVal e As System.EventArgs)
        Label1.Text = "<b><u>You selected the following date/dates:</u></b><br>"
        
        For i As Integer = 0 To (Calendar1.SelectedDates.Count - 1)
            Label1.Text += Calendar1.SelectedDates.Item(i).ToShortDateString() & _
              "<br>"
        Next
    End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Using the Calendar Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="Calendar1" Runat="server" 
         OnSelectionChanged="Calendar1_SelectionChanged" 
         SelectionMode="DayWeekMonth">
        </asp:Calendar>
        <asp:Label ID="Label1" Runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

title style, day header style, today style, and other month day style

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Calendar Test</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:calendar id="calTest" 
                      runat="server" 
                      backcolor="PaleGoldenrod" 
                      width="400px" 
                      height="200px" 
                      font-size="12px" 
                      font-names="Arial"
                      borderwidth="2px" 
                      bordercolor="#000000" 
                      nextprevformat="shortmonth">
           <titlestyle font-size="14px" 
                       font-bold="true" 
                       backcolor="Goldenrod"/>
           <dayheaderstyle font-bold="true" />
           <todaydaystyle backcolor="Orange" forecolor="#ffffff" />
           <othermonthdaystyle forecolor="Tan" />
        </asp:calendar>
    </div>
    </form>
</body>
</html>

ASP.NET Tutorial/ASP.net Controls/Calendar — различия между версиями

Текущая версия на 12:00, 26 мая 2010

Содержание

Appointment based on Calendar (C#)

Bind selected dates from a calendar to asp:BulletedList

Calendar control and some of its colorful styles

Calendar day renderer event (C#)

Calendar selection changed event (C#)

Calendar style

Calendar with events

Controlling how a day is rendered in the Calendar (C#)

Controlling how a day is rendered in the Calendar (VB)

Convert Selected Date from Calendar to Long Date String

Creating a Pop-up Date Picker

Format value from asp:Calendar as "dddd, MMMM dd yyyy" (VB.net)

Format value retrieved from asp:Calendar (C#)

Important properties of the Calendar control

Retrieving a range of dates from a selection (C#)

Retrieving a range of dates from a selection (VB)

title style, day header style, today style, and other month day style

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Инструменты

Навигация

Текущая версия на 12:00, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Текущая версия на 12:00, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)