fullcalendar displaying event in the wrong day in month view of current month

Question

I'm having an issue with my fullcalendar plug-in. I'm currently trying to display events in the monthview of the calendar. When i'm in the current month, the events that are on same day of the week are not displayed properly. They will display in the sunday block of the same week. As you can see in the picture, i was holing the '4' event and it's written to be on the 13th, but displaying in the 8th. Even the drag and drop knows that it's not in the right plate and there is the gray section underneath. This is only happening when it's the current month. Last time I worked on my program, it was Tuesday and the tuesday events of november weren't appearing properly.

If i go into another month, every day will be displayed properly. Anyone has an idea as of why my current month events render like this ? This is my fullcalendar code. I'm programming in ASP.NET with javascript and json for event rendering.

$('#calendar').fullCalendar({
        theme: true,
        header: {
            right: 'today prev,next',
            left: 'title'
        },
        defaultView: 'month',
        eventClick: updateEvent,
        selectable: true,
        selectHelper: true,
        select: selectDate,
        timezone : 'local',
        editable: true,
        events: "../JsonResponse.ashx",
        eventDrop: eventDropped,
        eventResize: eventResized,
        eventRender: function (event, element) {
            //alert(event.title);
            element.qtip({
                content: {
                    text: qTipText(event.start, event.end),
                    title: '<strong>' + event.title + '</strong>'
                },
                position: {
                    my: 'bottom left',
                    at: 'top right'
                },
                style: { classes: 'qtip-dark qtip-rounded' }
            });

This is the json data rendered :

   [{"id":27,"title":"2.5","start":"2015-11-28T00:00:00","end":"2015-11-29T00:00:00","allDay":true,"id_projet":68,"id_employe":1},{"id":43,"title":"5","start":"2015-11-18T00:00:00","end":"2015-11-19T00:00:00","allDay":true,"id_projet":68,"id_employe":1},{"id":44,"title":"5.6","start":"2015-12-03T00:00:00","end":"2015-12-04T00:00:00","allDay":true,"id_projet":68,"id_employe":1},{"id":45,"title":"8","start":"2015-11-12T00:00:00","end":"2015-11-13T00:00:00","allDay":true,"id_projet":68,"id_employe":1},{"id":46,"title":"5","start":"2015-11-16T00:00:00","end":"2015-11-17T00:00:00","allDay":true,"id_projet":68,"id_employe":1},{"id":47,"title":"9","start":"2015-11-27T00:00:00","end":"2015-11-28T00:00:00","allDay":true,"id_projet":68,"id_employe":1},{"id":55,"title":"1","start":"2015-11-06T00:00:00","end":"2015-11-07T00:00:00","allDay":true,"id_projet":68,"id_employe":1},{"id":56,"title":"7","start":"2015-11-29T00:00:00","end":"2015-11-30T00:00:00","allDay":true,"id_projet":68,"id_employe":1}]

This is the function to render the event list :

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        // FullCalendar 2.x
        DateTime start = Convert.ToDateTime(context.Request.QueryString["start"]);
        DateTime end = Convert.ToDateTime(context.Request.QueryString["end"]);
        int id_employe = Int32.Parse(context.Session["id_employe"].ToString());
        int id_projet = Int32.Parse(context.Session["id_projet"].ToString());


        List<int> idList = new List<int>();
        List<ImproperCalendarEvent> tasksList = new List<ImproperCalendarEvent>();

        //Generate JSON serializable events
        foreach (CalendarEvent cevent in EventDAO.getEvents(start, end, id_projet, id_employe))
        {
            tasksList.Add(new ImproperCalendarEvent
            {
                id = cevent.id,
                title = cevent.title,
                id_projet = cevent.id_projet,
                id_employe = cevent.id_employe,

                // FullCalendar 2.x
                start = String.Format("{0:s}", cevent.start),
                end = String.Format("{0:s}", cevent.end),
                allDay = true,
            }
                );

                idList.Add(cevent.id);    

        }

        context.Session["idList"] = idList;

        //Serialize events to string
        System.Web.Script.Serialization.JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        string sJSON = oSerializer.Serialize(tasksList);

        //Write JSON to response object
        context.Response.Write(sJSON);
    }

it doesn't seem to be a timezone problem because i added the timezone : 'local' and it didn't fix the issue. — pikkkura
Not enough code to determine the cause, could you please post how you determine what the date for your events are and how you pass said dates to the full calendar? Will be traveling but I will check on this question throughout the evening if you update it. Gut reaction is that JS off by 1 error on the month as casting C# DateTime to js dates is finicky. — Daniel Hoffmann-Mitscherling
yes i will be updating it with my json data, and the json event rendering function. thank you — pikkkura

pikkkura pikkkura · Accepted Answer · 2015-11-06T22:30:23

I have been able to fix the problem by commenting the code below in the fullcalendar.js code. Friday events are now displaying in the friday column. Though, I don't believe that this is the best solution.

fullcalendar displaying event in the wrong day in month view of current month

1 Answers