Fullcalendar event 資料來源意視圖 - 使用兩種 web service

參考文章
Fullcalendar 使用 google calendar event資訊 - 使用 javascript

Web服務- 維基百科，自由的百科全書 - Wikipedia

淺談 REST 軟體架構風格 (Part.I) - 從了解 REST 到設計 RESTful！
淺談 REST 軟體架構風格 (Part.II) - 如何設計 RESTful Web Service？

多個 fullcalendar顯示在同一個網頁注意事項 - 使用 bootstrap tab

參考文件：fullcalendar render















目前使用者希望各別會議的預約能夠獨立顯示，所以我想到的是用 bootstrap tab的方式，
在取得 json event array後動態產生一個 tab和一個 fullcalendar div只顯示單一會議室的 events，
雖然我覺得這樣的作法不好，因為如果有30、40個會議室的話，tab就有 30個，提供這個功能是希望使用者能一眼就看出那個時段比較少的會議室預約，所以比較徧好單一 fullcalendar顯示所有的 events，不同的會議室 event用不同的顏色作區別。

我的作法如下：

Fullcalendar popover

參考文章： "Singleton" Bootstrap Popover with Close Button - JSFiddle,
                     How to close previous popovers in fullCalendar?

目前我的日曆希望能點選事件 (event)時可以有 bootstrap popover功能出現且規則如下

1. 一次只能有一個 popover出現
2. 點選  event時，只顯示該 event popover
3. 點選 day時要把顯示的 popover關閉，如果有 more視窗存在，也要一併關閉
4. 因為有設定 eventLimt，所以在點選 more時，要把 popover關閉

參考的文章是使用 fn.extend方式 (jquery extend比較像合併(merge)觀念，並非物件導向的繼承), 先作一個 function內有 popover template，然後再合併原本的 event element，這樣就可以作出我想要的功能囉，可以參考看看

Fullcalendar 常用到的參數分享

相關的說明都可以在官網文件找的到 FullCalendar Documentation
目前有用到的參數如下：

//表頭的顯示，依照需求可以作訂定
 header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

defaultDate: new Date() //一開始的啟始日期，都會一般用 new Date當天日期
         
businessHours: false // 是否顯示工作區間，預設是6:00~ 10:00, 也可以制定
         
eventLimit: true //  如果有太多事件 (event)在同一天在 View month，可以用 more來代表

 //View 是 week or day時，畫面啟始時間會移到所指定的 scrollTime
scrollTime: 'HH;mm:ss'

CSS 色彩配置 for fullcalendar event

因為要找 fullcalendar event的顏色配色，下面這些可以提供參考，像我這種沒有美學的工程師，要試著開始了解怎麼排版、配色，讓自己的專案能有加分的效果

25 Examples of Perfect Color Combinations in Web Design


Best Color Tools And Articles For Designers

wufoo gallerydesign

看起來不會太亂，配色也不錯

Fullcalendar 使用 google calendar event資訊 - javascript

 

參考文件：google calendar api - javascript範例

上面的參考文件使用 OAuth 2讀取非公開的日曆步驟如下：
1. Google Developers Console創件一個 project (如果有就省略)
2. API的部份記得要開通 calendar API 
3. 到憑證 (Credentials)至少要有一個 web application憑證
    a. Authorized JavaScript Origins記得要輸入網址如http://localhost:8000
        ，可以是 IP或是 domain name，可以多個，這是你實際 javascript讀取 API要識別的。
    b. Authorized Redirect URIs 要清空