Как заполнить FullCalendar событиями с помощью AJAX?

Я пытаюсь поместить события на плагин FullCalendar.
С AJAX вызова, я иду в моем C# WebMethod, где я беру некоторые записи в базе данных, то я возвращаю из WebMethod массив с различными событиями.

Вот мой Ajax с отображением календаря :

var source = [];
$.ajax({
    type: 'POST',
    url: "Default.aspx/GetEvents",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: '{ userId: 1}',
    success: function (doc) {
        source = [doc.d[0], doc.d[1], doc.d[2]];

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: '',
                right: 'month,basicWeek, agendaFourDay',
            },
            views: {
                agendaFourDay: {
                    type: 'agenda',
                    duration: { week: 1 },
                    buttonText: '7 day'
                }
            },
            height: 650,
            dayClick: function (date, view) {
                alert('Clicked on: ' + date.format());
                alert('Current view: ' + view.name);
                // change the day's background color just for fun
                $(this).css('background-color', 'red');
                $("#AddNew").css("display", "block");
                $("#stDate").val(date.format('DD/MM/YYYY'));
            },
        });
        alert(source);
        $('#calendar').fullCalendar('renderEvent', source, true);
        $('#calendar').fullCalendar('addEventSource', source);
        $('#calendar').fullCalendar('refetchEvents');           
    }
});

Тогда мой код C# :

    [System.Web.Services.WebMethod]
    public static string[] GetEvents(int userId)
    {
        string sql;
        Recordset rst = new Recordset();


        string eventName = null;
        string stDate = null;
        string edDate = null;
        int j = 0;

        if (AppCode.Utils.DB_Connect())
        {
            sql = "SELECT * FROM events WHERE Users_idUsers = 1";
            rst.Open(sql, AppCode.Utils.ocn, CursorTypeEnum.adOpenStatic, LockTypeEnum.adLockOptimistic, -1);

            if(!rst.EOF)
            {  
                while (!rst.EOF)
                {
                    eventName += rst.Fields["EventName"].Value.ToString() + '#' + rst.Fields["StartDate"].Value.ToString() + '#' + rst.Fields["EndDate"].Value.ToString()+'&';                       
                    rst.MoveNext();
                    j++;
                }

            }
            if (rst.State > 0)
                rst.Close();

        }
        AppCode.Utils.DB_Disconnect();

        eventName = eventName.Substring(0, eventName.Length - 1);
        string[] events = eventName.Split('&');

        string final = "";

        foreach (var item in events)
        {
            string[] elements = item.Split('#');
            DateTime dt = new DateTime();
            dt = Convert.ToDateTime(elements[1]);
            stDate = dt.ToString("yyyy-MM-dd");

            DateTime ft = new DateTime();
            ft = Convert.ToDateTime(elements[2]);

            edDate = ft.ToString("yyyy-MM-dd");               

            final += "{  title: '" + elements[0] + "',start: '" + stDate + "',end: '" + edDate + "'}#";
        }

        final = final.Substring(0, final.Length - 1);
        string[] eventsArray = final.Split('#');
        return eventsArray;
    }

Firebug говорит, что есть ошибка :

TypeError: eventProps.start is undefined


eventProps.allDay = !(eventProps.start.hasTime() || (eventProps.end && eventProp...

Мои записи, например d[0] выглядят так :

"{  title: 'aaa',start: '2016-12-11',end: '2016-12-11'}"

У вас есть проблема, как исправить эту ошибку ? Могу я ошибаться ? Или есть другая проблема для отображения событий ?
I search a lot from the internet and the doc of FullCalendar but i don’t find the solution.

1 ответ

  1. Предполагая, что все ваши данные действительны единственное, что вам нужно сделать, чтобы заставить его работать, это удалить

    $('#calendar').fullCalendar('renderEvent', source, true);
    $('#calendar').fullCalendar('addEventSource', source);
    $('#calendar').fullCalendar('refetchEvents');         
    

    а вместо держать только это

    $('#calendar').fullCalendar('addEventSource', source);
    

    Тем не менее, я бы рекомендовал вам использовать вызов ajax в рамках инициализации fullCalendar с использованием eventSources .

    «В массив eventSources можно поместить любое количество массивов событий, функций, URL-адресов каналов JSON или объектов источника событий full-out.

    Вы, вероятно, захотите использовать функцию и фильтровать даты по текущему представлению (и не загружать всю историю событий), чтобы она отображалась автоматически в соответствии с представлением (помните, что вам нужно настроить функцию сервера для ее поддержки).