Fullcalendar event height is zero

Question

I'm working with Fullcalendar, it worked fine before, but today I reuse this, it has a problem, all events have height = 0

Below is my code:

$('#calendar').fullCalendar({
        header:{
            left:'title',
            center:'',
            right:'prev,next,today agendaWeek,agendaDay'
        },
        buttonText:{
            prev:'<span>&lsaquo;</span>',
            next:'<span>&rsaquo;</span>'
        },
        defaultView:'agendaWeek',
        aspectRatio:3,
        selectable:true,
        selectHelper:true,
        theme:false,
        editable:false,
        allDaySlot:false,
        droppable:false,
        slotMinutes: <?php echo Yii::app()->params['app_rust_appointment_duration'] ?>,
        events:{
            url:'<?php echo $this->createUrl('getCustomer') ?>',
            success: function (data) {
                console.log(data);
            }
        }
    });

Ajax result:

[{ "id": "1", "title": "Khanh Tran", "start": "2014-03-03 08:00:00", "end": "2014-03-03 08:00:45", "allDay": false },{ "id": "2", "title": "Khanh Tran", "start": "2014-03-06 08:00:00", "end": "2014-03-06 08:00:45", "allDay": false },{ "id": "3", "title": "Khanh Ngam", "start": "2014-03-06 19:15:00", "end": "2014-03-06 19:15:45", "allDay": false }]

And I get problem like this pic:

Please help me

Thanks

Answer 1

It looks like your event is 45 seconds long. If your event is truly 45 seconds long you can update the fc-event to have a min height.

Example in fullcalendar.css:

.fc-event {
border: 1px solid #3a87ad;
background-color: #3a87ad;
color: #fff;
font-size: .85em;
cursor: default;
min-height: 15px; // additional styling here
}