fullcalendar在当月的月视图中显示错误的日期

时间:2015-11-06 21:48:51

标签: javascript asp.net json fullcalendar

enter image description here

我的fullcalendar插件存在问题。我目前正在尝试在日历的月视图中显示事件。当我在当月时,一周中同一天的事件无法正常显示。它们将在同一周的星期日区块中显示。正如你在图片中看到的那样,我正在挖掘' 4'事件,它写在13日,但显示在8日。即使拖放也知道它不在右侧板上,下方有灰色部分。这只发生在本月。上次我参与我的节目时,是星期二,11月的星期二事件没有正常出现。

enter image description here

如果我进入另一个月,每天都会正常显示。任何人都知道为什么我当前的月份事件会像这样呈现?这是我的全日历代码。我使用javascript和json进行ASP.NET编程以进行事件渲染。

$('#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' }
            });

这是呈现的json数据:

   [{"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}]

这是呈现事件列表的功能:

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);
    }

1 个答案:

答案 0 :(得分:1)

我已经能够通过在fullcalendar.js代码中注释下面的代码来解决问题。星期五的活动现在显示在周五列。虽然,我不相信这是最好的解决方案。

enter image description here

enter image description here