jquery - Fullcalendar 插件正在显示非常薄的事件 "unreadable"

Question

我正在使用这个很棒的fullcalendar显示事件的插件。我也在使用 css bootstrap 3.2

在日历上显示事件标题时发生了一些奇怪的事情。事件框的高度非常薄，难以辨认。我不确定 fullcalendar CSS 类和 bootstrap 3.2 包之间是否存在冲突。

这是日历的截图

如何解决此问题并使框可读？

这是我用来显示/更新事件的代码

    $(function() {

        $('#users_menu').change( function(){

            var events = {
                url: 'ajax/getMyEvents.php',
                type: 'POST',
                data: {
                    user_id: $(this).val()
                }
            }


            $('#calendar').fullCalendar( 'removeEventSource', events);
            $('#calendar').fullCalendar( 'addEventSource', events);         
            $('#calendar').fullCalendar( 'refetchEvents' );
        });


        $('#calendar').fullCalendar({

            header: {
              right: 'prev,next today',
              center: 'title',
              left: 'month,agendaWeek,agendaDay'
            },      

            events: {
                url: 'ajax/getMyEvents.php',
                type: 'POST',
                data: {
                    user_id: $('#users_menu').val()
                }
            },
            timeFormat: 'h:mm A',
            defaultView: 'agendaDay',
            eventDrop: function(event, delta, minuteDelta, allDay, revertFunc) {

                if (!confirm("Are you sure about this change?")) 
                    revertFunc();

                updateEvent(event, delta, minuteDelta, allDay, 'Drop', revertFunc); 
            },

            eventResize: function(event, delta, minuteDelta, revertFunc) {

                if (!confirm("Are you sure about this change?")) 
                    revertFunc();

                updateEvent(event, delta, minuteDelta, false, 'endResize', revertFunc); 
            }


        });

    });

    function updateEvent(event, daysDelta, minuteDelta, allDay, eType, revertFunc)
    {
      //console.log(event);

      $.ajax({
        url: "ajax/updateEvents.php",
        type: "POST",
        dataType: "json",
        data: ({
          id: event.id,
          min: minuteDelta,
          days: daysDelta,
          allday: allDay,
          eventType: eType
        }),
        success: function(data, textStatus) {
          if (!data)
          {
            revertFunc();
            return;
          }
          $('#calendar').fullCalendar('updateEvent', event);
        },
        error: function() {
          revertFunc();
        }
      });
    };


</script>

感谢您的帮助和提前时间。

Answer 1

解决方案引用自 kriesi.at 我在 fullcalendar 插件中遇到了同样的问题，由

a.fc-event {
min-height: 10px !important;
}