Fullcalendar＆Bootstrap：回調函數適用於.modal（），但不適用.dropdown（'toggle'）

我正在構建日曆應用程序，並希望在用戶拖動時間選擇或點擊一天中的時間。（在絕對位於jsEvent.pageX,jsEvent.pageY處的元素上使用Bootstrap的.dropdown()）。Fullcalendar＆Bootstrap：回調函數適用於.modal（），但不適用.dropdown（'toggle'）

不幸的是有一個問題 - 下拉菜單似乎沒有被正確觸發。奇怪的是，.modal()完全觸發。

我的假設是，Fullcalendar用於偵聽和捕獲事件以確認/呈現用戶選擇的代碼阻止了Bootstrap的正確觸發，但爲什麼不能正確觸發.modal()？

任何幫助，非常感謝。

的jsfiddle：http://jsfiddle.net/sqjz558x/

function eventCreate(start, end, jsEvent, view) { 
    // Works 
    //$('.modal-new-event').modal(); 

    // Doesn't work, notice highlighting of button during drag 
    $('.dropdown-toggle').dropdown('toggle'); 

    // Works but is unreliable (using unselect handler) 
    //$('.dropdown-menu').toggle(); 
} 

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     defaultView: 'agendaWeek', 
     selectable: true, 
     select: function (start, end, jsEvent, view) { 
      return eventCreate(start, end, jsEvent, view); 
     },  
     dayClick: function (date, jsEvent, view) { 
      return eventCreate(date, null, jsEvent, view); 
     }, 
     unselect: function (view, jsEvent) { 
     // $('.dropdown-menu').toggle(); 
     }  
    }) 
});

來源

2016-07-24 mulquin

只需停止該事件傳播的日曆：

document.getElementById("calendar").addEventListener("click", function (e) { 
    e.stopPropagation(); 
});

見工作JSFiddle

的dropdown正由原始點擊事件打開。然後事件傳播，再次觸發並關閉dropdown。 e.stopPropagation();將防止此行爲。

來源

2016-07-28 16:55:17

事實上，它觸發兩次：選擇也產生點擊事件，所以eventCreate（）被調用了兩次，因此，下拉被觸發兩次返回其原始狀態。

如果您在點擊事件中註釋掉eventCreate（）調用，那麼點擊和選擇按預期工作（我認爲），因爲當您單擊單個單元格時，您實際上是在選擇單個單元格長度。見jsfiddle：

dayClick: function (date, jsEvent, view) { 
    ////return eventCreate(date, null, jsEvent, view); 
},

...我看到什麼是第二次點擊再次觸發相同的事件（這好像我的權利），但三分不中。但我認爲這是關於fullCalendar插件內部件...

此外，請注意，打開下拉列表時單擊不同的單元格會再次切換，導致它被關閉而不是打開。所以可能你應該更好地使用一些（「打開」）功能（如果存在，我沒有潛入）或在再次切換之前檢查它的狀態。

來源

2016-07-27 12:12:10 bitifet

的問題，你必須是fullcalendar觸發click事件的選擇（或您的日曆內的任何點擊）是由後document，因爲引導的下拉的hide功能是結合$(document).click()這是一個問題。

什麼這裏真正發生的是，你的下拉菜單中顯示，但之後它獲取由於隱藏到點擊觸發的document

沒有一個很好的解決方案（但它工作） - 你可以取消綁定文件上的點擊：
$(document).unbind('click'); 
真的不推薦，因爲你真的不知道你要亂，but it works（真的，檢查它！）

什麼

你可以看到那裏，我也確保切換下拉unselect。

一個更好的解決辦法是檢查的時候，我們真的需要關閉下拉列表，並在下拉即將獲得隱藏，但不應該 - 被隱藏停止它。爲了做到這一點，我們需要一個新的變量來告訴我們是否需要保持下拉開放與否：

時選擇完成 - 我們需要保持開放
取消選擇的時候 - 這是確定關閉

這種方式 - 即使日曆觸發事件$(document).click() - 因爲我們知道，我們正處在一個select狀態 - 我們不應該隱藏菜單：

var keepDropdownOpen = false; 

$('#calendar').fullCalendar({ 
    defaultView: 'agendaWeek', 
    selectable: true, 
    select: function (start, end, jsEvent, view) { 
     // On select - keep the dropdown open 
     keepDropdownOpen = true; 
     return eventCreate(start, end, jsEvent, view); 
    },  
    dayClick: function (date, jsEvent, view) { 
     //return eventCreate(date, null, jsEvent, view); 
    }, 
    unselect: function (view, jsEvent) { 
     // On unselect - no need to keep the dropdown open 
     keepDropdownOpen = false; 
     $('.dropdown-toggle').dropdown('toggle'); 
    } 
}); 
$('.dropdown').on('hide.bs.dropdown', function (e) { 
    // If we should keep the dropdown open - just return false 
    if (keepDropdownOpen) { 
     return false; 
    } 
    return true; 
})

工作例如：https://jsfiddle.net/5yx4z534/

來源

2016-07-28 02:08:44 Dekel

Fullcalendar＆Bootstrap：回調函數適用於.modal（），但不適用.dropdown（'toggle'）

回答

相關問題