2012-10-27 36 views
2

我有一個要求fullcalendar jquery插件應該使用。但我需要定製它。就像我需要將(日/月/周)視圖按鈕的位置改變到屏幕的最左邊。當我嘗試修改fullcalendar.js時,我可以看到它只能移動到日曆的右側/左側。沒有超越。我需要在頁面的側邊欄中留下那些按鈕。可能嗎??或者有沒有其他的選擇?更改完整日曆的按鈕位置

我想,一種方法是自己創建按鈕並將它們連接到Fullcalendar小部件。但我不是一個jQuery的專業人員,我寧願嘗試更簡單的事情。謝謝。

+1

您可以嘗試CSS而不是fullcalendar.js。 '位置:固定; left:0;'將元素對齊瀏覽器鑲邊。 –

+0

是的,但它會將其與屏幕左側對齊。但它顯示爲一行。我需要顯示爲列表。所以我的要求是,「側邊欄」中會有一個按鈕/鏈接作爲「日曆」,當您點擊它時,它會將日曆的可用視圖擴展爲列表。 – rubyist

回答

1

首先,您可以從FullCalendar初始化的標題定義中刪除日/月/周按鈕。接下來,你可以使用類似於下面的函數來連線您的自定義按鈕做視認切換操作:

function switchView(viewName) { 
    $('#calendar').fullCalendar('changeView', viewName); 
} 

讓我知道,如果這有助於!

+0

是的,我親愛的朋友。我也嘗試了這一點,它的工作。謝謝... :) – rubyist

3

一個簡單而快速的解決方案是將插件JS單獨留下,只需隱藏內置按鈕並將其添加到您想要的位置。

在您的按鈕的點擊處理程序中,您觸發單擊與關聯的插件按鈕。這是因爲檢查類瀏覽器控制檯HTML視圖中的每個按鈕後,加入到代碼簡單,我開始

/* quick hide with script for a test, best done with css */ 
$('.fc-header-right').hide(); 

$('#myWeekViewButton').click(function(){ 
    $('.fc-button-agendaWeek').click(); 
}); 

此測試以及在瀏覽器控制檯上演示站點

+0

哇..這工作..感謝很多傢伙.. – rubyist