jquery - jQuery FullCalendar > 如何每天添加一个按钮（或 div）？

Question

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

我发现的一种 hack-ish 方法是将 a 分配background-image给td.fc-widget-contentwithbackground-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 容器中（在 day 容器的顶部，上方且不受事件阻碍）：

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

  });