Fullcalendar show “end date” one day off

问题

Fullcalendar show "end date" one day off
json is jan 12th, to 16th, but the calendar show 12th to 15th here is the code

var calCon = $('.cal');
calCon.fullCalendar({
    prev: 'left-single-arrow',
    firstDay: 1,
    weekends:true,
    weekNumbers:true,
    ignoreTimezone:false,
    allDayDefault:true,
    weekNumberCalculation:"ISO",
    defaultView:"basicWeek",
    timeFormat: 'H(:mm)',
    events: {
        url: "/calendarjson.xsp",
        cache: false
    }
})

here is the json

[{"color":"#3a87ad","id":"123","allday":"1","url":"/...","end":"2015-01-16T10:00:00.0+0100","start":"2015-01-12T09:00:00.0+0100","title":"Thomas Adrian"}]

I am using allDayDefault because time is not important.
What am I doing wrong?

I am using the latest fullcalender 2.2.5
I have tried to change the time but it is still the same

回答1:

FullCalendar.js uses exclusive end moments. The documentation says it here. It means that the end moment of an event does not belong to the time interval from start to end, but marks the point in time right after that interval.

The important point here is that you set default for allDay to true. You use 2015-01-16T10:00:00.0+0100 as endpoint for the event. But an allDay event does NOT keep time information internally in fullCalendar. It strips off the time and only keeps the date. You use 2015-01-16T10:00:00.0+0100 as endpoint. The time is stripped and end is made exclusive which results in 2015-01-15T23:59:59.0+0100, what is the result you see in your fullCalendar. You should have used 2015-01-17T00:00:00.0+0100 as end for your allDay event, to have it span to January 16th 23:59:59.

回答2:

In CS FILE: //HolidayList is class with attributes ID, description,start and end

            SqlDataReader reader = SqlHelper.ExecuteReader(ConnStr, CommandType.StoredProcedure, "NameOfStoredProcedure");
            if (reader.HasRows)
            {
                Holiday_List itemObj = null;
                DateTime start, end;
                while (reader.Read())
                {
                    itemObj = new Holiday_List();
                    itemObj.holiday_Id = Convert.ToInt16(reader["holidayID"]);
                    itemObj.description = reader["description1"].ToString();
                    if (reader["date1"] != DBNull.Value)
                    {
                        date = Convert.ToDateTime(reader["date1"]);
                        start = date.AddDays(1);
                        itemObj.date1 = start;
                    }
                    result.Add(itemObj);
                }
            }
            return result;

IN CSHTML:

    $.ajax({
        type: "POST",
        url: '@Url.Action("ActionMethodName", "Controller")',
        contentType: false,
        processData: false,
        success: function (result) {

            if (result != null) {
                $.each(result, function (index, optiondata) {
                    alert(optiondata.date1 + '   ' + optiondata.enddate)
                    holidayList.push({
                        "title": optiondata.description,
                        "start": optiondata.startdate,
                    });
                });
                if (holidayList.length > 0) {
                    $('#calendar').fullCalendar({
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,basicWeek'
                        },
                        navLinks: true, // can click day/week names to navigate views
                        editable: true,
                        eventLimit: true, // allow "more" link when too many events                            
                        events: holidayList,
                        displayEventTime: false
                    });
                }
            }
        }
    });

来源：https://stackoverflow.com/questions/27960971/fullcalendar-show-end-date-one-day-off

标签

javascript

json

fullcalendar