» Projekte » gsCalendar » Dokumentation » Grundlagen
gsCalendar: Grundlagen
Kalender erzeugen
gsCalendar(string calendarName, string inputElementId)
Diese Funktion erstellt einen neuen Kalender. Der Wert des ersten Parameters calendarName muss mit dem Variablennamen übereinstimmen (hier im Beispiel: cal). Der zweite Parameter ist die ID des <input>-Elements, in dem das Datum ausgegeben werden soll.
Beispiel:
var cal = new gsCalendar('cal', 'date_input');
Kalender einfügen
insertCalendar()
Der Aufruf dieser Funktion fügt den Kalender in das Dokument ein. Der Aufruf darf erst durchgeführt werden, nachdem im HTML-Code das <input>-Element eingefügt wurde. (siehe: Kalender in HTML einbinden)
Beispiel:
cal.insertCalendar();
Eingabefeld initialisieren
initInputElement()
Mit dieser Methode lässt sich dem Eingabefeld das vorausgewählten Kalenderdatum zuweisen. Somit enthält das Feld schon nach dem Laden der Seite das gewünschte Datum. Dieses ist normalerweise das aktuelle Datum, aber kann natürlich auch geändert werden (siehe: Das vorausgewählte Datum festlegen).
Beispiel:
// Eingabefeld initialisieren, am besten gleich
// nach dem Aufruf von insertCalendar()
cal.initInputElement();
Kalender in HTML einbinden
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Seitentitel</title>
<link href="gscalendar.css" rel="stylesheet" type="text/css" />
<script src="gscalendar.js" type="text/javascript"></script>
<script type="text/javascript">
var cal = new gsCalendar('cal', 'date_input');
</script>
</head>
<body>
<form action="form.php" method="post">
<!-- Einige Formularelemente ... -->
<input type="text" name="date" id="date_input" />
<script type="text/javascript">
cal.insertCalendar();
cal.initInputElement();
</script>
</form>
</body>
</html>