[Tutorial] 使用FullCalendar完全自訂嵌入式Google日曆樣式(含中文化)

2015-10-03教學 Tutorials Standard

嫌棄 Google 日曆 預設的嵌入樣式太醜?
今天要來教各位如何使用 FullCalendar 這款強大的 jQuery 插件完全自定義嵌入網站內的 Google Calendar

FullCalendar 是一款 jQuery 行事曆插件,提供非常龐大的API功能,讓你可以完全透過 JavaScript 參數與你熟悉的 CSS 樣式表,定義行事曆的風格、樣式

FullCalendar 同時提供了 Google 日曆 的插件,可以很方便的透過 Google Calendar API 連接 Google 日曆,讓你可以使用 FullCalendar 顯示 Google 日曆 中的活動事項


 

取得 FullCalendar

FullCalendar 使用 MIT授權,你可以使用在任何商業專案中,都是合法的
請從 FullCalendar 官方網站下載最新版本:http://fullcalendar.io/download/你也可以使用 CDNJS 提供的 CDN 服務,但是因為我們需要用到 Google日曆 插件,所以你仍然得下載此檔案來引入

完成後,請解壓縮檔案,並將插件資料夾置入專案資料夾中


取得必要資訊

取得 Calendar API Key

請至 Google 開發者控制台 (Developer Console)  開啟一個新專案,專案名不拘,但是建議你取一個有識別性的名字

開啟專案後,請選擇「API 和驗證」中的 API,並在右邊視窗中進入「Calendar API」

選擇「啟用API」

切換到「憑證」頁籤,按「新增憑證」→「API金鑰」→「瀏覽器金鑰」→取名後按「建立」

記住 「API 金鑰」,我們等等將會用到,也千萬不要讓別人知道你的API Key

取得 Google 日曆 ID

瀏覽 Google 日曆 ,在你想要嵌入網站的日曆上,開啟選單,選擇「共用此日曆」

勾選「公開此日曆」,接著儲存

螢幕擷取畫面_100315_010122_PM

同樣開啟日曆選單,選擇「日曆設定」,找到「日曆網址」區段,記住右邊的「日曆ID」(一整串)

我們就完成必要資訊的取得囉!


初始化 FullCalendar

請根據您存放 FullCalendar 的位置,在 HTML 的 <head> 區段引入以下檔案:

其中,jQuery 檔案推薦採用 Google 的 CDN 服務,如果需要,請將第四行換成

請繼續在 <head> 區段的最後加上此段初始化程式碼,並填入剛剛取得的資訊

最後在 <body> 中開一個 div,id 為 calendar,就完成初始化的工作囉!

實際把網頁開起來試試,應該就可以看到與 Google 同步的日曆囉!


美化日曆

FullCalendar 提供非常多選項給使用者,也提供 Event Callback,請瀏覽 FullCalendar說明文件 取得更多資訊

但是,既然他是自管的網頁元件,我們當然可以使用最簡單的 CSS樣式表 方法來美化,
相關 Class 都可以直接用瀏覽器的開發者元件看到

這裡筆者也提供一段自己目前使用的 CSS 設定值,相關CSS設定可以透過在 fullcalendar.css 後面引入自訂樣式表,或者直接寫在 <head> 內進行

效果預覽

  • Ting Zhong Loou

    沒看到中文化的說明

    • BobbyHo

      在初始化的地方有提到,請在 引入一些檔案,
      其中第6行就是用來中文化的檔案喔!

  • Esther Lee

    請問一下,手機板可以讀取到這版日曆嗎? 一般的google日曆手機版好像都無法讀取…