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

參考文件：fullcalendar render















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

我的作法如下：

1. 動態產生 fullcalendar div時，記得要給一個 class名稱，因為在 dayEvent, eventClick時會需要用到
2. 實作 tab click event ，作強制 render fullcalendar，如果不這樣作，畫面就只會顯示一個，其它的就不會顯示
   
    $( 'a[data-toggle="tab"]' ).on('shown.bs.tab' , function (e) {

                   var urlStr = "" +e.target;

                   var divName = urlStr.substr(urlStr.indexOf( '#'));

                    $(divName).find( "div" ).fullCalendar('render' );

                

        });
3. 改寫   $( '#calendar').fullCalendar('gotoDate' , date); 
   
   在dayEvent或 eventClick有用到上面的寫法要改成以  ($( this ).parents(".catton-cal-div" ))的寫法，catton -cal-div就是在第一步驟所給的 class