Pagina personale di:
Carlo Vecchio
appunti di C#, R, SQL Server, ASP.NET, algoritmi, numeri
Vai ai contenuti

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());
   }


© 2020 Carlo Vecchio
Torna ai contenuti