Fullcalendar插件显示非常薄的“不可读”事件

时间:2014-08-04 19:02:55

标签: jquery css twitter-bootstrap fullcalendar

我正在使用这个精彩的fullcalendar插件来显示事件。我也在使用css bootstrap 3.2

在日历上显示活动标题时,会发生一些奇怪的事情。事件框的高度非常薄,使其无法读取。我不确定fullcalendar CSS类和bootstrap 3.2包之间是否存在冲突。

以下是日历的屏幕截图 enter image description here

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

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

    $(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>

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

1 个答案:

答案 0 :(得分:0)

来自kriesi.at的解决方案 My Issue ScreenShot 我在fullcalendar插件中面临同样的问题,这是由

来完成的
a.fc-event {
min-height: 10px !important;
}

enter image description here