OnBuSys - Integeration des Buchungskalenders PDF Drucken E-Mail

Darstellung im separaten Fenster

Die 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.
Die Sprache kann auch nach dem Start der Belegungsübersichten durch Klicks auf die Flagge geändert werden.

Wenn Sie die Höhe des Fensters verändern wollen, müssen Sie den Wert '525' an beiden Stellen ändern.
Start in der default- oder momentan aktiven Sprache.

<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&amp;hoehe=525','','width = 615, height = '+hoehe+',top=20,left=350,scrollbars=no,resizable=yes');return false;">Buchungskalender</a>

So sieht's aus


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&amp;hoehe=525&amp;lan=fr-FR','','width = 615, height = '+hoehe+',top=20,left=350,scrollbars=no,resizable=yes');return false;">Buchungskalender</a>

So sieht's aus

 

Darstellung im IFRAME

Wenn 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.
Wegen der Sicherheitseinstellungen von Javascript, die nicht geändert werden können, funktioniert diese Schnittstelle nur, wenn OnBuSys in der gleichen Domain installiert wurde, in der Sie auch Ihre Objekte anbieten. Dieser Sicherheitsmechanismus wird bereits wirksam, wenn Sie beim 'Pfad_zum_Ordner_OBS' für die Belegungsübersicht am Beginn 'www' verwenden und beim Pfad für den Buchungskalender aber nicht. Es ist also bei der Belegungsübersicht und dem Buchungskalender exakt der gleiche 'Pfad_zum_Ordner_OBS' zu verwenden.
Selbstverständlich können Sie auch mit separaten Links den Buchungskalender auf der gleichen Seite öffnen, nur können Sie bei verschiedenen Domains die vorhandene Möglichkeit mit 'links=2' nicht nutzen.

Diese Javascript-Funktion lautet bei den einzelnen Belegungsübersichten:

bei 'belegung.php': function belbuchen(url,benutzer,obj)
bei 'belegungdiv.php' function divbuchen(url,benutzer,obj)
bei 'minibelegung': function minibuchen(url,benutzer,obj)
bei 'miniTAB': function minibuchTAB(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.

Die entsprechende Funktion wird aufgerufen, wenn der Buchungslink in der Belegungsübersicht geklickt wird. Die Parameter der Funktion liefern folgende Werte, mit denen Sie die Adresse aufbauen können, mit der der zugehörige Buchungskalender, wie in dem vorhergenden Beispiel, dargestellt werden kann (der Benutzername sei 'domizil', der Objektname 'Buttje'):

url liefert: Buchung.php?id=domizil@Buttje
Die beiden Parameter 'benutzer' und 'obj' sind bereits in 'url' vorhanden, werden zusätzlich separat geliefert.
benutzer liefert: domizil und
obj liefert: Buttje

Mit der Anweisung: url='http://Pfad_zum_Ordner_OBS/OBS/'+url+'&amp;hoehe=440' erhalten Sie für url genau die erforderliche Adresse:  http://Pfad_zum_Ordner_OBS/OBS/Buchung.php?id=domizil@Buttje&amp;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.
Mit dem folgenden Link kann diese Seite direkt aus Ihrer Seite heraus gestartet 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.
Dies funktioniert allerdings beim Internet Explorer erst ab der Version 7. Bei Versionen darunter wird der Layer zwar dargestellt, bleibt beim Scrollen aber nicht fest.
Die zugehörige Datei lautet 'buchdemo2.html ' und befindet sich ebenfalls im Ordner 'OBS/Demos'.

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.
Die zugehörige Datei lautet 'minibelegbuch.html ' und befindet sich ebenfalls im Ordner 'OBS/Demos'.

So sieht's aus (mit dem Objekt 'Buttje')


 

nach oben

Aktualisiert ( Mittwoch, 17. Februar 2010 07:24 )