javascript - 如何在全日历中正确添加按钮？

Question

我正在使用完整日历，并且有此功能:

calendar: function(datos,rut){

    var self = this;
    console.info(datos);
    $('#calendar').fullCalendar({

        height: 500,
        events: datos,
        editable: true,

            header: {
                left: '',
                center: 'prev title next',
                right: '',
            },

        eventClick:  function(event) {
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#eventUrl').attr('href',event.url);
            $('#fullCalModal').modal();
        },

        eventRender: function (event, element) {

            element.find('.fc-title').append(" (<strong>"+ event.estado +"</strong>)");

            var estado = event.estado;
            var date = event.title;
            var formatoFecha = date.substring(0,10);
            $('.fc-day-number[data-date='+formatoFecha+']').html("<div class=text-center><button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_control_"+formatoFecha+"_id' class='btn btn-default addButton' title='Ver/Editar'><i class='fa fa-eye'></i></button></div>");
            self.actionBtnCalendar(formatoFecha,rut,datos);


        }

    })

    $('#calendar').fullCalendar('removeEvents');
    $('#calendar').fullCalendar('addEventSource', datos);         
    $('#calendar').fullCalendar('rerenderEvents');        
},

看起来像:

眼睛图标是一个按钮，这很好，但问题是我正在使用这个:

$('.fc-day-number[data-date='+formatoFecha+']').html("<div class=text-center><button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_control_"+formatoFecha+"_id' class='btn btn-default addButton' title='Ver/Editar'><i class='fa fa-eye'></i></button></div>";

使用html，所以天数消失，如果我使用append，看起来像这样:

每天的眼睛数量与事件数量相同。

所以我不知道如何在有事件的每一天正确放置按钮，但在外面，我需要与第一张图片相同但显示数字天数的按钮。

我感谢任何建议或帮助，对不起我的英语。

编辑

如果我使用dayRender:

eventRender: function (event, element) {

            element.find('.fc-title').append(" (<strong>"+ event.estado +"</strong>)");

            var estado = event.estado;
            var date = event.title;
            var formatoFecha = date.substring(0,10);
            //$('.fc-day-number[data-date='+formatoFecha+']').html("<div class=text-center><button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_control_"+formatoFecha+"_id' class='btn btn-default addButton' title='Ver/Editar'><i class='fa fa-eye'></i></button></div>");
            self.actionBtnCalendar(formatoFecha,rut,datos); 
        },

        dayRender: function (date, element) {
            $('.fc-day-number[data-date='+date+']').append("<div class=text-center><button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_control_"+date+"_id' class='btn btn-default addButton' title='Ver/Editar'><i class='fa fa-eye'></i></button></div>");
        }

什么也没发生

Answer 1

您获得所看到的结果是因为您使用了 eventRender Hook ，而不是每天显示一次按钮，您应该使用 dayRender Hook 。 请参阅here .

dayRender: function (date, element) {
        $('.fc-day-number[data-date='+date+']').append("<div class=text-center><button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_control_"+date+"_id' class='btn btn-default addButton' title='Ver/Editar'><i class='fa fa-eye'></i></button></div>");
    }

使用此钩子(Hook)，您可以使用append，因为它每天只调用一次。