FullCalendar.io timeformat not working with eventsources

Question

I'm using the calendar plugin fullcalendar . Now I want to show my date from my activities in format H(:mm)" but my code isn't working for some reason. My code is in c#.

I've used this javascript code to get it working.

       $('#calendar').fullCalendar({
            header: {
                left: 'prev,title,next',
                right: 'today,basicDay,basicWeek,month'
            },
            lang: 'nl',
            defaultDate: new Date(),
            eventLimit: true, // allow "more" link when too many events
            fixedWeekCount :false, 
            eventSources: [                    
                {   
                    url: '/Groups/GetActivities',
                    type: 'GET',
                    data: {
                            startdate: "2014-12-01",
                            enddate: "2014-12-31",
                            groupid: @Model.Group.Id,
                    },
                    allDay:false,
                    timeFormat:"h:mm",
                    color: '#EAE9E0'
                }
            ]
        });

I've read the documentation about timeformat here . My request returns data in this format:

[{"title":"Bergmonicursus - Val d\u0027anniviers","start":"2015-01-03T12:00:00","end":"2015-02-03T08:00:00","url":"/activities/95/detail?groupid=156","allDay":false}]

Can someone please explain to me what I'm doing wrong. My end result of the activity has 12 as hour format and not 12:00 or 12:30 if I hardcode it.

Answer 1

timeFormat is a top level property in the fullcalendar options object. It can't be an event property.

So put it here

   $('#calendar').fullCalendar({
        header: {
            left: 'prev,title,next',
            right: 'today,basicDay,basicWeek,month'
        },
        lang: 'nl',
        defaultDate: new Date(),
        eventLimit: true, // allow "more" link when too many events
        fixedWeekCount :false, 
        eventSources: [                    
            {   
                url: '/Groups/GetActivities',
                type: 'GET',
                data: {
                        startdate: "2014-12-01",
                        enddate: "2014-12-31",
                        groupid: @Model.Group.Id,
                },
                allDay:false,
                //timeFormat:"h:mm", // X--- Not here
                color: '#EAE9E0'
            }
        ],
        timeFormat:"h:mm", // <---- Here
    });

And if you need to change on a event to event basis, you have to use eventRender . (and do it manually).