{"id":23335,"date":"2024-06-26T19:42:34","date_gmt":"2024-06-26T17:42:34","guid":{"rendered":"https:\/\/mainetcare.de\/?p=23335"},"modified":"2025-01-28T18:35:24","modified_gmt":"2025-01-28T17:35:24","slug":"how-to-integrate-your-own-calendar-on-the-website","status":"publish","type":"post","link":"https:\/\/mainetcare.de\/en\/wie-laesst-sich-der-eigene-kalender-auf-der-website-einbinden\/","title":{"rendered":"How can I integrate my own calendar on the website?"},"content":{"rendered":"\r\n<p class=\"wp-block-paragraph\">Manchmal m\u00f6chte man nicht alles doppelt und dreifach pflegen. Sie haben einen \u00f6ffentlichen Kalender bei Google oder bei Apple oder bei Microsoft Office oder \u2013 sehr l\u00f6blich \u2013 in Ihrer eigenen NextCloud und m\u00f6chten Ihn nun auf Ihrer Website darstellen?<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><strong>Kein Problem.<\/strong> Mit wenigen Handgriffen ist es erledigt. Und wenn nicht, fragen Sie uns einfach\u2026<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Der Schl\u00fcssel zum Gl\u00fcck hei\u00dft &#8220;ICS&#8221;.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Was ist &#8220;ICS&#8221;, Was ist ein &#8220;ICS&#8221;-Kalender?<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">ICS steht f\u00fcr &#8220;iCalendar Specification&#8221; oder auch &#8220;Internet Calendaring and Scheduling Core Object Specification&#8221;. Es handelt sich dabei um ein standardisiertes Dateiformat f\u00fcr Kalenderdaten, das 1998 entwickelt wurde und in <a href=\"https:\/\/datatracker.ietf.org\/doc\/html\/rfc5545\" target=\"_blank\" rel=\"noreferrer noopener\" data-type=\"link\" data-id=\"https:\/\/datatracker.ietf.org\/doc\/html\/rfc5545\">RFC 5545<\/a> spezifiziert ist. Die wichtigsten Merkmale von ICS sind:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Es ist ein <strong>offenes, plattformunabh\u00e4ngiges Format<\/strong> zum Austausch von Kalenderinformationen.<\/li>\r\n\r\n\r\n\r\n<li>ICS-Dateien haben \u00fcblicherweise die Dateiendung .ics oder .ical.<\/li>\r\n\r\n\r\n\r\n<li>Sie enthalten Informationen zu Kalenderereignissen wie Titel, Beschreibung, Datum, Uhrzeit, Ort etc.<\/li>\r\n\r\n\r\n\r\n<li>Die Informationen k\u00f6nnen in einem einfachen Texteditor ge\u00f6ffnet und angepasst werden.<\/li>\r\n\r\n\r\n\r\n<li>Es wird von den g\u00e4ngigen Kalenderanwendungen unterst\u00fctzt, darunter Proton Calendar, NextClouds CalDAV-Server, Google Calendar, Apple Calendar, Microsoft Outlook und viele mehr.<\/li>\r\n\r\n\r\n\r\n<li>ICS erm\u00f6glicht den einfachen Austausch von Terminen und Ereignissen zwischen verschiedenen Kalendersystemen und Ger\u00e4ten. In unserem Fall zwischen Ihrem Kalender und Ihrer Website.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Das wichtige f\u00fcr uns an diesem Forma ist die Austauschf\u00e4higkeit. Sie k\u00f6nnen Termine als ICS-Datei exportieren und an andere senden, die diese dann in ihren eigenen Kalender importieren k\u00f6nnen.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Welchen Nutzen hat es, seinen Kalender auf der Website einzubinden?<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Wenn Sie einen Kalender auf Ihre Website einbinden, m\u00fcssen Sie die Termine oder Blockzeiten nur an einer Stelle, n\u00e4mlich in Ihrem elektronischen Kalender pflegen. Das ist durch die komfortable Software der Kalender-Software wesentlich schneller und komfortabler als sich auf einer Website einzuloggen und ein Kalender Formular zu bedienen. Was liegt also n\u00e4her, den Komfort der Anwendung und die Reichweite Ihrer Website miteinander zu kombinieren!<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Wie man seinen ICS-Feed bei den verschiedenen Systemen findet:<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Nextcloud<\/h3>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li><strong>Kalender \u00f6ffnen<\/strong>: Melden Sie sich bei Ihrer Nextcloud-Instanz an und \u00f6ffnen Sie die Kalender-App.<\/li>\r\n\r\n\r\n\r\n<li><strong>Kalender ausw\u00e4hlen<\/strong>: Klicken Sie auf die drei Punkte neben dem Kalender, den Sie exportieren m\u00f6chten.<\/li>\r\n\r\n\r\n\r\n<li><strong>Privaten Link kopieren<\/strong>: W\u00e4hlen Sie &#8220;Privaten Link kopieren&#8221; aus. Dieser Link kann dann als ICS-Feed verwendet werden.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Google Kalender<\/h3>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li>Am Google Konto anmelden.<\/li>\r\n\r\n\r\n\r\n<li>Mit dem Desktop-Browser: Auf dem &#8220;Apps&#8221; Symbol (rechts oben) auf &#8220;Kalender&#8221;.<\/li>\r\n\r\n\r\n\r\n<li><strong>Kalender ausw\u00e4hlen<\/strong>: Klicken Sie auf das Einstellungen-Symbol (Das Zahnr\u00e4dchen) und w\u00e4hlen Sie &#8220;Einstellungen&#8221;.<\/li>\r\n\r\n\r\n\r\n<li><strong>Kalender \u00f6ffentlich machen<\/strong>: W\u00e4hlen Sie den Kalender aus, den Sie freigeben m\u00f6chten, und aktivieren Sie die Option &#8220;<strong>\u00d6ffentlich freigeben<\/strong>&#8220;.<\/li>\r\n\r\n\r\n\r\n<li><strong>iCal-Link kopieren<\/strong>: Scrollen Sie nach unten und kopieren Sie den Link im Feld &#8220;\u00d6ffentliche Adresse im iCal-Format&#8221;.<\/li>\r\n\r\n\r\n\r\n<li>Mehr dazu hier: <a href=\"https:\/\/support.google.com\/calendar\/answer\/37118?co=GENIE.Platform%3DDesktop&amp;hl=de#zippy=%2Cicalendar-datei-erstellen-oder-bearbeiten\">https:\/\/support.google.com\/calendar\/answer\/37118?co=GENIE.Platform%3DDesktop&amp;hl=de<\/a><\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Der Link sieht ungef\u00e4hr so aus:<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">https:\/\/calendar.google.com\/calendar\/ical\/&lt;lange-zahlen-und-buchstabenreihe&gt;group.calendar.google.com\/public\/basic.ics<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Apple Kalender<\/h3>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li><strong>Kalender \u00f6ffnen<\/strong>: \u00d6ffnen Sie die Kalender-App auf Ihrem Mac.<\/li>\r\n\r\n\r\n\r\n<li><strong>Kalender ausw\u00e4hlen<\/strong>: Klicken Sie mit der rechten Maustaste auf den Kalender, den Sie freigeben m\u00f6chten, und w\u00e4hlen Sie &#8220;Kalender freigeben&#8221;.<\/li>\r\n\r\n\r\n\r\n<li><strong>\u00d6ffentlich machen<\/strong>: Aktivieren Sie die Option &#8220;\u00d6ffentlich freigeben&#8221;. Wenn Sie dann noch einmal auf den Kalender mit Rechtsklick (Desktop, Mac OS) klicken, erscheint der Feed. Alternativ haben Sie die Option &#8220;Copy URL to Clipboard&#8221; bzw. &#8220;URL in Zwischenablage kopieren&#8221;.<\/li>\r\n\r\n\r\n\r\n<li><strong>Link kopieren<\/strong>: Kopieren Sie den angezeigten Link, der als ICS-Feed dient.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Der Link sieht ungef\u00e4hr so aus:<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">webcal:\/\/p148-caldav.icloud.com\/published\/&lt;lange-zahlen-und-buchstabenreihe&gt;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Microsoft Outlook<\/h3>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li><strong>Outlook \u00f6ffnen<\/strong>: \u00d6ffnen Sie Outlook und gehen Sie zu Ihrem Kalender.<\/li>\r\n\r\n\r\n\r\n<li><strong>Kalender freigeben<\/strong>: Klicken Sie auf &#8220;Kalender freigeben&#8221; und w\u00e4hlen Sie &#8220;Kalender ver\u00f6ffentlichen&#8221;.<\/li>\r\n\r\n\r\n\r\n<li><strong>ICS-Link generieren<\/strong>: W\u00e4hlen Sie die gew\u00fcnschten Freigabeeinstellungen und kopieren Sie den generierten ICS-Link[13][14].<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Der Link sieht ungef\u00e4hr so aus:<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">https:\/\/outlook.office365.com\/owa\/calendar\/&lt;lange-zahlen-und-buchstabenreihe&gt;\/calendar.ics<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Einbinden und Darstellung Ihres Kalenders in WordPress<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Den ICS Link in den Tiefen der Einstellungen gro\u00dfen Anbieter zu finden, ist eigentlich schon die meiste Arbeit. Wenn Sie WordPress benutzen, wird es jetzt wirklich einfach. (Und falls Sie schon immer mal neidisch auf die ganzen WordPress User geschaut haben und sich fragen, ob es nicht Zeit ist, ihre Seite auf WordPress umzustellen, dann fragen Sie uns gern, wir haben das schon oft Migrationen durchgef\u00fchrt).<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Wir empfehlen f\u00fcr die Integration das PlugIn &#8220;ICS Calendar&#8221; (https:\/\/icscalendar.com). In der kostenlosen Version bekommen Sie bereits einen einfachen Kalender, den Sie mit etwas CSS-Kenntnissen grafisch aufpolieren k\u00f6nnen. In der nicht teuren PRO-Version erhalten Sie zus\u00e4tzlich die M\u00f6glichkeit, Ihren Kalender \u00fcber einen komfortable Oberfl\u00e4che zu gestalten und zu konfigurieren.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Es gibt auch Alternativen, die wir unten aufgef\u00fchrt haben. ICS Calender konzentriert sich allerdings ganz auf die Einbindung von ICS Kalendern und wir lieben PlugIns der Form &#8220;Do one thing and do it right&#8221;.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">So gehen Sie vor:<\/p>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li><strong>Plugin installieren<\/strong>: Installieren und aktivieren Sie das Plugin <a href=\"https:\/\/icscalendar.com\/\">ICS Calendar<\/a> auf Ihrer WordPress-Seite.<\/li>\r\n\r\n\r\n\r\n<li><strong>Kalender anzeigen<\/strong>: Verwenden Sie den Shortcode des Plugins, um den Kalender auf einer Seite oder in einem Beitrag anzuzeigen.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Das war es schon. Den Rest erledigt das PlugIn.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Und so k\u00f6nnte es dann aussehen (Beispiel eines Kundenprojektes, ICS Calendar in der PRO-Version):<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2616\" height=\"1662\" class=\"wp-image-23347\" src=\"https:\/\/mainetcare.de\/wp-content\/uploads\/2024\/06\/ical-kalender-einbindung-beispiel.jpg\" alt=\"\" srcset=\"https:\/\/mainetcare.de\/wp-content\/uploads\/2024\/06\/ical-kalender-einbindung-beispiel.jpg 2616w, https:\/\/mainetcare.de\/wp-content\/uploads\/2024\/06\/ical-kalender-einbindung-beispiel-1536x976.jpg 1536w, https:\/\/mainetcare.de\/wp-content\/uploads\/2024\/06\/ical-kalender-einbindung-beispiel-2048x1301.jpg 2048w, https:\/\/mainetcare.de\/wp-content\/uploads\/2024\/06\/ical-kalender-einbindung-beispiel-1920x1220.jpg 1920w, https:\/\/mainetcare.de\/wp-content\/uploads\/2024\/06\/ical-kalender-einbindung-beispiel-960x610.jpg 960w, https:\/\/mainetcare.de\/wp-content\/uploads\/2024\/06\/ical-kalender-einbindung-beispiel-480x305.jpg 480w, https:\/\/mainetcare.de\/wp-content\/uploads\/2024\/06\/ical-kalender-einbindung-beispiel-240x152.jpg 240w\" sizes=\"auto, (max-width: 2616px) 100vw, 2616px\" \/><\/figure>\r\n","protected":false},"excerpt":{"rendered":"<p>Manchmal m\u00f6chte man nicht alles doppelt und dreifach pflegen. Sie haben einen \u00f6ffentlichen Kalender bei Google oder bei Apple oder bei Microsoft Office oder \u2013 sehr l\u00f6blich \u2013 in Ihrer eigenen NextCloud und m\u00f6chten Ihn nun auf Ihrer Website darstellen? Kein Problem. Mit wenigen Handgriffen ist es erledigt. Und wenn nicht, fragen Sie uns einfach\u2026 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":23347,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[93],"techdoc_tag":[],"class_list":["post-23335","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-pflege","tag-tipps-und-anleitungen"],"acf":[],"_links":{"self":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/posts\/23335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/comments?post=23335"}],"version-history":[{"count":3,"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/posts\/23335\/revisions"}],"predecessor-version":[{"id":32035,"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/posts\/23335\/revisions\/32035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/media\/23347"}],"wp:attachment":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/media?parent=23335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/categories?post=23335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/tags?post=23335"},{"taxonomy":"techdoc_tag","embeddable":true,"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/techdoc_tag?post=23335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}