將 Google 行事曆排程顯示在網頁﹍FullCalendar CDN 安裝懶人包

過去一段時間，網站業務的排程經常處於吃緊的狀態，於是決定好好利用「Google Calendar」，把行事曆的排程顯示在網頁上，業主可查詢案件何時能進入排程、以及案件的時程區間。

基本上，Google 日曆預設就有提供嵌入網頁的語法，如果是功能取向的站長，不一定需要另外瞭解本篇介紹的外掛程式。

如果是形象網站，需要自己設計行事曆的版面、讓效果看起來更專業的話，例如去除 Google 官方 Logo、連結、樣式等等，那麼「FullCalendar」這個強大的外掛，除了最簡單的改版面，還能自己寫程式來設計各種功能。

由於連「Google Drive 都會中止外連功能」，一般的部落格站長，現在要裝各種外掛其實滿困難的，因為很難找到免費又穩定長久的網路空間。還好 FullCalendar 夠熱門，有免費 CDN 提供了各種版本的外連檔案，讓站長們不用擔心這個問題，本篇就來看怎麼進行。

點此看範例網頁

一、Google 行事曆

Google 行事曆的用途非常廣，需要在網站公開行程、排程，都會用得到本篇的內容。例如追星的粉絲，一定會希望大明星能在網頁放上各種通告行程；具有知名度的部落客、公眾人物，也可在網站放自己的行程，方便尋找合作機會的廠商瞭解何時可以接洽，搶先卡位排定檔期。

1. 內嵌語法

如果不想使用外掛、不介意版面的話，其實直接參考這篇「嵌入 Google Calendar」，有詳細的圖文說明，把 Iframe 語法放到網頁即可。


2. 使用 JS 操作

如果是前端工程師，很熟悉 JS 語法的話，可利用 Google Calendar API 取得行事曆中的事件，從返回的 JSON 格式資料，看要如何呈現在網頁上。

首先需要參考這篇「Google Calendar API」，分別取得 "API 金鑰" 以及 "Google 日曆 ID"，接著以下的網址，就能取得 JSON 格式的資料：

https://www.googleapis.com/calendar/v3/calendars/Google 日曆 ID/events?key=API 金鑰

二、FullCalendar 安裝懶人包(CDN)

免費的 CDN 服務 Cloudflare 也提供了 FullCalendar 外連，而且各種版本一應俱全，請參考這個網址：

• https://cdnjs.com/libraries/fullcalendar

以下 WFU 以連結「Google 行事曆」為前提，整理了所有安裝 FullCalendar 需要用到的外連，請按步驟進行，安裝方式以 Blogger 來舉例：

1. 修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

2. 到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css" rel="stylesheet"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.css" rel="stylesheet" media="print"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/locale/zh-tw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/gcal.min.js"></script>

3. 第 1 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

三、執行 FullCalendar

1. 取得 API 金鑰 + Google 日曆 ID

由於我們的任務是結合「Google 行事曆」，並非單純安裝 FullCalendar，因此必須先取得 "API 金鑰" 及 "Google 日曆 ID"，請參考這篇「Google Calendar API」的詳細圖文說明，取得這兩項重要資訊。


2. 執行程式碼

接著在網頁想要顯示 Google 行事曆的地方，加入以下程式碼(例如放在 HTML/Javascript 小工具、或新開一篇文章)：

以下參數修改請參照以上程式碼行號：

A、C：這兩行的紅色字串必須一致

D：綠色字串請改為自己的 Google API 金鑰

F：綠色字串請改為自己的 Google 日曆 ID

H：如果想自訂行事曆高度的話，可修改藍色數字；不需要的話可刪除此行。

J~K：點擊行事曆中的事件時，網頁會跳到行事曆該事件的連接。我非常不太喜歡這樣的效果，因此設定了 eventClick 這個函數，如果熟悉 JS 的話，可以修改這兩行的內容，來呈現不同的效果；如果要維持預設效果，請刪除這兩行即可。


3. 範例效果

下圖是安裝到網頁的範例效果：




想要操作的話，也可前往範例網頁：

點此看範例網頁

四、FullCalendar 相關說明

FullCalendar 之所以強大，是因為提供了完整的各種函數，看得到的部分都可以自訂，不過要啃說明書也很累就是了，可參考官網文件說明：

• FullCalendar Documentation V2 & 3

如果閱讀簡體沒有障礙的話，以下網頁都是很好的使用說明：

• FullCalendar中文文档目录
• FullCalendar日历工具

更多 jQuery 網頁小工具：