» Projekte » gsCalendar » Dokumentation » Aussehen verändern

gsCalendar: Aussehen verändern

Die grundsätzliche Anpassung des Aussehens - vor allem der Farben - kann im Stylesheet (gscalendar.css) vorgenommen werden.

Weitere Anpassungsmöglichkeiten sind:

Beschriftung des Buttons ändern

setButtonText([string text])

Mit dieser Methode kann die Beschriftung des Buttons geändert werden, der den Kalender ein- und ausblendet. Der Standardwert ist ". . .", kann aber mit dieser Methode auf jeden beliebigen Text geändert werden. Um anstatt des Textes ein Bild (z.B. einen Pfeil) angezeigt zu bekommen, kann man den Aufruf auch ohne Übergabe eines Textes durchführen. Welches Bild dann angezeigt wird, lässt sich im Stylesheet einstellen (siehe: Globale Einstellungen).

Beispiele:

// ein anderer Text als Beschriftung...
cal.setButtonText('Kalender anzeigen');

// ein Bild als Beschriftung
cal.setButtonText();

// mit diesem Aufruf wird ebenfalls ein
// ein Bild anstatt des Textes angezeigt
cal.setButtonText('');

Hinweis: Bei Verwendung eines Bildes muss gegebenenfalls der Pfad und Dateiname des Bildes im Stylesheet geändert werden. Die nötige Änderung kann in der Datei gscalendar.css (Zeile 134) in der Klasse input.calendar-button-image gemacht werden.

Beispiel:

/* Stylesheet (Zeile 134) */
background-image: url(/pfad/zum/bild/arrow.gif);
enablePopupInfo([boolean enable])

Wenn die Maus über ein Datum fährt können zusätzliche Informationen angezeigt werden. Standardmäßig wird für das aktuell "gewählte Datum" sowie für "Heute" eine solche Information in einem PopUp angezeigt. Möchte man auch bei allen anderen Tagen das Datum als PopUp angezeigt bekommen, muss man die Methode enablePopupInfo() mit dem Parameter true aufrufen.

Beispiele:

// PopUp-Informationen anzeigen
cal.enablePopupInfo(true);

// PopUp-Informationen nicht anzeigen
cal.enablePopupInfo(false);

Fußzeile mit aktuellem Datum anzeigen

enableFooter([boolean enable])

Mit dieser Methode kann gesteuert werden, ob die Fußzeile mit dem aktuellem Datum und dem Link zum aktuellen Monat/Jahr angezeigt werden soll oder nicht. Diese Zeile wird standardmäßig angezeigt, kann jedoch durch den Aufruf von enableFooter() mit dem Parameter false ausgeblendet werden.

Beispiele:

// die Fußzeile anzeigen
cal.enableFooter(true);

// die Fußzeile ausblenden
cal.enableFooter(false);

Verschiedene Stylesheets verwenden

setStylePrefix(string prefix)

Um auf einer Seite mehrere Kalender verwenden zu können, die sich zum Beispiel durch die Farbe unterscheiden sind mehrere unterschiedliche Stylesheets nötig. Damit dies funktioniert, kann man im Stylesheet allen Klassennamen ein Prefix voranstellen. Mit dem Aufruf dieser Methode lässt sich dann für jeden Kalender der zu verwendete Prefix angeben.

Beispiel:

// In der CSS-Datei wurden allen Klassen
// der Prefix "blue-" vorangestellt.
// Beispiel: table.blue-calendar-table

// den Prefix zuweisen
cal.setStylePrefix('blue-');
Zurück zum Inhaltsverzeichnis