Widgets

Damit Sie OnBuSys in einfacher Weise in Ihre Homepage, auf der Sie Ihre Objekte anbieten, integrieren können, werden Ihnen im Folgenden einige sogenannte Widgets zur Verfügung gestellt. Dies sind Javascript Codefragmente, die Sie lediglich an geeigneter Stelle in den Seitenquelltext Ihrer Homepage kopieren müssen. Dabei ist zusätzlich nur erforderlich, dass Sie bei einigen wenigen Variablen die Werte an Ihre speziellen Gegebenheiten anpassen müssen, was ausführlich an den entsprechenden Stellen kommentiert ist.
So müssen Sie den Pfad_zum_Ordner_OBS in einer bestimmten Form eingeben.
Die entsprechende Kommentarzeile im Widget sieht folgendermaßen aus:
//Geben Sie für die Variable "obspfad" (Pfad_zum_Ordner_OBS) den entsprechenden Wert OHNE 'http://www.' ein
Lautet der Pfad zu Ihrem Ordner 'OBS' z.B.
http://www.fewo-am-See.de/Buchungen/OBS/
dann müssen Sie als Wert für die Variable obspfad eingeben:
obspfad='fewo-am-see.de/Buchungen';
Änderungen am eigentlichen Programmtext sind nicht erforderlich.

Damit die Widgets ordnungsgemäß funktionieren, müssen Sie noch zwei Dateien auf Ihren Server in den Ordner 'OBS' hochladen, die Sie sich mit dem folgenden Button herunterladen können:

Nachfolgend erhalten Sie einige Varianten, die in der Praxis oft verwendet werden. Über die Links können Sie sich jeweils bei einer Demoseite diese Variante ansehen. Dabei handelt es sich jeweils um eine bewusst einfach gehaltene Seite, auf der lediglich die Funktionalität der Variante dargestellt werden soll. Weiter können Sie mithilfe des Seitenquelltexts erkennen, wo die Codesequenzen eingefügt werden müssen und Sie können sich die entsprechenden Codesequenzen kopieren und in den Quelltext Ihrer html-Seite einfügen.

Alternativ dazu können Sie die Codesequenzen auch aus den Textfeldern kopieren, die Sie wahlweise ein- und ausblenden können.

Bei den ersten drei Varianten können Sie zum Testen die Codesequenzen in beliebige eigene html-Seiten einfügen. OnBuSys muss dafür nicht auf Ihrem Server installiert sein, hier werden die Objekte der Demoseite von OnBuSys verwendet.

Variante 1: Buchungskalender beim Objekt

Javascriptcode ein- ausblenden

<script type="text/javascript">
<!--
//Dieses Codefragment für jedes Objekt an der Stelle einfügen, an der der Buchungskalender erscheinen soll
//Geben Sie für die Variable "obspfad" (Pfad_zum_Ordner_OBS) den entsprechenden Wert OHNE 'http://www.' ein
var obspfad='onbusys.de';
//Geben Sie für die Variable "objekt" den Namen des Objektes ein, für das die Belegungstabelle erstellt werden soll
var objekt='Berg';
//Ändern Sie hier den Wert für die Höhe des Buchungskalenders:
var h=465;
//Geben Sie hier ein, ob der Buchungskalender am rechten oder linken Rand angezeit werden soll: right/left
var lage='left';
//Ändern Sie hier die Sprache, in der der Buchungskalender gestartet werden soll (de-DE,en-GB,fr-FR)
var lan='de-DE';
//Ändern Sie hier die Hintergrundfarbe und den Rand des IFrames für den Buchungskalender
var ifrcol='background-color:#ffffff;border:0px solid #909090;'
//Ab hier nur Änderungen, falls Sie mit javascript vertraut sind
var buID=objekt+'buch_id';
if (window.location.href.indexOf('://www.') > -1) {
  obspfad='www.'+obspfad;
}
hfr=h;
if (navigator.userAgent.toLowerCase().indexOf('safari')>-1) {hfr=h+10;}
adr='http://'+obspfad+'/OBS/Buchung.php?id=domizil@'+objekt+'&hoehe='+h+'&lan='+lan;
document.write('<div id="'+buID+'" scrolling="no" border="0" '+
  'style="float:'+lage+';width:625px;display:block;overflow:hidden;'+ifrcol+'"><\/div>');
//setTimeout wg. Opera
setTimeout('document.getElementById(\''+buID+'\').innerHTML=\'<iframe src= "'+adr+'" scrolling="no" border="0"'+
 'frameborder="0" style="width:620px;height:'+hfr+'px;overflow:hidden;padding:1px 5px 5px 5px;border:none;"<\/iframe>\'',50);
//-->
</script>

Variante 2: Minibelegungskalender beim Objekt mit oder ohne Link für einen separaten Buchungskalender

Auf der Demoseite sind zwei Buchungskalender integriert:
- ein 1x1 - Belegungskalender mit Buchungslink am linken Rand
- ein 3x2 - Belegungskalender ohne Buchungslinks am rechten Rand

Javascriptcode ein- ausblenden

<script type="text/javascript">
<!--
//Dieses Codefragment für jedes Objekt an der Stelle einfügen, an der die Belegungstabelle erscheinen soll
//Geben Sie für die Variable "obspfad" (Pfad_zum_Ordner_OBS) den entsprechenden Wert OHNE 'http://www.' ein
var obspfad='onbusys.de';
//Geben Sie für die Variable "objekt" den Namen des Objektes ein, für das die Belegungstabelle erstellt werden soll
var objekt='Berg';
//Geben Sie hier ein, wie viele Zeilen und Spalten die Tabelle haben soll
var zeilen=1;
var spalten=1;
//Geben Sie hier ein, ob der Buchungskalender am rechten oder linken Rand angezeit werden soll: right/left
var lage='left';
//Ändern Sie hier die Sprache, in der der Belegungskalender gestartet werden soll (de-DE,en-GB,fr-FR)
var lan='de-DE'
//Wählen Sie aus, ob der Belegungskalender einen Link zum Buchungskalender (separates Fenster) haben soll:
//-ohne Link: var link='0'
//-mit Link: var link='1'
var link='1';
//Ab hier nur Änderungen, falls Sie mit javascript vertraut sind
if (window.location.href.indexOf('://www.') > -1) {
  obspfad='www.'+obspfad;
}
var ho=143*zeilen;
var brows = navigator.userAgent.toLowerCase();
if (brows.indexOf('msi')>-1) {
  var brokenstring=brows.split(';');
  brokenstring=brokenstring[1].split(' ');
  if (Number(brokenstring[2]) < 8) {
    ho=147*zeilen; //IE unter 8.0
  }
}
var beID=objekt+'_id';
var belegsrc='http://'+obspfad+'/OBS/miniTAB.php?id=domizil@'+objekt+
             '&x='+spalten+'&y='+zeilen+'&links='+link+'&lan='+lan;
var br=156*spalten;
var divbr=152*spalten+10;
document.write('<div id="'+beID+'" scrolling="no" border="0" '+
  'style="float:'+lage+';width:'+divbr+
  'px;margin:0px;overflow:hidden;background-color:#ffffff;border:none;"><\/div>');
setTimeout('document.getElementById(\''+beID+'\').innerHTML=\'<iframe src= "'+belegsrc+
  '" scrolling="no" border="0" frameborder="0" style="width:'+br+'px;height:'+ho+
  'px;overflow:hidden;margin:5px;border:none;"<\/iframe>\'',50);
//-->
</script>

Variante 3: Belegungskalender für mehrere Objekte mit oder ohne Link für einen separaten Buchungskalender

Javascriptcode ein- ausblenden

<script type="text/javascript">
<!--
//Dieses Codefragment an der Stelle einfügen, an der die Belegungstabelle erscheinen soll
//Geben Sie für die Variable "obspfad" (Pfad_zum_Ordner_OBS) den entsprechenden Wert OHNE 'http://www.' ein
var obspfad='onbusys.de';
//Geben Sie für die Variable "ofeld" die durch Komma getrennten Objektnamen ohne Leerstellen ein:
//-Die Objekte erscheinen in der Tabelle in der angegebenen Reihenfolge.
//-Verwenden Sie den Leerstring '' für alle Objekte (alphabetische Anordnung).
var ofeld='Wald,Elfer,Buttje,Berg,AppHaus,AppMuschel,AppSeestern';
//Geben Sie hier ein, wie viele Objekte in der Tabelle dargestellt werden
var anzahl=7;
//geben Sie hier eine eindeutige fortlaufende Nummer für die Anzahl der Belegungstabellen,
//die Sie auf Ihrer Site verwenden. Beginnen Sie mit 1.
var lfdnr=1;
//Passen Sie hier ggf. die Breite Ihrer Belegungstabelle an
var br=878;
//Geben Sie hier den linken Rand für die Belegungstabelle an
var lrd=80;
//Ändern Sie hier die Sprache, in der der Belegungskalender gestartet werden soll (de-DE,en-GB,fr-FR)
var lan='de-DE';
//Wählen Sie aus, ob der Belegungskalender einen Link zum Buchungskalender (separates Fenster) haben soll:
//-ohne Link: var link='0'
//-mit Link: var link='1'
var link='1';
//Ab hier nur Änderungen, falls Sie mit javascript vertraut sind
if (window.location.href.indexOf('://www.') > -1) {
  obspfad='www.'+obspfad;
}
var ho=117 + (anzahl-3)*18;
var beID='_id'+lfdnr;
var belegsrc='http://'+obspfad+'/OBS/belegung.php?id=domizil'+'&links='+link+'&ofeld='+ofeld+'&lan='+lan;
var divbr=br+10;
document.write('<div id="'+beID+'" scrolling="no" border="0" '+
  'style="width:'+divbr+'px;margin-left:'+lrd+'px;background-color:#ffffff;border:none;"><\/div>');
//setTimeout wg. Opera
setTimeout('document.getElementById(\''+beID+'\').innerHTML=\'<iframe src= "'+belegsrc+
  '" scrolling="no" border="0" frameborder="0" style="width:'+br+'px;height:'+ho+
  'px;overflow:hidden;padding:10px;border:1px solid #909090;"<\/iframe>\'',50);
//-->
</script>

Im Gegensatz zu den vorangehenden Varianten, bei denen der Buchungskalender in einem separaten Fenster geöffnet wird, wird bei den folgenden drei Varianten der Buchungskalender in der gleichen Seite geöffnet und behält beim Scrollen seine Position bzgl. des Bildschirms. Dazu ist allerdings erforderlich, dass OnBuSys im gleichen home-Verzeichnis installiert wurde wie Ihre Homepage.
Außerdem müssen hierbei zwei Javascript Codefragmente verwendet werden:

Das erste Skript erzeugt jeweils den Buchungskalender und sollte in den Headbereich der Seite kopiert werden,
das zweite erzeugt die jeweilige Belegungsübersicht, das an die Stelle kopiert werden muss, an der die Belegungsübersicht auf der Seite erscheinen soll.

Variante 4: Minibelegungskalender beim Objekt mit Link für einen Buchungskalender in der gleichen Seite

Auf der Demoseite sind zwei Belegungskalender integriert:
- ein 1x1 - Belegungskalender am linken Rand
- ein 3x2 - Belegungskalender am rechten Rand

Javascriptcode ein- ausblenden

<script type="text/javascript">
<!--
//Die Homepage und OnBuSys müssen im gleichen home-Verzeichnis sein!
//Dieses Codefragment für den Buchungskalender nur einmal verwenden, normalerweise im head-Bereich
//Geben Sie für die Variable "obspfad" (Pfad_zum_Ordner_OBS) den entsprechenden Wert OHNE 'http://www.' ein
var obspfad='onbusys.de';
//Ändern Sie hier die Werte für die Platzierung des Buchungskalenders:
//x,y: Koordinaten der linken oberen Ecke, h:Höhe des Buchungskalenders
var x=300;
var y=10;
var h=550;
//Ändern Sie hier die Hintergrundfarbe und den Rand des IFrames für den Buchungskalender
var ifrcol='background-color:#ffffff;border:0px solid #909090;'
//Den Werte der folgenden Variablen nur ändern, falls er auf Ihrer Seite bereits vorkommt
var buID='buch_id';
//Ab hier nur Änderungen, falls Sie mit javascript vertraut sind
if (window.location.href.indexOf('://www.') > -1) {
  obspfad='www.'+obspfad;
}
function minibuchTAB(url,benutzer,obj) {
 splitRes=url.split("&");
 url=splitRes[0]+'&hoehe='+h+'&'+splitRes[1];
 if (splitRes.length > 2) {url+='&'+splitRes[2];}
 hfr=h;
 if (navigator.userAgent.toLowerCase().indexOf('safari')>-1) {hfr=h+10;}
 adr='http://'+obspfad+'/OBS/'+url;
 document.getElementById(buID).style.display='block';
 document.getElementById(buID).innerHTML='<img src="http://'+obspfad+'/OBS/cls.png" border="1" alt=" " '+
   'style="float:right;cursor:pointer;margin-right:5px;margin-top:2px;" '+
   'onclick="document.getElementById(\''+buID+'\').style.display=\'none\';">'+
   '<iframe src= "'+adr+'" scrolling="no" border="0" frameborder="0" '+
   'style="width:620px;height:'+hfr+'px;overflow:hidden;padding:1px 5px 5px 5px;border:none;"<\/iframe>';
}
document.write('<div id="'+buID+'" scrolling="no" border="0" '+
  'style="position:fixed;left:'+x+'px;top:'+y+'px;width:625px;display:none;overflow:hidden;'+ifrcol+'"><\/div>');
//-->
</script>

<script type="text/javascript">
<!--
//Dieses Codefragment für jedes Objekt an der Stelle einfügen, an der die Belegungstabelle erscheinen soll
//Geben Sie für die Variable "objekt" den Namen des Objektes ein, für das die Belegungstabelle erstellt werden soll
var objekt='Berg';
//Geben Sie hier ein, wie viele Zeilen und Spalten die Tabelle haben soll
var zeilen=1;
var spalten=1;
//Geben Sie hier ein, ob der Buchungskalender am rechten oder linken Rand angezeit werden soll: right/left
var lage='left';
//Ändern Sie hier die Sprache, in der der Belegungskalender gestartet werden soll (de-DE,en-GB,fr-FR)
var lan='de-DE';
//Ab hier nur Änderungen, falls Sie mit javascript vertraut sind
var ho=143*zeilen;
var brows = navigator.userAgent.toLowerCase();
if (brows.indexOf('msi')>-1) {
  var brokenstring=brows.split(';');
  brokenstring=brokenstring[1].split(' ');
  if (Number(brokenstring[2]) < 8) {
    ho=147*zeilen; //IE unter 8.0
  }
}
var beID=objekt+'_id';
var belegsrc='http://'+obspfad+'/OBS/miniTAB.php?id=domizil@'+objekt+'&x='+spalten+'&y='+zeilen+'&links=2&lan='+lan;
var br=156*spalten;
var divbr=152*spalten+10;
document.write('<div id="'+beID+'" scrolling="no" border="0" '+
  'style="float:'+lage+';width:'+divbr+'px;margin:0px;overflow:hidden;background-color:#ffffff;border:none;"><\/div>');
setTimeout('document.getElementById(\''+beID+'\').innerHTML=\'<iframe src= "'+belegsrc+
  '" scrolling="no" border="0" frameborder="0" style="width:'+br+'px;height:'+ho+
  'px;overflow:hidden;margin:5px;border:none;"<\/iframe>\'',50);
//-->
</script>

Variante 5: Belegungskalender für mehrere Objekte mit Link für einen Buchungskalender in der gleichen Seite

Hier sind alle Objekte in einer Tabelle sichtbar.

Javascriptcode ein- ausblenden

<script type="text/javascript">
<!--
//Die Homepage und OnBuSys müssen im gleichen home-Verzeichnis sein!
//Dieses Codefragment für den Buchungskalender nur einmal verwenden, normalerweise im head-Bereich
//Geben Sie für die Variable "obspfad" (Pfad_zum_Ordner_OBS) den entsprechenden Wert OHNE 'http://www.' ein
var obspfad='onbusys.de';
//Ändern Sie hier die Werte für die Platzierung des Buchungskalenders:
//x,y: Koordinaten der linken oberen Ecke, h:Höhe des Buchungskalenders
var x=300;
var y=10;
var h=550;
//Ändern Sie hier die Hintergrundfarbe und den Rand des IFrames für den Buchungskalender
var ifrcol='background-color:#ffffff;border:0px solid #909090;'
//Den Werte der folgenden Variablen nur ändern, falls er auf Ihrer Seite bereits vorkommt
var buID='buch_id';
//Ab hier nur Änderungen, falls Sie mit javascript vertraut sind
if (window.location.href.indexOf('://www.') > -1) {
  obspfad='www.'+obspfad;
}
function belbuchen(url,benutzer,obj) {
 splitRes=url.split("&");
 url=splitRes[0]+'&hoehe='+h+'&'+splitRes[1];
 if (splitRes.length > 2) {url+='&'+splitRes[2];}
 hfr=h;
 if (navigator.userAgent.toLowerCase().indexOf('safari')>-1) {hfr=h+10;}
 adr='http://'+obspfad+'/OBS/'+url;
 document.getElementById(buID).style.display='block';
 document.getElementById(buID).innerHTML='<img src="http://'+obspfad+'/OBS/cls.png" border="1" alt=" " '+
   'style="float:right;cursor:pointer;margin-right:5px;margin-top:2px;" '+
   'onclick="document.getElementById(\''+buID+'\').style.display=\'none\';">'+
   '<iframe src= "'+adr+'" scrolling="no" border="0" frameborder="0" '+
   'style="width:620px;height:'+hfr+'px;overflow:hidden;padding:1px 5px 5px 5px;border:none;"<\/iframe>';
}
document.write('<div id="'+buID+'" scrolling="no" border="0" '+
  'style="position:fixed;left:'+x+'px;top:'+y+'px;width:625px;display:none;overflow:hidden;'+ifrcol+'"><\/div>');
//-->
</script>

<script type="text/javascript">
<!--
//Dieses Codefragment an der Stelle einfügen, an der die Belegungstabelle erscheinen soll
//Geben Sie für die Variable "ofeld" die durch Komma getrennten Objektnamen ohne Leerstellen ein:
//-Die Objekte erscheinen in der Tabelle in der angegebenen Reihenfolge.
//-Verwenden Sie den Leerstring '' für alle Objekte (alphabetische Anordnung).
var ofeld='Wald,Elfer,Buttje,Berg,AppHaus,AppMuschel,AppSeestern';
//Geben Sie hier ein, wie viele Objekte in der Tabelle dargestellt werden
var anzahl=7;
//geben Sie hier eine eindeutige fortlaufende Nummer für die Anzahl der Belegungstabellen,
//die Sie auf Ihrer Site verwenden. Beginnen Sie mit 1.
var lfdnr=1;
//Passen Sie hier ggf. die Breite Ihrer Belegungstabelle an
var br=878;
//Geben Sie hier den linken Rand für die Belegungstabelle an
var lrd=80;
//Ändern Sie hier die Sprache, in der der Belegungskalender gestartet werden soll (de-DE,en-GB,fr-FR)
var lan='de-DE';
//Ab hier nur Änderungen, falls Sie mit javascript vertraut sind
var ho=117 + (anzahl-3)*18;
var beID='_id'+lfdnr;
var belegsrc='http://'+obspfad+'/OBS/belegung.php?id=domizil'+'&links=2'+'&ofeld='+ofeld+'&lan='+lan;
var divbr=br+10;
document.write('<div id="'+beID+'" scrolling="no" border="0" '+
  'style="width:'+divbr+'px;margin-left:'+lrd+'px;background-color:#ffffff;border:none;"><\/div>');
//setTimeout wg. Opera
setTimeout('document.getElementById(\''+beID+'\').innerHTML=\'<iframe src= "'+belegsrc+
  '" scrolling="no" border="0" frameborder="0" style="width:'+br+'px;height:'+ho+
  'px;overflow:hidden;padding:10px;border:1px solid #909090;"<\/iframe>\'',50);
//-->
</script>

Variante 6: Belegungskalender für mehrere Objekte mit Link für einen Buchungskalender in der gleichen Seite

Hier können Sie festlegen, wie viele Objekte in der Tabelle sichtbar sein sollen, die weiteren erreichen Sie via Scrollbar.

Javascriptcode ein- ausblenden

<script type="text/javascript">
<!--
//Die Homepage und OnBuSys müssen gleichen home-Verzeichnis sein!
//Dieses Codefragment für den Buchungskalender nur einmal verwenden, normalerweise im head-Bereich
//Geben Sie für die Variable "obspfad" (Pfad_zum_Ordner_OBS) den entsprechenden Wert OHNE 'http://www.' ein
var obspfad='onbusys.de';
//Ändern Sie hier die Werte für die Platzierung des Buchungskalenders:
//x,y: Koordinaten der linken oberen Ecke, h:Höhe des Buchungskalenders
var x=300;
var y=10;
var h=550;
//Ändern Sie hier die Hintergrundfarbe und den Rand des IFrames für den Buchungskalender
var ifrcol='background-color:#ffffff;border:0px solid #909090;'
//Den Werte der folgenden Variablen nur ändern, falls er auf Ihrer Seite bereits vorkommt
var buID='buch_id';
//Ab hier nur Änderungen, falls Sie mit javascript vertraut sind
if (window.location.href.indexOf('://www.') > -1) {
  obspfad='www.'+obspfad;
}
function divbuchen(url,benutzer,obj) {
 splitRes=url.split("&");
 url=splitRes[0]+'&hoehe='+h+'&'+splitRes[1];
 if (splitRes.length > 2) {url+='&'+splitRes[2];}
 hfr=h;
 if (navigator.userAgent.toLowerCase().indexOf('safari')>-1) {hfr=h+10;}
 adr='http://'+obspfad+'/OBS/'+url;
 document.getElementById(buID).style.display='block';
 document.getElementById(buID).innerHTML='<img src="http://'+obspfad+'/OBS/cls.png" border="1" alt=" " '+
   'style="float:right;cursor:pointer;margin-right:5px;margin-top:2px;" '+
   'onclick="document.getElementById(\''+buID+'\').style.display=\'none\';">'+
   '<iframe src= "'+adr+'" scrolling="no" border="0" frameborder="0" '+
   'style="width:620px;height:'+hfr+'px;overflow:hidden;padding:1px 5px 5px 5px;border:none;"<\/iframe>';
}
document.write('<div id="'+buID+'" scrolling="no" border="0" '+
  'style="position:fixed;left:'+x+'px;top:'+y+'px;width:625px;display:none;overflow:hidden;'+ifrcol+'"><\/div>');
//-->
</script>

<script type="text/javascript">
<!--
//Dieses Codefragment an der Stelle einfügen, an der die Belegungstabelle erscheinen soll
//Geben Sie für die Variable "ofeld" die durch Komma getrennten Objektnamen ohne Leerstellen ein:
//-Die Objekte erscheinen in der Tabelle in der angegebenen Reihenfolge.
//-Verwenden Sie den Leerstring '' für alle Objekte (alphabetische Anordnung).
var ofeld='';
//Geben Sie hier ein, wie viele Objekte in der Tabelle sichtbar sein sollen (max.10),
//die anderen werden mithilfe der Scrollbar erreicht
var anzahl=5;
//geben Sie hier eine eindeutige fortlaufende Nummer für die Anzahl der Belegungstabellen,
//die Sie auf Ihrer Site verwenden. Beginnen Sie mit 1.
var lfdnr=1;
//Passen Sie hier ggf. die Breite Ihrer Belegungstabelle an
var br=850;
//Geben Sie hier den linken Rand für die Belegungstabelle an
var lrd=90;
//Ändern Sie hier die Sprache, in der der Belegungskalender gestartet werden soll (de-DE,en-GB,fr-FR)
var lan='de-DE';
//Ab hier nur Änderungen, falls Sie mit javascript vertraut sind
var ho=110 + (anzahl-3)*16;
var beID='_id'+lfdnr;
var belegsrc='http://'+obspfad+'/OBS/belegungdiv.php?id=domizil'+'&anzahl='+anzahl+
             '&links=2'+'&ofeld='+ofeld+'&lan='+lan;
var divbr=br+10;
document.write('<div id="'+beID+'" scrolling="no" border="0" '+
  'style="width:'+divbr+'px;margin-left:'+lrd+'px;background-color:#ffffff;border:none;"><\/div>');
//setTimeout wg. Opera
setTimeout('document.getElementById(\''+beID+'\').innerHTML=\'<iframe src= "'+belegsrc+
  '" scrolling="no" border="0" frameborder="0" style="width:'+br+'px;height:'+ho+
  'px;overflow:hidden;padding:10px;border:1px solid #909090;"<\/iframe>\'',50);
//-->
</script>

nach oben

Aktualisiert ( Montag, 15. Februar 2010 20:50 )

Setup-Info-Menü

Demo-Menü