Question

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

我发现的一种黑客方法是将background-image分配给td.fc-widget-content background-position: bottom right，然后使用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-day-number容器中（位于日期容器顶部，上方且不受事件阻碍）：

$('#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);
      }
    });

  });

jQuery FullCalendar＆gt;如何在每天添加按钮（或div）？

3 个答案: