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

【问题标题】：jQuery FullCalendar > How to add a button (or div) to each day?jQuery FullCalendar > 如何每天添加一个按钮（或 div）？
【发布时间】：2012-10-04 07:10:49
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery fullcalendar

【解决方案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>');
        });      
    }                   
}

【讨论】：

良好的调用 - viewDisplay 已被弃用，取而代之的是 viewRender
这是一个很好的答案，我现在遇到的问题是当月视图中一天有四个以上的事件时，add_event_label 对象被事件隐藏或重叠，我不能似乎让它显示在其他元素之上。

【解决方案2】：

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

【讨论】：

不，只需在viewDisplay 回调中执行即可。简单测试：在此处添加 $(".fc-day-number").prepend("(+) ");。

【解决方案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);
      }
    });

  });

【讨论】：