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

A+
fullcalendar-cdn-installation-將 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 格式資料,看要如何呈現在網頁上。

首先需要參考這篇「使用FullCalendar完全自訂嵌入式Google日曆樣式」,分別取得 "API 金鑰" 以及 "Google 日曆 ID",接著以下的網址,就能取得 JSON 格式的資料:

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



二、FullCalendar 安裝懶人包(CDN)


免費的 CDN 服務 Cloudflare 也提供了 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",請參考這篇「使用FullCalendar完全自訂嵌入式Google日曆樣式」的詳細圖文說明,取得這兩項重要資訊。


2. 執行程式碼

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


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

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

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

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

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

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


3. 範例效果

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

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


想要操作的話,也可前往範例網頁:




四、FullCalendar 相關說明


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


如果閱讀簡體沒有障礙的話,這個網頁整理了很詳細的中文參數說明,非常需要客製化、且熟悉 JS 的讀者可以參考,相信可以大大縮短研究時間:



更多 jQuery 網頁小工具:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP