Offener Web-Kalender

Der Offene Web-Kalender nutzt online ICS/ICal-Kalender und zeigt sie in einem Kalender an. Du kannst ihn mit Nextcloud, Outlook, Google Calendar, Meetup und anderen Kalendersystemen benutzen, die den ICS-Standard exportieren. Wir unterstützen die folgenden Standards: ICAL, CalDAV, webcal.

Um mehrere Kalender anzuzeigen, füge die URLs zu diesen hier unten ein:

Du kannst den Kalender weiter anpassen.

Wir empfehlen, URLs zu verschlüsseln, wenn sie vertrauliche Daten enthalten. Speichere das folgende Passwort nur dann ab, wenn du vorhast diese irgendwann zu entschlüsseln.

🔑

Sprache

English Esperanto(74%) French/Français(61%) German/Deutsch Hrvatski/Croatian(80%) Indonesian/Bahasa Indonesia(56%) Italiano/Italian(74%) Norwegian Bokmål/Norsk bokmål(59%) Slovenčina/Slovak(73%) Spanish/Español(80%) Türkçe/Turkish(71%) Welsh/Cymraeg(54%) Українська/Ukrainian தமிழ்(80%) 한국어(74%) Übersetzen

Du kannst die Sprache des Kalenders auswählen.
German (de)
Übersetzen

Titel

Um den Titel zu ändern, gib den Namen des Kalenders hier ein:

Erster Tag

Um den ersten Tag im Kalender zu ändern:

Time and Hours

Erste Stunde

Um die erste Stunde im Kalender zu ändern:

Letzte Stunde

Um die letzte Stunde im Kalender zu ändern:

Zeitschritte

Ändere die Zeitschritte der Tages- und Wochenansicht:

Zeitanzeige

Du kannst zwischen einer Anzeige mit 24 Stunden oder 12 Stunden auswählen. Es gibt auch andere Optionen. Spezifikation ansehen.

Designs

Du kannst ein Design für den Kalender auswählen.

Links zur Karte

Ereignisse können Koordinaten und Text zu einem Ort haben. Hier kannst Du einstellen, welcher Kartendienst geöffnet wird, wenn man auf den Ort eines Ereignisses klickt.

Verändere die Karten-Links Schreibe eine URL hier rein und füge {location} dort ein, wo der Text vom Ort stehen würde.

Gib eine URL zur Karte hier ein. {lat} und {lon} stehen an der Stelle der Koordinaten.

Wochentage

Die Woche kann am Montag oder Sonntag anfangen.

Eigener Style mit CSS

Du kannst die Farbe des Kalenders und viele andere Eigenschaften mit CSS anpassen. Deine Anpassungen überschreiben die des Designs. Unten kannst Du ein paar Anpassungen vornehmen, die wir vorbereitet haben.

  • Du kannst die Hintergrundfarbe verändern.
  • Du kannst die Farbe von anklickbaren Elementen ändern.
  • Du kannst die Farbe des heutigen Tages anpassen.
  • Wenn Du eine andere Farbe für die Tage magst, dann ist auch das möglich.
  • Manche Tage haben eine andere Farbe, wenn sie nicht innerhalb des Monats sind.

Eigene CSS-Eigenschaften sind möglich. Das sind Beispiele von CSS-Klassen, die Kalendereinträge verändern können: .event {} .UID-... {} .CATEGORY-... {} .CALENDAR-INDEX-0 {} .CALENDAR-INDEX-... {} .TRANSP-OPAQUE {} .TRANSP-TRANSPARENT {} .CLASS-PRIVATE {} .CLASS-CONFIDENTIAL {} .CLASS-PUBLIC {} .STATUS-TENTATIVE {} .STATUS-CONFIRMED {} .STATUS-CANCELLED {} .PRIORITY-1 {} .PRIORITY-... {} .error {}

Terminstatus

Verändere das Aussehen der Terminbeschreibung abhänging vom Status:

Lade-Animation

In manchen Fällen brauch der Server eine Weile, um den Kalender zu laden, z.B. wenn der Server erst starten muss.

Kalender-Ansichten

Die Monatsansicht wird als erste angezeigt aber du kannst ändern, was am Besten passt:

Sollte der Nutzer nicht alle Ansichten und Schalter sehen sollen, dann kannst Du hier bestimmen, was möglich ist:

Zeitzone

Die Zeitzone wird von dem Webbrowser des Nutzers bestimmt. Wenn der Kalender in einer festen Zeitzone angezeigt werden soll, dann ist das möglich. Dein Browser nutzt diese Zeitzone: UTC

Teilnehmer und Organisation

Du kannst andere einladen und sie können teilnehmen. Du kannst hier bestimmen, ob Namen mit E-Mail-Adressen von Teilnehmern unter der Beschreibung angezeigt werden.





Fertig! Jetzt Nutzen

Das Resultat kannst Du hier drunter ansehen.

https://open-web-calendar.hosted.quelltext.eu/calendar.html?css=div%5Bname%3Dmonth_tabXX%5D%7Bleft%3A0!important%7Ddiv%5Bname%3Dagenda_tabXX%5D%7Bleft%3A90px!important%7Ddiv.dhx_qi_big_icon.icon_delete%7Bdisplay%3Anone%7Ddiv.dhx_qi_big_icon.icon_details%7Bdisplay%3Anone%7Ddiv.dhx_cal_qi_content%7Bpadding-bottom%3A0!important%3Bpadding-top%3A0!important%7D.dhx_agenda_line%20span%7Bdisplay%3Aflex!important%3Blex-wrap%3Awrap%7D.dhx_agenda_area%20div%5Brole%3Drow%5D%7Bheight%3A70px!important%7D.dhx_cal_tab.active%2C.dhx_cal_tab.active%3Ahover%2C.event%7Bbackground-color%3A%23f25d63%3Bcolor%3A%23fff%7D.dhx_cal_tab%2C.dhx_cal_today_button%2C.dhx_month_head%7Bcolor%3A%23f25d63%3Bborder-color%3A%23f25d63%7D.dhx_cal_tab%2C.dhx_cal_tab.active%7Bborder-color%3A%23f25d63%7Ddiv.dhx_cal_qi_tcontent%7Bcolor%3A%23fff%3Bwhite-space%3Awrap!important%3Btext-wrap-mode%3Awrap!important%7Ddiv.dhx_cal_qi_tcontent%3A%3Abefore%7Bdisplay%3Anone!important%7Ddiv.dhx_cal_qi_tdate%7Bcolor%3A%23fff%7Ddiv.dhx_cal_qi_tcontent%3Ediv%3Ea%7Bcolor%3A%23fff!important%7Ddiv.dhx_cal_qi_content%3Ea%7Bcolor%3A%23505050!important%3Bfont-weight%3A700!important%7D.dhx_cal_event_clear%7Bcolor%3A%23fff!important%7D.dhx_cal_qi_title%7Bbackground-color%3A%2351c1ae!important%7D.dhx_cal_qi_content%7Boverflow-y%3Ascroll%3Bmax-height%3A300px%7D.dhtmlXTooltip%7Bdisplay%3Anone!important%7D.dhx_cal_quick_info%7Bpositionxx%3Asticky!important%3Bz-index%3A100!important%7D.dhx_cal_event_line_end%2C.dhx_cal_event_line_start%7Bpadding-left%3A0!important%3Bmin-width%3A14.2%25!important%7D&language=de&specification_url=https%3A%2F%2Fgithub.com%2Fmmoole%2Fmmoole.github.io%2Fraw%2Frefs%2Fheads%2Fmaster%2Fopenwebcalendar%2Fcal-bue-paas.yml&tab=agenda&tabs=month&tabs=agenda&target=_blank&title=Cradle%20to%20Cradle%20NGO%20B%26uuml%3Bndnis%20PaaS&url=https%3A%2F%2Fp2c2c.2ix.de%2Fview2ics%2Fexpcal_a3.php%3F53076663

Um den Kalender einzubetten, nutze diesen Code auf der Webseite: 

<iframe id="open-web-calendar" 
    style="background:url('https://raw.githubusercontent.com/niccokunzmann/open-web-calendar/master/static/img/loaders/circular-loader.gif') center center no-repeat;"
    src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?css=div%5Bname%3Dmonth_tabXX%5D%7Bleft%3A0!important%7Ddiv%5Bname%3Dagenda_tabXX%5D%7Bleft%3A90px!important%7Ddiv.dhx_qi_big_icon.icon_delete%7Bdisplay%3Anone%7Ddiv.dhx_qi_big_icon.icon_details%7Bdisplay%3Anone%7Ddiv.dhx_cal_qi_content%7Bpadding-bottom%3A0!important%3Bpadding-top%3A0!important%7D.dhx_agenda_line%20span%7Bdisplay%3Aflex!important%3Blex-wrap%3Awrap%7D.dhx_agenda_area%20div%5Brole%3Drow%5D%7Bheight%3A70px!important%7D.dhx_cal_tab.active%2C.dhx_cal_tab.active%3Ahover%2C.event%7Bbackground-color%3A%23f25d63%3Bcolor%3A%23fff%7D.dhx_cal_tab%2C.dhx_cal_today_button%2C.dhx_month_head%7Bcolor%3A%23f25d63%3Bborder-color%3A%23f25d63%7D.dhx_cal_tab%2C.dhx_cal_tab.active%7Bborder-color%3A%23f25d63%7Ddiv.dhx_cal_qi_tcontent%7Bcolor%3A%23fff%3Bwhite-space%3Awrap!important%3Btext-wrap-mode%3Awrap!important%7Ddiv.dhx_cal_qi_tcontent%3A%3Abefore%7Bdisplay%3Anone!important%7Ddiv.dhx_cal_qi_tdate%7Bcolor%3A%23fff%7Ddiv.dhx_cal_qi_tcontent%3Ediv%3Ea%7Bcolor%3A%23fff!important%7Ddiv.dhx_cal_qi_content%3Ea%7Bcolor%3A%23505050!important%3Bfont-weight%3A700!important%7D.dhx_cal_event_clear%7Bcolor%3A%23fff!important%7D.dhx_cal_qi_title%7Bbackground-color%3A%2351c1ae!important%7D.dhx_cal_qi_content%7Boverflow-y%3Ascroll%3Bmax-height%3A300px%7D.dhtmlXTooltip%7Bdisplay%3Anone!important%7D.dhx_cal_quick_info%7Bpositionxx%3Asticky!important%3Bz-index%3A100!important%7D.dhx_cal_event_line_end%2C.dhx_cal_event_line_start%7Bpadding-left%3A0!important%3Bmin-width%3A14.2%25!important%7D&amp;language=de&amp;specification_url=https%3A%2F%2Fgithub.com%2Fmmoole%2Fmmoole.github.io%2Fraw%2Frefs%2Fheads%2Fmaster%2Fopenwebcalendar%2Fcal-bue-paas.yml&amp;tab=agenda&amp;tabs=month&amp;tabs=agenda&amp;target=_blank&amp;title=Cradle%20to%20Cradle%20NGO%20B%26uuml%3Bndnis%20PaaS&amp;url=https%3A%2F%2Fp2c2c.2ix.de%2Fview2ics%2Fexpcal_a3.php%3F53076663"
    sandbox="allow-scripts allow-same-origin allow-popups allow-downloads"
    allowTransparency="true" scrolling="no" 
    frameborder="0" height="600px" width="100%"></iframe>

Die Spezifikation Hosten

Der Kalender kann nicht nur durch eine URL generiert werden sondern auch durch eine JSON oder YAML-Spezifikation aus einer Datei. Deine Anpassungen erzeugen die folgende Spezifikation: 
{
  "css": "div[name=month_tabXX]{left:0!important}div[name=agenda_tabXX]{left:90px!important}div.dhx_qi_big_icon.icon_delete{display:none}div.dhx_qi_big_icon.icon_details{display:none}div.dhx_cal_qi_content{padding-bottom:0!important;padding-top:0!important}.dhx_agenda_line span{display:flex!important;lex-wrap:wrap}.dhx_agenda_area div[role=row]{height:70px!important}.dhx_cal_tab.active,.dhx_cal_tab.active:hover,.event{background-color:#f25d63;color:#fff}.dhx_cal_tab,.dhx_cal_today_button,.dhx_month_head{color:#f25d63;border-color:#f25d63}.dhx_cal_tab,.dhx_cal_tab.active{border-color:#f25d63}div.dhx_cal_qi_tcontent{color:#fff;white-space:wrap!important;text-wrap-mode:wrap!important}div.dhx_cal_qi_tcontent::before{display:none!important}div.dhx_cal_qi_tdate{color:#fff}div.dhx_cal_qi_tcontent>div>a{color:#fff!important}div.dhx_cal_qi_content>a{color:#505050!important;font-weight:700!important}.dhx_cal_event_clear{color:#fff!important}.dhx_cal_qi_title{background-color:#51c1ae!important}.dhx_cal_qi_content{overflow-y:scroll;max-height:300px}.dhtmlXTooltip{display:none!important}.dhx_cal_quick_info{positionxx:sticky!important;z-index:100!important}.dhx_cal_event_line_end,.dhx_cal_event_line_start{padding-left:0!important;min-width:14.2%!important}",
  "language": "de",
  "specification_url": "https://github.com/mmoole/mmoole.github.io/raw/refs/heads/master/openwebcalendar/cal-bue-paas.yml",
  "tab": "agenda",
  "tabs": [
    "month",
    "agenda"
  ],
  "target": "_blank",
  "title": "Cradle to Cradle NGO B&uuml;ndnis PaaS",
  "url": "https://p2c2c.2ix.de/view2ics/expcal_a3.php?53076663"
}
Du kannst die Spezifikation herunterladen und sie irgendwo im Web platzieren. Auf diese Weise kannst Du den Kalender später überall, wo er verwendet wird, mit einem Mal verändern. Dazu kannst du die Spezifikation z.B. in einem Gist veröffentlichen. Sobald Du die Spezifikation irgendwo online hast, kannst Du z.B. einen solchen Link erstellen: https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://raw.githubusercontent.com/niccokunzmann/open-web-calendar/master/open_web_calendar/default_specification.yml

Mehr Infos

Hier ist ein Kalender, der eine Webseite für viele verschiedene Kalender bereitstellt. Du kannst den Kalender auch als ICS-Link abonieren. Die Kalender sind vielseitig veränderbar. Z.B. können sie verschiedene Quellen haben und an die Webseite angepasst werden, in die sie eingebettet werden. Wenn Du dieses Projekt magst, bitte nutze Deine Zeit oder Dein Geld, um das Projekt frei und für alle nützlich zu halten.
⬅ Fertig! Jetzt Nutzen ➡
↔