Sunday, April 9, 2017

FullCalendar Cannot read property 'hasTime' of undefined, even after I override start/end properties

I'm using FullCalendar 3, I changed the event property names to start_at & end_at instead of start & end by using the startParam & endParam like they said in the docs but it still don't work. Here is my JS :

<script>
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                locale: 'en',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultDate: '2017-04-12',
                navLinks: true,
                editable: true,
                eventLimit: true,
                events: {
                    startParam: 'start_at',
                    endParam: 'end_at',
                    url: '/products/all',
                    color: 'yellow'
                },
                eventRender: function(event, element) {
                    element.find('.fc-title').html(event.name);
                }
            });
        });
    </script>

The url accepts a JSON feed with this structure :

[
            {
                id: 1,
                name: "Product 1",
                date: "2017-04-11",
                start_at: "2017-04-09 18:58:47",
                end_at: "2017-04-09 19:58:47",
                created_at: "2017-04-09 19:13:47",
                updated_at: "2017-04-09 19:13:47",
            },
        ...
]

The problem is that the events are displayed and using the date property defined in JSON instead of start_at or end_at as I defined, and if I remove it I get this error Uncaught TypeError: Cannot read property 'hasTime' of undefined, even though I did define the events like this :

events: {
    startParam: 'start_at',
    endParam: 'end_at',
    //...
}

Thank you in advance.



via dwix

Advertisement