WBCE CMS Forum

isd17

Mitglied

Einen zentralen Kalender für mehrere WBCE-Installationen

Ich würde gerne einen Kalender in WBCE einbinden, der dann auf drei oder vier unterschiedlichen Seiten (unterschiedliche Domains, aber alles WBCE-Installationen) eingebunden werden kann. Alle die einen Zugang zu WBCE haben, sollen auch Daten in den Kalender eintragen können. Diese Daten sollen dann auf allen Webseiten identisch sein udn angezeigt werden.

Kann ich das mit einem der WBCE-Module machen, oder macht das mehr Sinn einen gemeinsamen Kalender (Google, Nextcloud, etc.) anzulegen, den ich dann mit dem Modul Extcal einbinde?

Ich denke letzteres ist der einfachere Weg. Hat das so schon mal jemand umgesetzt?

florian

Administrator

Re: Einen zentralen Kalender für mehrere WBCE-Installationen

Ich glaube, da ist ein zentraler Nextcloud-Kalender, der über Extcal eingebunden wird, das Mittel der Wahl. Alles andere wäre mit zu viel Gebastel verbunden und vor allem könnten sich die Leute dann gegenseitig die Termine löschen.

---

Code allein macht nicht glücklich. Jetzt spenden!

Slugger

Mitglied

Re: Einen zentralen Kalender für mehrere WBCE-Installationen

Da gebe ich Florian Recht...

Hier ist es sinnvoll das in Nextcloud oder auch Google Kalender zu realisieren.

Im WBCE mit dem Modul Extcal anzuzeigen und umsetzen.

---

Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.5.4 • BE: 2.1.0 • PHP: 8.1.16 * 1. Projekt: FE: Simple responsive • BE: Argos * 2. Projekt: FE: hortal • BE: Argos * 3. Projekt: FE: WBCEZon • BE: Argos * 4. Projekt: FE: WBCETik • BE: Argos
Status Projekt 1-4:  OK

isd17

Mitglied

Re: Einen zentralen Kalender für mehrere WBCE-Installationen

Danke, dann werde ich mich da mal dran machen...

Slugger

Mitglied

Re: Einen zentralen Kalender für mehrere WBCE-Installationen

Ich denke letzteres ist der einfachere Weg. Hat das so schon mal jemand umgesetzt?

Da gibt es natürlich auch den einen oder anderen Weg.

Wenn du es mit dem Modul extcal und Nextcloud Kalender machst, ist es hilfreich für dich diesen Thread  zu lesen, wenn es um die Einbindung geht.
https://forum.wbce.org/viewtopic.php?pid=41404#p41404

Eine andere Variante die ich vorher mit dem Nextcloud Kalender gemacht habe ist die Einbindung mit WYSIWYG als iFrame.

Ich stelle mal den Quellcode hier rein, beinhaltet HTML/CSS und Javascript.

<p style="text-align: center;"><u><strong><span style="font-size:16px;">Kalender BLABLABLA</span></strong></u></p>

<p>
<style type="text/css">.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* ratio 16x9 */
  overflow: hidden;
  font-size: 0.5em;
  width: 100%;
  height: auto;
}
.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.5em;
  width: 100%;
  height: 100%;
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
  font-size: 0.5em;
}
</style>
<script type="text/javascript">
//<![CDATA[
/*! jQuery ResponsiveIframe - v0.0.3 - 2013-09-05
* https://github.com/npr/responsiveiframe
* Copyright (c) 2013 Irakli Nadareishvili; Licensed MIT,
 GPL */
if (typeof jQuery !== &#039;undefined&#039;) {
  (function( $ ){
    var settings = {
      xdomain: &#039;*&#039;,
      ie : navigator.userAgent.toLowerCase().indexOf(&#039;msie&#039;) > -1,
      scrollToTop: true
    };
    var methods = {
      // initialization for the parent,
 the one housing this
      init: function() {
        return this.each(function(self){
          var $this = $(this);
          if (window.postMessage) {
            if (window.addEventListener) {
              window.addEventListener(&#039;message&#039;,
 function(e) {
                privateMethods.messageHandler($this,e);
              } ,
 false);
            } else if (window.attachEvent) {
              window.attachEvent(&#039;onmessage&#039;,
 function(e) {
                privateMethods.messageHandler($this,e);
              },
 $this);
            }
          } else {
            setInterval(function () {
              var hash = window.location.hash,
 matches = hash.match(/^#h(\d+)(s?)$/);
              if (matches) {
                privateMethods.setHeight($this,
 matches[1]);
                if (settings.scrollToTop && matches[2] === &#039;s&#039;){
                  scroll(0,0);
                }
              }
            },
 150);
          }
        });
      }
    };
    var privateMethods = {
      messageHandler: function (elem,
 e) {
        var height,
          r,
          matches,
          strD;
        if (settings.xdomain !== &#039;*&#039;) {
          var regex = new RegExp(settings.xdomain + &#039;$&#039;);
          if(e.origin == "null"){
            throw new Error("messageHandler( elem,
 e): There is no origin.  You are viewing the page from your file system.  Please run through a web server.");
          }
          if(e.origin.match(regex)){
            matches = true;
          }else{
            throw new Error("messageHandler( elem,
 e): The orgin doesn&#039;t match the responsiveiframe  xdomain.");
          }
        }
        if(settings.xdomain === &#039;*&#039; || matches ) {
          strD = e.data + "";
          r = strD.match(/^(\d+)(s?)$/);
          if(r && r.length === 3){
            height = parseInt(r[1],
 10);
            if (!isNaN(height)) {
              try {
                privateMethods.setHeight(elem,
 height);
              } catch (ex) {}
            }
            if (settings.scrollToTop && r[2] === "s"){
              scroll(0,0);
            }
          }
        }
      },
      // Sets the height of the iframe
      setHeight : function (elem,
 height) {
        elem.css(&#039;height&#039;,
 height + &#039;px&#039;);
      },
      getDocHeight: function () {
        var D = document;
        return Math.min(
          Math.max(D.body.scrollHeight,
 D.documentElement.scrollHeight),
          Math.max(D.body.offsetHeight,
 D.documentElement.offsetHeight),
          Math.max(D.body.clientHeight,
 D.documentElement.clientHeight)
        );
      }
    };
    $.fn.responsiveIframe = function( method ) {
      if ( methods[method] ) {
        return methods[ method ].apply( this,
 Array.prototype.slice.call( arguments,
 1 ));
      } else if ( typeof method === &#039;object&#039; || ! method ) {
        $.extend(settings,
 arguments[0]);
        return methods.init.apply( this );
      } else {
        $.error( &#039;Method &#039; +  method + &#039; does not exist on jQuery.responsiveIframe&#039; );
      }
    };
  }( jQuery ));
}
;(function(){
  var self,
      module,
      ResponsiveIframe = function () {self = this;};
  ResponsiveIframe.prototype.allowResponsiveEmbedding = function() {
    if (window.addEventListener) {
      window.addEventListener("load",
 self.messageParent,
 false);
      window.addEventListener("resize",
 self.messageParent,
 false);
    } else if (window.attachEvent) {
      window.attachEvent("onload",
 self.messageParent);
      window.attachEvent("onresize",
 self.messageParent);
    }
  };
  ResponsiveIframe.prototype.messageParent = function(scrollTop) {
    var h = document.body.offsetHeight;
    h = (scrollTop)? h+&#039;s&#039;:h;
    if(top.postMessage){
      top.postMessage( h ,
 &#039;*&#039;);
    } else {
      window.location.hash = &#039;h&#039;+h;
    }
  };
  function responsiveIframe() {
    return new ResponsiveIframe();
  }
  // expose
  if (&#039;undefined&#039; === typeof exports) {
    window.responsiveIframe = responsiveIframe;
  } else {
    module.exports.responsiveIframe = responsiveIframe;
  }
}());
  //]]>
</script></p>

<div class="embed-container"><iframe scrollbar="no" src="https://deine.domain.de/index.php/apps/calendar/embed/BKH48dRfAJbitrte/listMonth/now"></iframe></div>

Natürlich musst du den "src="https://deine.domain.de/..." für deine zwecke aus deinen Kalender nehmen.

Beitrag geändert von Slugger (17.03.2023 12:53:52)

---

Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.5.4 • BE: 2.1.0 • PHP: 8.1.16 * 1. Projekt: FE: Simple responsive • BE: Argos * 2. Projekt: FE: hortal • BE: Argos * 3. Projekt: FE: WBCEZon • BE: Argos * 4. Projekt: FE: WBCETik • BE: Argos
Status Projekt 1-4:  OK

isd17

Mitglied

Re: Einen zentralen Kalender für mehrere WBCE-Installationen

@Slugger: Vielen dank für den Code für die WYSIWYG-Einbindung. Heute habe ich es mal geschafft das mit dem Kalender umzusetzen und es hat auf Anhieb geklappt. Vielen Dank!

Das einzige was nicht geht ist, dass immer die Monatsansicht des Kalenders angezeigt wird. Es startet immer die Listenansicht.
Und zwar obwohl ich es so angegeben habe:

/index.php/apps/calendar/embed/<kalender-id>/listMonth/now

Beitrag geändert von isd17 (26.04.2023 17:12:57)

Slugger

Mitglied

Re: Einen zentralen Kalender für mehrere WBCE-Installationen

Ja, aber da gibt es auch noch andere Möglichkeiten.

Ich hatte damals die Listenansicht gewählt, deshalb ist natürlich der Zusatz noch drinn.

Bin jetzt nur mobil mit Handy unterwegs.

Von daher brauche ich noch ein wenig Zeit.

Aber das ist normalerweise bei Google oder Nextcloud FAQ schnell beseitigt.

Bzw. Einfach den Originallink im Nextcloud Kalender ohne Zusatz einfügen.

---

Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.5.4 • BE: 2.1.0 • PHP: 8.1.16 * 1. Projekt: FE: Simple responsive • BE: Argos * 2. Projekt: FE: hortal • BE: Argos * 3. Projekt: FE: WBCEZon • BE: Argos * 4. Projekt: FE: WBCETik • BE: Argos
Status Projekt 1-4:  OK

isd17

Mitglied

Re: Einen zentralen Kalender für mehrere WBCE-Installationen

Stimmt, manchmal sieht man den "Wald vor Bäumen nicht". Irgendwie ging ich davon aus, das /listMonth die Monatsdarstellung ist.

Aber /dayGridMonth ist hier die Lösung. Jetzt passt es!

isd17

Mitglied

Re: Einen zentralen Kalender für mehrere WBCE-Installationen

Müsste ich bei Nutzung des Extcal Moduls denn nicht mit {CALENDAR} den Kalendernamen des eingebundenen Nextcloud Kalenders auslesen können?
Mit {DATE}, {TITLE}, {LOCATION} usw. funktioniert das. {CALENDAR} bleibt aber leer.
Mache ich etwas falsch?

mrbaseman

Developer

Re: Einen zentralen Kalender für mehrere WBCE-Installationen

Müsste, ja, wenn Nextcloud den Kalendernamen in den jeweiligen Einträgen mit ausliefern würde. Das scheint aber leider bei Nextcloud nicht der Fall zu sein (hab's gerade selbst auch probiert).

Grundsätzlich sollte das Feature funktionieren, allerdings eben nur mit Kalenderservern, die das ebenfalls unterstützen (der Feature-Request war damals für Google-Kalender, aber es gibt sicherlich auch andere Caldav-Server, die den Kalendernamen mit ausliefern...)