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

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

Bootstrap Typeahead處理 json格式資料，並更新另一個 input的值

參考文件： Bootstrap typeahead ajax result format - Example

因為 Bootstrap Typeahead的 source是一個字串陣列 (string array)，如果使用者希望可以 source可以是 json string array而且在 typeahead選擇時可以更新另一個 input的值，這一篇文章就可以幫助你，作法如下

1. source 接回的是 json string array
2. 實作 matcher, sorter, highlighter
3. 實作 updater，在這邊就可以用 JSON.parse 處理 obj，再把某個 attribute值指定給特定的input

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 要清空

Treehouse - 網頁技術教學

找到一個 youtube網頁技術教學，想挖寶的人可以看看 treehouse

好用的 CSShake - 製造晃動的動畫效果

有時候希望在使用 ajax捉資料時可以跟使用者互動，一般是將滑鼠的狀態作改變

但是也可以用一些動畫來顯示，像 CSShake就可以達到我的要求

只要套用 csshake.min.css，然後再要套用的 element上 class加上比如 shake shake-little (小震動)

就可以囉，真是方便。



CSShake

CSShake Github