{"id":1232,"date":"2017-06-19T19:48:55","date_gmt":"2017-06-19T19:48:55","guid":{"rendered":"http:\/\/artsci.case.edu\/documentation\/?page_id=1232"},"modified":"2017-06-19T19:48:55","modified_gmt":"2017-06-19T19:48:55","slug":"embedding-google-calendar","status":"publish","type":"page","link":"https:\/\/artsci.case.edu\/documentation\/embedding-google-calendar\/","title":{"rendered":"Embedding Google Calendar"},"content":{"rendered":"<p><a href=\"https:\/\/www.google.com\/calendar\/\">Google Calendar<\/a> is a free calendar application from Google that makes it easy to keep track of life\u2019s important events all in one place.\u00a0You can embed a Google calendar into a post or page by using the Google calendar embed code. To generate your embed code, please follow these steps.<\/p>\n<div class=\"row column-group-1\"><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>In Google Calendar, click on the little arrow next to your calendar name and select the <strong>Calendar settings<\/strong> link.<\/p>\n<p>\n<\/div><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-1205\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145400\/google-calendar.png\" alt=\"\" width=\"474\" height=\"387\" \/><\/p>\n<p>\n<\/div><\/div>\n<hr \/>\n<div class=\"row column-group-2\"><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>Click the <strong>Share this Calendar<\/strong> tab and make your calendar public by checking the checkbox called\u00a0<strong>Make this calendar public<\/strong>. Don\u2019t forget to press the <strong>Save\u00a0<\/strong>button when you are done.<\/p>\n<p>\n<\/div><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-1206\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145513\/share-calendar.png\" alt=\"\" width=\"425\" height=\"172\" \/><\/p>\n<p>\n<\/div><\/div>\n<hr \/>\n<div class=\"row column-group-3\"><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>Click on the <strong>Calendar Details<\/strong> tab and copy\/paste the code on your college website where you&#8217;d like the calendar to appear. The embed code contains your Google account name, so be sure you\u2019re okay with making that name public.<\/p>\n<p>\n<\/div><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-1207\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145635\/google-calendar-iframe-600x343.png\" alt=\"\" width=\"600\" height=\"343\" srcset=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145635\/google-calendar-iframe-600x343.png 600w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145635\/google-calendar-iframe-768x440.png 768w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145635\/google-calendar-iframe-500x286.png 500w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145635\/google-calendar-iframe.png 835w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>\n<\/div><\/div>\n<hr \/>\n<div class=\"row column-group-4\"><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>In the dashboard of your college website, go to <strong>Posts \u2192 Add<\/strong>\u00a0or <strong>Pages \u2192 Add<\/strong>\u00a0(or open an existing post\/page in editing mode). Paste the code directly into the editor.<\/p>\n<p>\n<\/div><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-1208\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145727\/iframe-google-calendar-600x140.png\" alt=\"\" width=\"600\" height=\"140\" srcset=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145727\/iframe-google-calendar-600x140.png 600w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145727\/iframe-google-calendar-500x116.png 500w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16145727\/iframe-google-calendar.png 718w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>\n<\/div><\/div>\n<hr \/>\n<div class=\"row column-group-5\"><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>Click <strong>Save Draft<\/strong>, <strong>Update<\/strong>, or <strong>Publish<\/strong> depending on the status of your post or page. You will notice that the code has changed. WordPress has converted the HTML code into the working shortcode.<\/p>\n<p>\n<\/div><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-1209\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16150029\/shortcode-google-calendar-600x169.png\" alt=\"\" width=\"600\" height=\"169\" srcset=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16150029\/shortcode-google-calendar-600x169.png 600w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16150029\/shortcode-google-calendar-500x141.png 500w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16150029\/shortcode-google-calendar.png 716w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>\n<\/div><\/div>\n<hr \/>\n<div class=\"row column-group-6\"><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>Here is an example of what an embedded calendar will look like.<\/p>\n<p>\n<\/div><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<iframe src=\"https:\/\/www.google.com\/calendar\/embed?height=300&#038;amp;wkst=1&#038;amp;bgcolor=%23FFFFFF&#038;amp;src=en.usa%23holiday%40group.v.calendar.google.com&#038;amp;color=%232F6309&#038;amp;ctz=America%2FChicago\" frameborder=\"0\" width=\"450\" height=\"300\" marginheight=\"0\" marginwidth=\"0\" allowfullscreen=\"true\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\"><\/iframe>\n<p>\n<\/div><\/div>\n<hr \/>\n<div class=\"row column-group-7\"><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>To customize your calendar, click the <strong>Customize the color, size, and other options<\/strong> link during step 3 above.<\/p>\n<p>\n<\/div><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-1210\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/16151025\/customize-google-calendar.png\" alt=\"\" width=\"456\" height=\"154\" \/><\/p>\n<p>\n<\/div><\/div>\n<hr \/>\n<div class=\"row column-group-8\"><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>Customizing the calendar allows you to choose which elements of the calendar you want displayed, the default layout (the one everyone sees when it is embedded), the size, and the background color.<\/p>\n<p>\n<\/div><div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-1236\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/19194816\/calendar_customization-600x381.png\" alt=\"\" width=\"600\" height=\"381\" srcset=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/19194816\/calendar_customization-600x381.png 600w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/19194816\/calendar_customization-768x487.png 768w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/19194816\/calendar_customization-1024x650.png 1024w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/19194816\/calendar_customization-500x317.png 500w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2017\/06\/19194816\/calendar_customization.png 1242w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p><a href=\"https:\/\/www.google.com\/calendar\/\">Google Calendar<\/a> is a free calendar application from Google that makes it easy to keep track of life\u2019s important events all in one place.\u00a0You can embed a Google calendar into a post or page by using the Google calendar embed code. To generate your embed code, please follow these steps.<\/p>\n<p><a href=\"https:\/\/artsci.case.edu\/documentation\/embedding-google-calendar\/\" class=\"more-link\">Continue reading&#8230; <span class=\"screen-reader-text\">Embedding Google Calendar<\/span><\/a><\/p>\n","protected":false},"author":19,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"spay_email":""},"_links":{"self":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages\/1232"}],"collection":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/comments?post=1232"}],"version-history":[{"count":1,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages\/1232\/revisions"}],"predecessor-version":[{"id":1237,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages\/1232\/revisions\/1237"}],"wp:attachment":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/media?parent=1232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}