jQuery FullCalendar > 如何为每一天添加一个按钮(或 div)？

Question

我想让我的用户能够通过单击每天右下角的小加号(+)(在月视图中)将事件添加到jQuery fullCalendar中。实现这一目标的最佳方式是什么？

我发现的一种破解方法是用background-position: bottom right将background-image分配给td.fc-widget-content，然后使用dayClick回调。但是，只要我想在每个单元格中再添加一个按钮，这个就会中断。

有更好的方法来实现这一点吗？

Answer 1

将"添加事件"按钮添加到eventAfterAllRender。见下文：

eventAfterAllRender: function(view){
if(view.name == 'month')
{                       
$('.fc-day').each(function(){
$(this).css('position','relative');
$(this).append('<a class="add_event_label" `enter code here`style="position:absolute;bottom:0;left:0;right:0;display: block;border-top:1px solid black;font-size:12px;color:#000;text-align:center;cursor:pointer;">(+)Add Event</a>');
});      
}                   
}

Answer 2

也许您可以在日期框的顶部添加一个div/按钮，方法是将它们前置到$(".fc-day-number")(或包含它们的<div>)，处理在viewDisplay中的插入。。。

Answer 3

我的完整解决方案-将添加事件按钮放在fc日期容器中(在日期容器的顶部，在上面，不受事件阻碍)：

$('#calendar-bsr').fullCalendar({
eventSources: [
// event source data, local or remote
],
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
eventMove(event.id, event.start.format());
},
eventClick: function (event, jsEvent, view) {
//what should happen when event is clicked   
},
viewRender: function(view){
if(view.name == 'month') {
var add_button = '<a class="add_event_label">+</a>'; 
$(".fc-day-number").prepend(add_button);
}
});
// when user clicks the add event, plus button - I load an add event modal
$( "#calendar-bsr" ).on( "click", ".fc-day-number a.add_event_label", 
function() {
var dt = $(this).parent().attr('data-date');
$.ajax({
url: '/appointments/formbasic',
type: "get",
data: {'_token': $('input[name=_token]').val(), 'date': dt },
success: function(data){
$("#addmodalTitle").html('Add Milestone on ' + dt );
$('#newCalModal').modal('show');
$('#appointment_at').val(dt);
console.log(data);
},
error: function(data)
{
console.log(data);
}
});
});