| OnBuSys - Integeration des Buchungskalenders |
|
|
|
Darstellung im separaten FensterDie einfachste Variante ist, dass man den Buchungskalender in einem separaten Fenster öffnet. Dabei erhalten Sie ein Fenster ohne Browser-Navigation in idealer Größe. Dazu müssen Sie lediglich den unten stehenden Link in Ihre Seite kopieren, wobei die Objektnamen (z.B. 'Buttje') und der Name 'Pfad_zum_Ordner_OBS' durch die tatsächlichen zu ersetzen sind. Der Buchungskalender kann direkt in einer im TAB 'Einstellungen' aktivierten Sprache gestartet werden, wenn Sie in dem URL den optionalen Parameter '&lan=xy-XY', z.B. '&lan=fr-FR' verwenden. Ohne den Parameter wird der Buchungskalender in der sog. default- oder momentan aktiven Sprache gestartet (siehe 1. Beispiel). Eine gewählte Sprache bleibt bei einer Browsersitzung für alle Belegungsübersichten und Buchungskalender aktiv, wenn sie nicht explizit geändert wird. Wenn Sie die Höhe des Fensters verändern wollen, müssen Sie den Wert '525' an beiden Stellen ändern. <a href="#" onclick="hoehe=525; browser=navigator.userAgent.toLowerCase(); if (browser.indexOf('safari')>-1) {hoehe+=10;} window.open('http://Pfad_zum_Ordner_OBS/OBS/Buchung.php?id=domizil@Buttje&hoehe=525','','width = 615, height = '+hoehe+',top=20,left=350,scrollbars=no,resizable=yes');return false;">Buchungskalender</a> Start in der Sprache Französisch.
<a href="#" onclick="hoehe=525; browser=navigator.userAgent.toLowerCase(); if (browser.indexOf('safari')>-1) {hoehe+=10;} window.open('http://Pfad_zum_Ordner_OBS/OBS/Buchung.php?id=domizil@Buttje&hoehe=525&lan=fr-FR','','width = 615, height = '+hoehe+',top=20,left=350,scrollbars=no,resizable=yes');return false;">Buchungskalender</a>
Darstellung im IFRAMEWenn Sie den Buchungskalender in Ihre Homepage integrieren wollen, können Sie dazu sogenannte iframes verwenden. Sie können wie folgt vorgehen: Platzieren Sie zunächst folgende Javascript-Funktion in den head-Bereich Ihrer Seite: <script type="text/javascript"> function buchen(obj) { if (obj=='ENDE') { document.getElementById('buchfr').style.width='0px'; document.getElementById('buchfr').style.height='0px'; document.getElementById('buchfr').src='http://Pfad_zum_Ordner_OBS/OBS/leer.php'; } else { document.getElementById('buchfr').style.width='615px'; document.getElementById('buchfr').style.height='440px'; document.getElementById('buchfr').src='http://Pfad_zum_Ordner_OBS/OBS/Buchung.php?id=domizil@'+obj+'&hoehe=440'; } </script> Falls die Höhe des IFrames angepasst werden soll, muss der Wert '440' an beiden Stellen geändert werden. Dann müssen Sie folgenden html-Code in Ihre Seite an der Stelle einfügen, an der der Buchungskalender erscheinen soll.
<div id="contentID" style="padding:10px;"> <iframe id="buchfr" style="width:0px;height:0px;" src="http://Pfad_zum_Ordner_OBS/OBS/leer.php" scrolling="no" frameborder="0"> </iframe> </div>
Schließlich benötigen Sie noch zwei Links, mit denen die Javascript-Funktion 'buchen(obj)' aufgerufen bzw. der Buchungsvorgang beendet wird. Hier wurde dies mit zwei Buttons realisiert: <input type="button" value="Buttje" onclick="javascript:buchen('Buttje')"> <input type="button" value="ENDE" onclick="javascript:buchen('ENDE')"> So sieht's aus (mit mehreren Objekten und Belegungsübersicht) Bei den drei folgenden Beispielen wird die Möglichkeit verwendet, den Buchungskalender direkt aus der Belegungsübersicht heraus im gleichen Fenster zu öffnen. Dazu haben Sie als Schnittstelle eine Javascript-Funktion dann zur Verfügung, wenn Sie den Parameter 'links=2' bei der Blegungsübersicht verwenden. bei 'belegung.php': function belbuchen(url,benutzer,obj) Die verwendete Funktion ist im <head>-Bereich Ihrer Seite, auf der sich die Belegungsübersicht befindet und auf der der Buchugskalender geöffnet werden soll, zu platzieren. url liefert: Buchung.php?id=domizil@Buttje Mit der Anweisung: url='http://Pfad_zum_Ordner_OBS/OBS/'+url+'&hoehe=440' erhalten Sie für url genau die erforderliche Adresse: http://Pfad_zum_Ordner_OBS/OBS/Buchung.php?id=domizil@Buttje&hoehe=440 Im folgenden Beispiel wird 'belegungdiv.php' verwendet. Neben dem Buchungskalender wird eine Sidebar zur Verfügung gestellt, in die Sie optional zu jedem Objekt ein Bild und Text eingeben können. Die zugehörige Datei lautet 'belegbuch.html' und befindet sich im Ordner 'OBS/Demos'. Der Quelltext ist mit Hinweis-Kommentaren versehen und kann von Ihnen auf einfache Weise an Ihre Bedürfnisse angepasst werden. <a title="DEMO" target="_blank" href="http://Pfad_zum_Ordner_OBS/OBS/Demos/belegbuch.html">Belegungs- und Buchungskalender</a> So sieht's aus (mit allen Objekten)
Hier wird 'minibelegung.php' verwendet. Der Buchungskalender wird als Layer, der beim Scrollen des Hauptfensters seine Position beibehält, an einer festen Position über den Inhalt des Browserfensters gelegt. So sieht's aus (mit mehreren Objekten)
Im dritten Beipiel wird 'miniTAB.php' verwendet. Der Bereich, in dem bei dieser Demo ein Bild angezeigt wird, kann zur Präsentation Ihres Objektes verwendet werden. So sieht's aus (mit dem Objekt 'Buttje')
|
| Aktualisiert ( Mittwoch, 17. Februar 2010 07:24 ) |