FullCalendar shows always 2Hours events

Question

Hi I have rhis elements that I have to display in my Jquery FullCalendar.

    <script type="text/javascript">

        $(document).ready(function () {

                calendarcreate();
                var obj;
            });

           function calendarcreate() {
                $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: "{}",
                dataType:"json",
                url: "Calendario.aspx/GetEvents",                
                success: function (data) {
                    $('#<%=fullcal.ClientID%>').fullCalendar({
                        firstDay: 1,
                        monthNames: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
                        monthNamesShort: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
                        dayNames: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'],
                        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
                        buttonText: {
                            today: 'Oggi',
                            month: 'Mese',
                            day: 'Giorno',
                            week: 'Settimana',
                            prev: 'Prec',
                            next: 'Succ'
                        },
                        header: {
                            left: 'today',
                            center: 'title',
                            right: 'prev,next'
                        },
                        timeFormat: "H:mm",
                        slotLabelFormat: "H:mm",
                        slotLabelInterval: '00:30:00',
                        defaultView: "agenda",
                        allDaySlot: true,
                        allDayText: 'Tutto il Giorno',
                        minTime: "08:00:00",
                        maxTime: "22:00:00",
                        displayEventEnd: true,
                        axisFormat: 'H:mm',
                        titleFormat: 'D MMMM YYYY',
                        columnFormat: 'ddd D/M',
                        //inserimento appuntamenti da Ajax
                        events: $.map(data.d, function (item, i) {
                            var event = new Object();
                            event.id = item.EventID;

                            alert(item.StartHour);
                            alert(item.EndHour);
                            event.start = new Date(item.DateYear, item.DateMonth - 1, item.DateDay, item.StartHour, item.StartMinute);
                            event.end   = new Date(item.DateYear, item.DateMonth - 1, item.DateDay, item.EndHour, item.EndMinute);
                            event.title = item.EventName;
                            event.color = item.Color;

                            event.allDay = false;

                            return event;
                        })
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown)
                { debugger; }
            }); 

        }
    </script>

How You can See, events in Data 2016-09-16 are:

 - Id = 6, From 11.30 To 12.30
 - Id = 7, From 10.30 To 11.30

In the alerts that I put in event creation of FullCalendar shows me the right end hour. So, for events in Data 2016-09-16 it alerts me 12 and 11.

The problem is that FullCalendar show me events like this:

 - Id = 6 From 11.30 To 13.30
 - Id = 7 From 10.30 To 12.30

So always 2 Hours of length

Answer 1

FullCalendar works natively with moment.js objects rather than with the JavaScript Date objects. The moment.js library is already included into fullCalendar.

Thus it's best if you replace this:

event.start = new Date(item.DateYear, item.DateMonth - 1, item.DateDay, item.StartHour, item.StartMinute);
event.end   = new Date(item.DateYear, item.DateMonth - 1, item.DateDay, item.EndHour, item.EndMinute);

with this:

event.start = moment({ y: item.DateYear, M: item.DateMonth - 1, d: item.DateDay, h: item.StartHour, m: item.StartMinute, s: 0, ms: 0});
event.end   = moment({ y: item.DateYear, M: item.DateMonth - 1, d: item.DateDay, h: item.EndHour, m: item.EndMinute, s: 0, ms: 0});

Moreover, are you in the +01:00 timezone (Italy)? The problem could be caused by that. If that is the case, there are options in fullCalendar that can handle the timezone properly.