FullCalendar slot minutes of 5 not working

//***************************************************************************************************************
//  Order Calendar
//***************************************************************************************************************
$calendarPanel = $("#calendar-panel");
$orderCalendar = $("#order-calendar");
if($orderCalendar.exists()) {
    $orderCalendar.fullCalendar({
        theme : true,
        weekMode : 'liquid',
        aspectRatio : 0.9,
        header : {
            left:   'title ',
            center: 'today ',
            right:  'month,agendaWeek,agendaDay prev,next'
        },
        selectable: true,
        selectHelper: true,
        slotMinutes: 5,
        defaultEventMinutes: 5,
        /* Events */
        // Clicked on day
        dayClick: function(date, allDay, jsEvent, view) {

                if (allDay) {
                        alert('Clicked on the entire day: ' + date);
                } else{
                        alert('Clicked on the slot: ' + date);
                }

        },
        // Selected a Time
        select: function( startDate, endDate, allDay, jsEvent, view ) {
            alert(startDate);
        }

    });

    /* Show Calendar on Tab Open */
    $calendarPane开发者_JAVA技巧l.bind("panelShown", function() {
        $orderCalendar.fullCalendar('render');
    });
}

jQuery FullCalendar is very cool but when I try to change the slot size to 5 minutes instead of 30, the drag method of entering events goes screwy. Instead of beginning the event at the 5 minute slot I started dragging from, it rounds to the nearest 30 minutes. Very annoying and I'm not sure what I'm doing wrong.

Well, looks like I've found the problem.

I turned the jQuery UI styling option off and everything now works as it should. After a little bit more testing, it turns out that jquery UI styling doesn't work for selecting if timeslots are smaller than 30 minutes.