Werken met de Calendar control

De tot nog toe besproken server controls zijn allemaal betrekkelijk simpel, en komen min of meer overeen met elementen in HTML. Zelfs de validatie controls hebben simpele functionaliteit, en gedragen zich eigenlijk als een stukje opgemaakte tekst. Server controls kunnen echter ook veel complexer zijn, en opgebouwd zijn uit meerdere server controls (of HTML elementen). Dit betekent in eerste instantie dat het opmaken ervan niet zo eenvoudig is als met een van de andere server controls, omdat u vaak de verschillende elementen verschillend wilt opmaken. Dit is goed te demonstreren aan de hand van de Calendar control. Het voordeel van de Calendar control is verder dat het gebruikers in staat stelt om een datum te selecteren in een kalender, zodat ze niet zelf de datum in hoeven te typen. Dit voorkomt dat de gebruiker een fout maakt en een datum intypt die niet bestaat (bijvoorbeeld de dagen en maanden verkeerd om). Verder kunt u in gebeurteniscode met de waarde van de kalender als datum werken, en hoeft u dus niet tekst te gaan converteren naar een datum. U kunt de kalender control invoegen door in uw pagina de volgende code te gebruiken:

<asp:Calendar id="Calendar1" Runat="server"></asp:Calender>

U kunt natuurlijk ook de Calendar control op uw pagina slepen als u met een visuele designomgeving werkt. De bovenstaande code geeft een hele simpele kalender weer, met een minimum aan opmaak, zoals u kunt zien in figuur 1.

Figuur 1, Calendar control zonder opmaak met een geselecteerde datum

U kunt nu net zoals met bijvoorbeeld de Label control de opmaak bepalen met eigenschappen als BackColor, en Font, zoals in de code hieronder. Daarmee verandert u de opmaak zoals die voor de gehele kalender van toepassing is. De verdere opmaak, zoals die van de kop of de geselecteerde dag verandert hierdoor niet, zoals u kunt zien in figuur 2.

<asp:Calendar id="Calendar1" Runat="server"
     BackColor="#C0C0FF" Font-Names="Arial,Helvetica"
     Font-Size="X-Small">
</asp:Calender>

Figuur 2, Calendar control met simpele opmaak

Naast de reeds bekende opmaak eigenschappen bevat de Calendar control nog meer algemene eigenschappen bedoeld voor het opmaken van de kalender. Deze eigenschappen staan in tabel 1.

Eigenschap Omschrijving

CellPadding Het aantal pixels dat de tekst van de rand van de cel in de tabel af moet staan.

CellSpacing Het aantal pixels dat tussen de cellen in de tabel moet zitten.

DayNameFormat Weergave van de dagnamen boven de dagen. De mogelijke waardes zijn Full voor de hele naam, Short (standaard) voor afgekorte namen, FirstLetter voor de eerste letter van de dag, of FirstTwoLetters voor de eerste twee letters van de dag.

FirstDayOfWeek Bepaalt welke dag de eerste dag van de week is. De mogelijke waardes zijn de dagnamen (in het Engels), of Default (standaard). Bij Default is de eerste dag afhankelijk van de gekozen landinstellingen van de server, website, of pagina.

NextMonthText Tekst die wordt weergegeven in de link naar de volgende maand. Standaard is dit >, hetgeen een pijltje naar rechts weergeeft (>).

NextPrevFormat Bepaalt wat wordt weergegeven voor de navigatie naar de vorige of volgende maand. De mogelijke waardes zijn CustomText (standaard) voor de teksten gegeven in NextMonthText en PrevMonthText, ShortMonth voor afgekorte maandnamen, of FullMonth voor de hele maandnamen.

PrevMonthText Tekst die wordt weergegeven in de link naar de vorige maand. Standaard is dit <, hetgeen een pijltje naar links weergeeft (<).

SelectedDate De op dit moment geselecteerde datum. Standaard is dit leeg, maar u kunt hier een datum opgeven als u wilt dat een bepaalde datum bij het opvragen van de pagina geselecteerd is. Deze eigenschap wijzigt als de gebruiker een andere datum selecteert.

SelectionMode Geeft aan wat de gebruiker kan selecteren. De mogelijkheden zijn None als de gebruiker niets mag selecteren, Day (standaard) voor het selecteren van een dag, DayWeek voor het selecteren van een dag of week, of DayWeekMonth voor het selecteren van een dag, week of maand.

SelectMonthText Tekst die wordt weergegeven in de link voor het selecteren van een hele maand (indien mogelijk door de gekozen SelectionMode). Standaard is dit >>, hetgeen twee pijltjes naar rechts weergeeft (>>).

SelectWeekText Tekst die wordt weergegeven in de link voor het selecteren van een week maand (indien mogelijk door de gekozen SelectionMode). Standaard is dit >, hetgeen een pijltje naar rechts weergeeft (>).

ShowDayHeader Geeft aan of de dagnamen boven de dagen moeten worden weergegeven. De mogelijke waardes zijn True (standaard) of False.

ShowGridLines Geeft aan of scheidingslijnen tussen de dagen moeten komen te staan. De mogelijke waardes zijn True of False (standaard).

ShowNextPrevMonth Geeft aan of de navigatie naar andere maanden getoond moet worden. De mogelijke waardes zijn True (standaard) of False.

ShowTitle Geeft aan of de balk met de maandnaam en de maandnavigatie getoond moet worden. De mogelijke waardes zijn True (standaard) of False.

TitleFormat Bepaalt hoe de kop met de maand wordt weergegeven. De mogelijke waardes zijn MonthYear (standaard) voor de maand met het jaar, of Month voor de maand zonder het jaar.

VisibleDate Bepaalt welke maand moet worden weergegeven als de pagina voor het eerst door de gebruiker wordt opgevraagd. De waarde is een volledige datum aan de hand waarvan de maand bepaald wordt.

Tabel 1, Algemene opmaak eigenschappen van de Calendar control

De eigenschappen van de Calendar control in tabel 1 hebben betrekking op allerlei onderdelen van de kalender. Omdat de kalender in de browser wordt weergegeven als een HTML tabel, zijn CellPadding en CellSpacing hier ook onderdeel van. De andere eigenschappen hebben betrekking op weergave van bijvoorbeeld de navigatie. Het loont de moeite om hier (bij voorkeur in een visuele designomgeving) mee te experimenteren, zodat u ziet wat de verschillende eigenschappen precies voor effect hebben. Om u een idee te geven gebruikt de code hieronder enkele verschillende eigenschappen. Het effect van die eigenschappen ziet u in figuur 3.

<asp:Calendar id="Calendar1" runat="server"
     Font-Names="Arial,Helvetica" Font-Size="X-Small"
     BackColor="#C0C0FF" ShowGridLines="True"
     DayNameFormat="FirstTwoLetters" FirstDayOfWeek="Monday"
     NextPrevFormat="ShortMonth" SelectionMode="DayWeekMonth"
     SelectMonthText="M" SelectWeekText="W"
     SelectedDate="2002-10-10">
 </asp:Calendar>

Figuur 3, Calender control met uitgebreide opmaak

Stijlen gebruiken voor delen van de kalender

De kalender in figuur 3 ziet er al aardig uit, maar u kunt de verschillende delen van de kalender nog veel verder opmaken. Zo kunt u opmaakstijlen toepassen op de geselecteerde dag, de huidige dag, dagen in het weekend, dagen in een andere maand, en ga zo maar door. Voor elk van deze elementen heeft de kalender een specifieke stijleigenschap die dezelfde mogelijkheden heeft als de Label control. Omdat in principe ieder element in de cel van een tabel staat zijn ook de eigenschappen in tabel 2 van toepassing. In tabel 3 ziet u de verschillende stijlen die u kunt toepassen.

Eigenschap Omschrijving

HorizontalAlign Horizontale uitlijning van de tekst in de cel van de tabel voor de kalender. De mogelijke waardes zijn NotSet (standaard) voor niet gedefiniδerd, Left voor links uitlijnen, Center voor centreren, Right voor rechts uitlijnen, of Justify voor uitvullen.

VerticalAlign Verticale uitlijning van de tekst in de cel van de tabel voor de kalender. De mogelijke waardes zijn NotSet (standaard) voor niet gedefiniδerd, Top voor boven, Middle voor centreren, of Bottom voor onder.

Wrap Geeft aan of tekst door moet lopen op de volgende regel als de rand van de cel bereikt is. De mogelijke waardes zijn True (standaard) of False.

Tabel 2, Additionele eigenschappen voor elementen in de Calendar control

Eigenschap Omschrijving

DayHeaderStyle Stijl van de dagenaanduidingen boven de dagen.

DayStyle Stijl voor alle dagen. Deze stijl wordt overschreven door sommige andere meer specifieke stijlen.

NextPrevStyle Stijl voor de navigatie naar de vorige en volgende maand.

OtherMonthDayStyle Stijl voor dagen die weergegeven worden maar niet van de huidige maand zijn.

SelectedDayStyle Stijl van de geselecteerde dag.

SelectorStyle Stijl van de elementen waarmee een maand of week geselecteerd kan worden.

TitleStyle Stijl van de kop met de maand (en eventueel jaar).

TodayDayStyle Stijl van vandaag.

WeekendDayStyle Stijl van weekend dagen.

Tabel 3, Stijlelementen voor de Calendar control

Net zoals u in HTML rijen toevoegd aan een tabel met sub-elementen, voegt u de stijlen van de kalender in als sub-elementen van de Calendar control. De code hieronder laat dat duidelijk zien. In de code hieronder zijn alle verschillende stijlen opgenomen, maar dit is absoluut niet verplicht. Het geeft u echter een idee van wat er allemaal mogelijk is. Het resultaat ziet u in figuur 4.

<asp:Calendar id="Calendar1" runat="server" SelectionMode="DayWeekMonth"
     BackColor="#C0C0FF" Font-Names="Arial,Helvetica" Font-Size="X-Small"
     DayNameFormat="FirstTwoLetters" FirstDayOfWeek="Monday"
     NextPrevFormat="ShortMonth" ShowGridLines="True" SelectMonthText="M"
     SelectWeekText="W" SelectedDate="2002-10-04">
  <TodayDayStyle borderwidth="2px" borderstyle="Solid" bordercolor="Red">
  </TodayDayStyle>
  <SelectorStyle font-bold="True" backcolor="CornflowerBlue">
  </SelectorStyle>
  <DayStyle font-bold="True"></DayStyle>
  <NextPrevStyle forecolor="Silver"></NextPrevStyle>
  <DayHeaderStyle forecolor="White" backcolor="Blue">
  </DayHeaderStyle>
  <SelectedDayStyle backcolor="#FF8080"></SelectedDayStyle>
  <TitleStyle font-bold="True" forecolor="White" backcolor="#8080FF">
  </TitleStyle>
  <WeekendDayStyle forecolor="Blue"></WeekendDayStyle>
  <OtherMonthDayStyle forecolor="Gray" backcolor="Silver">
  </OtherMonthDayStyle>
</asp:Calendar>

Figuur 4, Calendar control met allerlei opmaak

De geselecteerde datum uitlezen

Nu u de kalender helemaal naar believen kunt opmaken, rest nog het uitlezen van de geselecteerde datum. Hiervoor zijn twee dingen van belang, wat er gebeurt als de gebruiker een andere datum selecteert, en hoe u de datum kunt uitlezen. In het geval dat de gebruiker meerdere dagen heeft geselecteerd met een week of maandselectie, dan moet u meerdere dagen kunnen uitlezen. De gebeurtenismethode die uitgevoerd moet worden als een andere datum geselecteerd wordt kunt u aangeven met de OnSelectionChanged eigenschap. Vervolgens kunt u via SelectedDate opvragen welke datum geselecteerd is, hetgeen een datum retourneert in het juiste gegevenstype (meer over gegeventypen leert u in Variabelen en constanten). In het geval dat er meerdere dagen geselecteerd zijn, geeft dit de eerste dag in de rij weer, en kunt u via SelectedDates alle data opvragen. De SelectedDates eigenschap is een collectie met data (meer over collecties leert u in Lijststructuren).

⌐2002 Microsoft Nederland BV

Eigenschap	Omschrijving
CellPadding	Het aantal pixels dat de tekst van de rand van de cel in de tabel af moet staan.
CellSpacing	Het aantal pixels dat tussen de cellen in de tabel moet zitten.
DayNameFormat	Weergave van de dagnamen boven de dagen. De mogelijke waardes zijn Full voor de hele naam, Short (standaard) voor afgekorte namen, FirstLetter voor de eerste letter van de dag, of FirstTwoLetters voor de eerste twee letters van de dag.
FirstDayOfWeek	Bepaalt welke dag de eerste dag van de week is. De mogelijke waardes zijn de dagnamen (in het Engels), of Default (standaard). Bij Default is de eerste dag afhankelijk van de gekozen landinstellingen van de server, website, of pagina.
NextMonthText	Tekst die wordt weergegeven in de link naar de volgende maand. Standaard is dit >, hetgeen een pijltje naar rechts weergeeft (>).
NextPrevFormat	Bepaalt wat wordt weergegeven voor de navigatie naar de vorige of volgende maand. De mogelijke waardes zijn CustomText (standaard) voor de teksten gegeven in NextMonthText en PrevMonthText, ShortMonth voor afgekorte maandnamen, of FullMonth voor de hele maandnamen.
PrevMonthText	Tekst die wordt weergegeven in de link naar de vorige maand. Standaard is dit <, hetgeen een pijltje naar links weergeeft (<).
SelectedDate	De op dit moment geselecteerde datum. Standaard is dit leeg, maar u kunt hier een datum opgeven als u wilt dat een bepaalde datum bij het opvragen van de pagina geselecteerd is. Deze eigenschap wijzigt als de gebruiker een andere datum selecteert.
SelectionMode	Geeft aan wat de gebruiker kan selecteren. De mogelijkheden zijn None als de gebruiker niets mag selecteren, Day (standaard) voor het selecteren van een dag, DayWeek voor het selecteren van een dag of week, of DayWeekMonth voor het selecteren van een dag, week of maand.
SelectMonthText	Tekst die wordt weergegeven in de link voor het selecteren van een hele maand (indien mogelijk door de gekozen SelectionMode). Standaard is dit >>, hetgeen twee pijltjes naar rechts weergeeft (>>).
SelectWeekText	Tekst die wordt weergegeven in de link voor het selecteren van een week maand (indien mogelijk door de gekozen SelectionMode). Standaard is dit >, hetgeen een pijltje naar rechts weergeeft (>).
ShowDayHeader	Geeft aan of de dagnamen boven de dagen moeten worden weergegeven. De mogelijke waardes zijn True (standaard) of False.
ShowGridLines	Geeft aan of scheidingslijnen tussen de dagen moeten komen te staan. De mogelijke waardes zijn True of False (standaard).
ShowNextPrevMonth	Geeft aan of de navigatie naar andere maanden getoond moet worden. De mogelijke waardes zijn True (standaard) of False.
ShowTitle	Geeft aan of de balk met de maandnaam en de maandnavigatie getoond moet worden. De mogelijke waardes zijn True (standaard) of False.
TitleFormat	Bepaalt hoe de kop met de maand wordt weergegeven. De mogelijke waardes zijn MonthYear (standaard) voor de maand met het jaar, of Month voor de maand zonder het jaar.
VisibleDate	Bepaalt welke maand moet worden weergegeven als de pagina voor het eerst door de gebruiker wordt opgevraagd. De waarde is een volledige datum aan de hand waarvan de maand bepaald wordt.

Eigenschap	Omschrijving
HorizontalAlign	Horizontale uitlijning van de tekst in de cel van de tabel voor de kalender. De mogelijke waardes zijn NotSet (standaard) voor niet gedefiniδerd, Left voor links uitlijnen, Center voor centreren, Right voor rechts uitlijnen, of Justify voor uitvullen.
VerticalAlign	Verticale uitlijning van de tekst in de cel van de tabel voor de kalender. De mogelijke waardes zijn NotSet (standaard) voor niet gedefiniδerd, Top voor boven, Middle voor centreren, of Bottom voor onder.
Wrap	Geeft aan of tekst door moet lopen op de volgende regel als de rand van de cel bereikt is. De mogelijke waardes zijn True (standaard) of False.

Eigenschap	Omschrijving
DayHeaderStyle	Stijl van de dagenaanduidingen boven de dagen.
DayStyle	Stijl voor alle dagen. Deze stijl wordt overschreven door sommige andere meer specifieke stijlen.
NextPrevStyle	Stijl voor de navigatie naar de vorige en volgende maand.
OtherMonthDayStyle	Stijl voor dagen die weergegeven worden maar niet van de huidige maand zijn.
SelectedDayStyle	Stijl van de geselecteerde dag.
SelectorStyle	Stijl van de elementen waarmee een maand of week geselecteerd kan worden.
TitleStyle	Stijl van de kop met de maand (en eventueel jaar).
TodayDayStyle	Stijl van vandaag.
WeekendDayStyle	Stijl van weekend dagen.