Учебники

ASP.NET — Календари

Сентябрь 22, 2018

Элемент управления Calendar является функционально богатым веб-элементом управления, который предоставляет следующие возможности:

  • Отображение одного месяца за раз
  • Выбор дня, недели или месяца
  • Выбор диапазона дней
  • Переезд из месяца в месяц
  • Управление отображением дней программно

Основной синтаксис элемента управления календаря: 

<asp:Calender ID = "Calendar1" runat = "server">
</asp:Calender>

Свойства и события элемента управления календаря

Элемент управления календаря имеет много свойств и событий, с помощью которых вы можете настроить действия и отображение элемента управления. В следующей таблице приведены некоторые важные свойства элемента управления Calendar:

свойства Описание
титр Получает или задает заголовок для элемента управления календаря.
CaptionAlign Получает или задает выравнивание для заголовка.
CELLPADDING Получает или задает количество пробелов между данными и границей ячейки.
CELLSPACING Получает или задает пространство между ячейками.
DayHeaderStyle Получает свойства стиля для раздела, в котором отображается день недели.
DayNameFormat Получает или задает формат дней недели.
DayStyle Получает свойства стиля для дней в отображаемом месяце.
FirstDayOfWeek Получает или задает день недели для отображения в первом столбце.
NextMonthText Получает или задает текст для элемента управления навигации следующего месяца. Значением по умолчанию является>.
NextPrevFormat Получает или задает формат элемента управления навигации следующего и предыдущего месяца.
OtherMonthDayStyle Получает свойства стиля для дней в элементе управления «Календарь», которые отсутствуют в отображаемом месяце.
PrevMonthText Получает или задает текст для элемента управления навигации предыдущего месяца. Значением по умолчанию является <.
SelectedDate Получает или задает выбранную дату.
SelectedDates Получает коллекцию объектов DateTime, представляющих выбранные даты.
SelectedDayStyle Получает свойства стиля для выбранных дат.
SelectionMode Получает или задает режим выбора, который указывает, может ли пользователь выбрать один день, неделю или целый месяц.
SelectMonthText Получает или задает текст для элемента выбора месяца в столбце селектора.
SelectorStyle Получает свойства стиля для столбца селектора недели и месяца.
SelectWeekText Получает или задает текст, отображаемый для элемента выбора недели в столбце выбора.
ShowDayHeader Получает или задает значение, указывающее, отображается ли заголовок для дней недели.
ShowGridLines Получает или задает значение, указывающее, будут ли показаны линии сетки.
ShowNextPrevMonth Получает или задает значение, указывающее, отображаются ли элементы навигации следующего и предыдущего месяца в разделе заголовка.
Показать заголовок Получает или задает значение, указывающее, отображается ли раздел заголовка.
форматирования заголовка Получает или задает формат для раздела заголовка.
Titlestyle Получите свойства стиля заголовка заголовка для элемента управления Calendar.
TodayDayStyle Получает свойства стиля для сегодняшней даты в элементе управления Calendar.
Сегодняшняя дата Получает или задает значение для сегодняшней даты.
UseAccessibleHeader Получает или задает значение, указывающее, следует ли отображать <th> HTML-элемент заголовка таблицы для заголовков дня вместо HTML-элемента data <td> таблицы.
VisibleDate Получает или задает дату, которая указывает месяц для отображения.
WeekendDayStyle Получает свойства стиля для дат выходных в элементе управления Calendar.

Элемент управления Calendar содержит три наиболее важных события, которые позволяют разработчикам программировать элемент управления Calendar. Они есть:

События Описание
SelectionChanged Он повышается, если выбран день, неделя или целый месяц.
DayRender Он вызывается, когда отображается каждая ячейка данных календарного элемента управления.
VisibleMonthChanged Он поднимается, когда пользователь меняет месяц.

Работа с календарем управления

Размещение простого элемента управления календарем без какого-либо кода позади файла обеспечивает работоспособный календарь для сайта, который показывает месяцы и дни года. Это также позволяет перейти к следующим и предыдущим месяцам.

Календарь

Элементы управления календарем позволяют пользователям выбирать один день, неделю или целый месяц. Это делается с помощью свойства SelectionMode. Это свойство имеет следующие значения:

свойства Описание
День Чтобы выбрать один день.
DayWeek Чтобы выбрать один день или целую неделю.
DayWeekMonth Чтобы выбрать один день, неделю или целый месяц.
Никто Ничто не может быть выбрано.

Синтаксис для выбора дней: 

<asp:Calender ID = "Calendar1" runat = "server" SelectionMode="DayWeekMonth">
</asp:Calender>

Если для режима выбора установлено значение DayWeekMonth, для выбора недели появляется дополнительный столбец с символом>, а слева от названия дня появляется символ >> для выбора месяца.

Calendar2

пример

Следующий пример демонстрирует выбор даты и отображает дату в метке:

Код файла содержимого выглядит следующим образом: 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="calendardemo._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>
         Untitled Page
      </title>
   </head>
   
   <body>
      <form id="form1" runat="server">
      
         <div>
            <h3> Your Birthday:</h3>
            <asp:Calendar ID="Calendar1" runat="server  SelectionMode="DayWeekMonth" onselectionchanged="Calendar1_SelectionChanged">
            </asp:Calendar>
         </div>
         
         <p>Todays date is: 
            <asp:Label ID="lblday" runat="server"></asp:Label>
         </p>
         
         <p>Your Birday is: 
            <asp:Label ID="lblbday" runat="server"></asp:Label>
         </p>
         
      </form>
   </body>
</html>

Обработчик события для SelectionChanged: 

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
   lblday.Text = Calendar1.TodaysDate.ToShortDateString();
   lblbday.Text = Calendar1.SelectedDate.ToShortDateString();
}

Когда файл запускается, он должен выдать следующий вывод:

87
Share: