{"id":9394,"date":"2024-05-17T11:55:21","date_gmt":"2024-05-17T10:55:21","guid":{"rendered":"https:\/\/leogeracademy.hestia.wpspace.me\/?post_type=docs&#038;p=9394"},"modified":"2024-10-17T15:28:07","modified_gmt":"2024-10-17T13:28:07","password":"","slug":"13-how-to-embed-a-calendar-on-your-website","status":"publish","type":"docs","link":"https:\/\/staging.churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/13-how-to-embed-a-calendar-on-your-website\/","title":{"rendered":"How to embed a calendar on your website"},"content":{"rendered":"\n<aside class=\"wp-block-group ct-box ct-box-blue has-text-color has-background has-link-color wp-elements-80af7bfe1f2cac9aad48f56ff78dd877 is-vertical is-layout-flex wp-container-core-group-is-layout-002f1c27 wp-block-group-is-layout-flex\" style=\"border-radius:8px;border-left-color:#e7c000;border-left-width:0.5rem;color:#3f3400;background-color:#ffe5644d;margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\">\n<p style=\"margin-top:0.5rem;margin-right:0.5rem;margin-bottom:0rem;margin-left:0.5rem\"><strong>Warning<\/strong><\/p>\n\n\n\n<p style=\"margin-top:0rem;margin-right:0.5rem;margin-bottom:0.5rem;margin-left:0.5rem\">These instructions are <strong>not<\/strong> for <em>ChurchTools Website<\/em> customers, here the information is synced automatically.<\/p>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">1. <em>Open embed calendar<\/em> dialog box<\/h2>\n\n\n\n<p>You can find the button in the lower right corner in the calendar view.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"640\" height=\"426\" src=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-296.png\" alt=\"\" class=\"wp-image-16039\" srcset=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-296.png 640w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-296-300x200.png 300w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-296-360x240.png 360w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2. Select calendars<\/h2>\n\n\n\n<p>Select all calendars you want to display on your website.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"368\" height=\"614\" src=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-295.png\" alt=\"\" class=\"wp-image-16037\" srcset=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-295.png 368w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-295-180x300.png 180w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-295-307x512.png 307w\" sizes=\"(max-width: 368px) 100vw, 368px\" \/><\/figure>\n\n\n\n<aside class=\"wp-block-group ct-box ct-box-blue has-background is-vertical is-layout-flex wp-container-core-group-is-layout-002f1c27 wp-block-group-is-layout-flex\" style=\"border-radius:8px;border-left-color:#3e70ce;border-left-width:0.5rem;background-color:#f3f5f7;margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\">\n<p style=\"margin-top:0.5rem;margin-right:0.5rem;margin-bottom:0rem;margin-left:0.5rem\"><strong>Note<\/strong><\/p>\n\n\n\n<p style=\"margin-top:0rem;margin-right:0.5rem;margin-bottom:0.5rem;margin-left:0.5rem\">It only makes sense to include calendars on a website which are publicly visible (without ChurchTools login). These are all <em><strong><a href=\"https:\/\/staging.churchtools.academy\/en\/help\/churchtools-modules\/basics-calendar\/13-what-different-types-of-calendars-exist\/\" data-type=\"docs\" data-id=\"9406\">calendars<\/a><\/strong><\/em> that the <em><strong><a href=\"https:\/\/help.church.tools\/wiki\/21\/What%20is%20the%20Public%20User%3F\"><mark class=\"has-inline-color has-vivid-red-color\">public user<\/mark><\/a><\/strong><\/em> has access to.<\/p>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">3. Set display<\/h2>\n\n\n\n<p>You can modify the appearance and the calendar information to be displayed directly via the settings in ChurchTools or using <em><strong><a href=\"https:\/\/staging.churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/13-embed-calendar-url-parameters\/\" data-type=\"docs\" data-id=\"9383\">URL parameters<\/a><\/strong><\/em> and <em><strong><a href=\"https:\/\/staging.churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/13-embed-calendar-css-classes\/\" data-type=\"docs\" data-id=\"9382\">CSS classes<\/a><\/strong><\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"368\" height=\"600\" src=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-297.png\" alt=\"\" class=\"wp-image-16040\" srcset=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-297.png 368w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-297-184x300.png 184w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-297-314x512.png 314w\" sizes=\"(max-width: 368px) 100vw, 368px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4.Embed the calendar<\/h2>\n\n\n\n<p>Lastly, copy and paste the iFrame code onto your website.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"369\" height=\"732\" src=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-298.png\" alt=\"\" class=\"wp-image-16041\" srcset=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-298.png 369w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-298-151x300.png 151w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-298-258x512.png 258w\" sizes=\"(max-width: 369px) 100vw, 369px\" \/><\/figure>\n\n\n\n<aside class=\"wp-block-group ct-box ct-box-blue has-background is-vertical is-layout-flex wp-container-core-group-is-layout-002f1c27 wp-block-group-is-layout-flex\" style=\"border-radius:8px;border-left-color:#3e70ce;border-left-width:0.5rem;background-color:#f3f5f7;margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\">\n<p style=\"margin-top:0.5rem;margin-right:0.5rem;margin-bottom:0rem;margin-left:0.5rem\"><strong>Note<\/strong><\/p>\n\n\n\n<p style=\"margin-top:0rem;margin-right:0.5rem;margin-bottom:0.5rem;margin-left:0.5rem\">To make the embedded calendar automatically resize on the website, ChurchTools uses the library <em><strong><a href=\"https:\/\/github.com\/davidjbradshaw\/iframe-resizer\">iFrame Resizer<\/a><\/strong><\/em> by David J. Bradshaw.<\/p>\n<\/aside>\n","protected":false},"excerpt":{"rendered":"<p>1. Open embed calendar dialog box You can find the button in the lower right corner in the calendar view. 2. Select calendars Select all calendars you want to display on your website. 3. Set display You can modify the appearance and the calendar information to be displayed directly via the settings in ChurchTools or [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_category":[470],"doc_tag":[527],"knowledge_base":[224],"class_list":["post-9394","docs","type-docs","status-publish","hentry","doc_category-embedding-calendars","doc_tag-link-missing","knowledge_base-churchtools-modules"],"acf":[],"year_month":"2026-06","word_count":71,"total_views":"876","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Jasper Stehmeier","author_nicename":"jstehmeier","author_url":"https:\/\/staging.churchtools.academy\/en\/author\/jstehmeier\/"},"doc_category_info":[{"term_name":"Embedding Calendars","term_url":"https:\/\/staging.churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/"}],"doc_tag_info":[{"term_name":"link missing","term_url":"https:\/\/staging.churchtools.academy\/en\/docs-tag\/link-missing\/"}],"knowledge_base_info":[{"term_name":"Modules","term_url":"https:\/\/staging.churchtools.academy\/en\/help\/churchtools-modules\/","term_slug":"churchtools-modules"}],"knowledge_base_slug":["churchtools-modules"],"_links":{"self":[{"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/comments?post=9394"}],"version-history":[{"count":2,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9394\/revisions"}],"predecessor-version":[{"id":16216,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9394\/revisions\/16216"}],"wp:attachment":[{"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/media?parent=9394"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/doc_category?post=9394"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/doc_tag?post=9394"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/knowledge_base?post=9394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}