Calendar
1. Inleiding
2. Een simepele kalender
3. Uitbreiden die handel
 top
1. Inleiding
Deze tutorial is een soort van 'pauze' tussen het saaie gedeelte.
Want er is nog lang niet genoeg uitgelegd om een deftig formulier te maken.
Maar om toch al iets te kunnen maken dat er al wat uit ziet zonder al te veel moeite te doen is deze tutorial er.
Ik ga hier bespreken hoe simpel het is om een dynamische kalender via asp.NET te maken.
Slechts enkele regeltjes en je hebt al een kalendar en daarna gaan we uitbreiden (layout veranderen).
top
2. Een simpele kalender
'Calendar' is een van de krachtigste en meest flexibele besturingselementen.
Het heeft dertig eigenschappen die we kunnen aanpassen van het uiterlijk van de kalender.
Het is heel gemakelijk te gebruiken voor het selecteren van data en het weergeven van datumgerelateerde gegevens (agenda).
Om even een kort voorbeeld te illustreren:
Enkele datumgegevens opvoegen in combinatie met een aantal gebeurtenissen en deze gewoon toevoegen aan de verzameling 'selectedDates' van 'Calendar'.
Als er op de datum wordt geklikt worden deze gebeurtenissen getoond.
En nu aan de slag.
We openen een nieuw bestand: 'kalender.aspx' dat er zo uit ziet.
<%@ Page Language="VB" %>
<script runat="server">
' Insert page code here
'
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<asp:label id="titel" text="Kalender" runat="server" />
<br />
<!-- hier komt straks de kalender -->
</form>
</body>
</html>
|
Dit is hopelijk niet te ingewikkeld.
Gewoon een simpel labeltje aanmaken.
En dan nu het 'echte werk' (ook al is het maar 1 klein regeltje).
<asp:calendar runat="server" />
|
En kijk nu al maar is hoe het er uit ziet.
Amper een regel code en er staat al een enorm kalender script op je pagina.
En nu kan het echte werk beginnen.
We gaan een 'actie' ondernemen als de datum veranderd.
Dit gaan we doen door een simpele sub aan te roepen als de 'selectie veranderd' (onselectionchange).
Deze sub zal de waarde van een "label" veranderen in die van de "selectie".
We beginnen met de label aan te maken en de kalender een ID mee te geven.
<asp:calendar runat="server" id="kalender" onselectionchanged="setText" />
<br />
<asp:label id="datum" runat="server" />
|
Vervolgens maken we de sub 'setText' aan.
Deze wordt aangeroepen als de selectie veranderd.
sub setText(Sender As Object, e As EventArgs)
datum.Text = kalender.selectedDate
End Sub
|
De waarde van 'datum' (onze label die we hebben aangemaakt) krijgt de waarde van de selectie van de kalender.
Niets moeilijks aan.
Nu zie je vast wel dat als je de kalender voor het eerst opent er niets geselecteerd is.
Dit kunnen we natuurlijk veranderen.
We gaan een actie uitvoeren als de pagina wordt geladen waardoor de datum van vandaag wordt geselecteerd.
Dit gebeurd via 'sub Page_Load'.
Hierin zetten we de selectedDate gelijk aan de huidige datum (Now).
Sub Page_Load
kalender.selectedDate = Now()
End Sub
|
Nu dat we een beetje kunnen 'spelen' met de informatie die de kalender bevat zou het ook wel leuk zijn om met de layout te kunnen spelen.
top
3. Uitbreiden die handel
Zoals ik al zei heeft 'calendar' 30 verschillende opties om de layout te veranderen.
Deze kan je allemaal bekijken op http://msdn.microsoft.com(Hier vind je wel wat interessants, en hier nog mee: JSP Tutorials).
Het is eerder een manier van uittesten en proberen.
Hieronder geef ik een voorbeeld hoe je jou kalender qua layout een beetje kan aanpassen.
<asp:calendar runat="server" id="kalender"
backcolor="#ffffff"
forecolor="#C4C4C4"
borderwidth="5"
borderstyle="groove"
bordercolor="blue"
cellpadding="2"
cellspacing="2"
nextmonthtext=" next >"
prevmonthtext=" < prev"
width="500">
<titlestyle backcolor="#000000" forecolor="#ffffff" />
</asp:calendar>
|
Mijn kalender ziet er nu zo uit:
En nu zou ik zeggen: nog veel kalender plezier!
top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.2) 