Einen zentralen Kalender für mehrere WBCE-Installationen

isd17 · 16.03.2023 17:30:19

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 · 16.03.2023 19:08:15

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.

Slugger

Slugger · 16.03.2023 20:39:07

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.

isd17 · 16.03.2023 22:38:11

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

Slugger · 17.03.2023 12:51:14

isd17 wrote:

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.

Last edited by Slugger (17.03.2023 12:53:52)

isd17

isd17 · 26.04.2023 17:02:46

@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

Last edited by isd17 (26.04.2023 17:12:57)

Slugger

Slugger · 26.04.2023 18:22:42

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.

isd17 · 26.04.2023 21:30:32

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!

Slugger

isd17 · 26.09.2023 21:58:23

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 · 26.09.2023 22:57:56

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...)

WBCE CMS Forum

#1 16.03.2023 17:30:19

Einen zentralen Kalender für mehrere WBCE-Installationen

#2 16.03.2023 19:08:15

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

#3 16.03.2023 20:39:07

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

#4 16.03.2023 22:38:11

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

#5 17.03.2023 12:51:14

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

#6 26.04.2023 17:02:46

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

#7 26.04.2023 18:22:42

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

#8 26.04.2023 21:30:32

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

#9 26.09.2023 21:58:23

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

#10 26.09.2023 22:57:56

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

Board footer