ASP.NET - Controlli 5

ASP.NET

Calendar

L’oggetto Calendar permette di mostrare un calendario e di poter selezionare una data o un range di date.
Per gestire la selezione di una data, conviene utilizzare anche una TextBox e un ImageButton. All’ImageButton bisogna impostare la proprietà ‘ImageUrl’ con una opportuna icona (come nell'immagine sotto).

ImageUrl="~/Images/Calendar.png"

Il Calendar si può formattare velocemente con una formattazione automatica, tramite le Smart Tag.
Ecco una disposizione tipica dei tre oggetti: la TextBox ‘txtCalendar’, l’ImageButton ‘imbCalendar’ e il Calendar ‘clnDate’.

Se non si vuole permettere all’utente di scrivere sulla TextBox, impostare la proprietà ‘ReadOnly=true’.
Si può rendere il calendario non visibile per mostrarlo al click sull’ImageButton.
Basta quindi impostare i seguenti due eventi.

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           clnDate.Visible = false;
       }
   }

   protected void imbCalander_Click(object sender, ImageClickEventArgs e)
   {
       clnDate.Visible = !clnDate.Visible;
   }

Per far sì che la data selezionata sia riportata nella TextBox, aggiungere il seguente evento:

   protected void clnDate_SelectionChanged(object sender, EventArgs e)
   {
       txtCalendar.Text = clnDate.SelectedDate.ToString("dd/MM/yyyy");
       clnDate.Visible = false;
   }

Proprietà

Caption: intestazione del calendario.
CaptionAlign: allineamento dell’intestazione.
ShowGridLines: mostra / nasconde le linee della griglia tra i giorni.
ShowTitle: mostra / nasconde il nome del mese.
TitleFormat: imposta solo il mese o il mese con l’anno.
TitleStyle: stile del mese.

Giorno corrente

TodayDayStyle: stile del giorno corrente.

Giorni della settimana

DayHeaderStyle: stile dell’intestazione dei giorni della settimana.
DayNameFormat: formato dell’intestazione dei giorni della settimana.
FirstDayOfWeek: imposta il primo giorno della settimana, generalmente lunedì va bene.
ShowDayHeader: mostra / nasconde i giorni della settimana.

Giorni del calendario

DayStyle: stile dei giorni della settimana (da lunedì a venerdì) anche per i giorni che eventualmente cadono nei due mesi vicini al mese selezionato.
WeekendDayStyle: stile dei giorni della settimana (solo sabato e domenica) anche per i giorni che eventualmente cadono nei due mesi vicini al mese selezionato.
OtherMonthDayStyle: stile dei giorni della settimana non appartenenti al mese corrente.
SelectedDayStyle: stile del giorno selezionato.

Mesi precedente e successivo

NextPrevFormat: formato per i mesi precedente e successivo (testo a scelta o il nome del mese).
PrevMonthText, NextMonthText: eventuale testo per i mesi precedente e successivo, generalmente ‘<’ e ‘>’.
NextPrevStyle: stile per i mesi precedente e successivo.

Selezione

SelectedDate: data selezionata.
SelectedDayStyle: stile per la data selezionata.
SelectionMode: selezione per giorno, giorno e settimana, giorno, settimana e mese o non permessa.
SelectWeekText: testo cliccabile per selezionare la settimana.
SelectMonthText: testo cliccabile per selezionare il mese.
SelectorStyle: stile per la zona di selezione.

Formattazione dei giorni

Tutte le date presenti nel calendario possono essere formattate in modo molto dettagliato per esempio per:

- Impedire all’utente di selezionare alcuni giorni.

- Modificare il font di alcuni giorni.

Per farlo bisogna ricorrere all’evento ‘DayRender()’.
Questo evento (generato per ogni giorno presente nel calendario) ha l’argomento ‘DayRenderEventArgs’ con diverse proprietà utili a individuare i giorni con determinate caratteristiche.
Esempio: si rendono alcuni giorni non selezionabili dall’utente (Attenzione alla terza condizione nell’OR: la proprietà ‘Date’ ritorna un ‘DateTime’, quindi con orario ’00:00:00’. Per questo si aggiunge un giorno alla data corrente).

   // 1: Giorni dei mesi vicini al mese selezionato.
   // 2: Giorni del weekend.
   // 3: Giorni passati.
   if (e.Day.IsOtherMonth || e.Day.IsWeekend || e.Day.Date < DateTime.Now.Date.AddDays(1))
   {
       e.Day.IsSelectable = false;
   }

Esempio: si rende non visibile il testo di alcuni giorni.

   // Giorni passati.
   if (e.Day.Date < DateTime.Now.Date.AddDays(1))
   {
       e.Cell.Text = "";
   }

Esempio: si formattano diversamente i giorni pari dai giorni dispari:

   // Giorni pari / dispari.
   if (e.Day.Date.Day % 2 == 0)
   {
       e.Cell.BackColor = System.Drawing.Color.Red;
       e.Cell.ForeColor = System.Drawing.Color.White;
   }
   else
   {
       e.Cell.BackColor = System.Drawing.Color.White;
       e.Cell.ForeColor = System.Drawing.Color.Red;
   }

Giorno o intervallo selezionato

Il Calendar consente tre tipi di selezione in base alla proprietà ‘SelectionMode’:

- per giorno

- per giorno o settimana

- per giorno o settimana o mese.

Per individuare il giorno o l’intervallo selezionato dall’utente, occorre utilizzare l’evento ‘SelectionChanged()’.

   protected void clnDate_SelectionChanged(object sender, EventArgs e)
   {
       // Giorno selezionato
       Response.Write(clnDate.SelectedDate.ToString("dd/MM/yyyy"));
       Response.Write("<br />");

       // Intervallo di giorni selezionati
       foreach (DateTime d in clnDate.SelectedDates)
       {
           Response.Write(d.ToString("dd/MM/yyyy"));
       }
   }

Cambio del mese

Al cambio del mese viene generato l’evento ‘VisibleMonthChanged()’.

   protected void clnDate_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
   {
       Response.Write("Mese cambiato");
       Response.Write(" da " + e.PreviousDate.Date.Month.ToString());
       Response.Write(" a " + e.NewDate.Date.Month.ToString());
   }