搜尋

網頁中嵌入 Google 日曆 ( 行事曆 )

Google 日曆 ( Google Calendar ) 是非常方便的線上日曆應用程式,不論是任何的作業系統,只需要打開瀏覽器就能看到自己所需的日曆行程,這篇教學會介紹如何透過 HTML 的實作,將 Google 日曆加到網頁中。

HTML 教學 - 網頁中嵌入 Google 日曆

將 Google 日曆發布到網路

登入 Google 帳號後前往 Google 日曆,使用現成的日曆或新增一個新的日曆,點選左側日曆後方的「...」,選擇「設定和共用」。

HTML 教學 - 網頁中加入 Google 日曆 - 發布到網路

進入設定畫面後,下拉前往「活動的存取權限」區塊,勾選「公開這個日曆」將日曆發布到網路上。

HTML 教學 - 網頁中加入 Google 日曆 - 發布到網路

將畫面往下到「整合日曆」區域,找到「內嵌程式碼」的程式碼,就是待會要嵌入網頁的程式碼 ( 點選「自訂」後會將所有的日曆整合到同一份程式碼裡,如果只是單一日曆不用點選 )。

HTML 教學 - 網頁中加入 Google 日曆 - 查看日曆程式碼

嵌入 Google 日曆

複製 Google 日曆的程式碼,貼到網頁中的 <body> 裡,執行後就會看見 Google 日曆出現在網頁中。

<iframe src="https://calendar.google.com/calendar/embed?src=fed68789afd73deb7258b05a29339d3315279772e215072bf5cbd26f1ca866fa%40group.calendar.google.com&ctz=Asia%2FTaipei" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Google 日曆嵌入網址參數與屬性

嵌入 Google 日曆之後,可以透過網址參數和 iframe 的屬性設定 Google 日曆,常用的設定參考:

iframe 屬性

屬性 說明
width 寬度 ( 可使用 CSS 取代 )。
height 高度 ( 可使用 CSS 取代 )。
src Google 日曆網址。
frameborder iframe 邊框 ( 可使用 CSS 調整 )。
scrolling 是否可以捲動,預設 no,設定 yes 會出現捲軸。

網址參數

參數 說明
wkst 設定日曆的開頭是星期幾,預設星期天 1,星期一到星期六分別是 2~7。

下方的 HTML 會用兩組不同網址參數和屬性的程式碼,載入同樣的一份 Google 試算表圖表,最後呈現的結果就會是一個星期天開頭,另外一個是星期三開頭。

<iframe src="https://calendar.google.com/calendar/embed?src=fed68789afd73deb7258b05a29339d3315279772e215072bf5cbd26f1ca866fa%40group.calendar.google.com&ctz=Asia%2FTaipei" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

<iframe src="https://calendar.google.com/calendar/embed?src=fed68789afd73deb7258b05a29339d3315279772e215072bf5cbd26f1ca866fa%40group.calendar.google.com&ctz=Asia%2FTaipei&wkst=3" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片