FullCalendar — нет стандартного поля с addEventSource

Получение JSON из CodeBehind с дополнительными полями None Standard с использованием ASP.NET.

Я правильно получаю «стандартный» заголовок, начало, конец, цвет, имя класса при передаче «obj» в addEventSource.

Проблема в том, что я хотел бы использовать "Events" и "eventRender" вместо "addEventSource", чтобы иметь возможность обрабатывать Нет Стандартные поля, это не работает.

Можно ли передать объект или JSON в «События»?

Я также пытался использовать "docd" (строка none parseJSON), не получая никаких результатов, отображаемых в календаре. Использование FullCalendar 3

ex.

 events: obj, 
    eventRender: function(event, element) {
        Console.log(info.event.extendedProps.PrjectID)
    }

Это запрос Ajax:

 $.ajax({
                type: "POST",
                url: "Calender.aspx/GetTimeData",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ 'year': year, 'month': month, 'projectID': projectid }),
                dataType: "json"

            }).done(function (doc) {
                var events = [];
                docd = doc.d;
                obj = $.parseJSON(doc.d);
              }
                 });

Дополнительные параметры:

ProjectID,UserID,WorkTypeID,Signed

Json:

  [{"Signed":1,"ProjectID":39,"WorkTypeid":1,"UserID":97,"id":719627,"start":"2019-01-01T07:00:00","end":"2019-01-01T15:00:00","title":"Test Title ","color":"#607d8b","className":null}]

********************* ОБНОВЛЕНИЕ 1 **********************

Отредактировал код, запрос ajax работает без проблем при реализации в среде полного календаря, НО сообщения не будут отображаться в календаре, также не срабатывает "eventRender" .

        $('#calendar').fullCalendar({

            loading: function (bool) {
                //LoadEvents();
                //alert('events are being rendered'); // Add your script to show loading
            },
            eventAfterAllRender: function (view) {
                //alert('all events are rendered'); // remove your loading 

            },
            navLinks: true,
            lazyFetching: false,
            height: "auto",
            aspectRatio: 2,
            weekends: true,
            weekNumbers: true,
            displayEventEnd: true,
            showNonCurrentDates: false,
            weekLabel: "V",
            allLocales: true,
            locale: "sv",
            header: false,
            //header: {
            //    //left: 'prev,next today',
            //    left: '',
            //    center: '',
            //    right: 'month,agendaWeek,agendaDay,listMonth'
            //},
            viewRender: function (element, view) {
                var title = view.title;
                $("#CalendarHeadTitle").html(title);
                //element.find('.fc-title').append("-test-"); 
            },
            dayClick: function (date, jsEvent, view) {
                $("#sDate, #eDate").val(moment(date).format("YYYY-MM-DD"));
                $('.modal').modal('show');
            },
            eventClick: function (info) {
                $('.modal').modal('show');
            },
            eventDrop: function (event, delta, revertFunc) {

                //TODO: Implement - call to move!

                if (!confirm("Vill du flytta ")) {
                    revertFunc();
                }
            },

            editable: true,
            events: function (start, end, timezone, callback) {

                $.ajax({
                    type: "POST",
                    url: "Calender.aspx/GetTimeData",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ 'year': $("#<%=DdlYear.ClientID%>").val(), 'month': $("#<%=DdlMonth.ClientID%>").val(), 'projectID': $("#<%=DdlProjects.ClientID%>").val() }),
                    dataType: "json"
                }).done(function (doc) {
                    var events = $.parseJSON(doc.d);
                    console.log(doc.d);
                    callback(events); //this provided callback function passes the event data back to fullCalendar
                });
            },
            eventRender: function (event, element) {
                console.log('event render action');
            }
        });

person Jonas Johansson    schedule 21.06.2019    source источник


Ответы (1)


Я думаю, вы путаете синтаксис и функциональность fullCalendar 3 и fullCalendar 4. Они очень разные< /а>.

Console.log(info.event.extendedProps.PrjectID)

потерпит неудачу, потому что

а) вы не определили переменную info в параметрах вашей функции (поэтому вы должны получить ошибку консоли, хотя вы ее не упомянули), и

б) даже если вы исправите это, я сильно подозреваю (основываясь на подписи, которую вы использовали для своего eventRender и тот факт, что вы широко используете jQuery), что на самом деле вы используете fullCalendar 3, чей объект события не имеет свойства "extendedProps".

Если мое предположение верно, то я ожидаю

console.log(event.ProjectID);

для вывода необходимых данных.


P.S. Ваш код показан несколько вне контекста, поэтому я не совсем уверен, как вы собираетесь загружать события, но вам не нужен процесс, в котором вы делаете вызов AJAX вне среды календаря, а затем передаете полученный массив в календарь позже. Вместо этого используйте одну из встроенных функций fullCalendar для работы с источниками динамических событий. В вашем случае вариант events-as-a-function, вероятно, является наиболее подходящим . Это рекомендуемый способ подключения ваших данных к календарю.

Вы можете реализовать это следующим образом:

events: function( start, end, timezone, callback ) {
  $.ajax({
    type: "POST",
    url: "Calender.aspx/GetTimeData",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ 'year': year, 'month': month, 'projectID': projectid }),
    dataType: "json"
  }).done(function (doc) {
    var events = $.parseJSON(doc.d);
    callback(events); //this provided callback function passes the event data back to fullCalendar
  });
}

FullCalendar будет запускать этот код каждый раз, когда ему нужны новые события (например, при загрузке календаря и всякий раз, когда пользователь меняет представление календаря, чтобы охватить диапазон дат, для которого он еще не получил события). Как видите, fullCalendar предоставляет вам даты start и end через параметры обратного вызова, которые вы можете передать непосредственно на свой сервер, чтобы помочь ему отфильтровать список событий, которые он возвращает, чтобы охватить требуемый диапазон дат. Ваш код в настоящее время принимает «месяц» и «год», поэтому вы можете получить их с даты начала, но если вы используете что-то другое, кроме «месяца», это не будет достаточно гибким.

person ADyson    schedule 21.06.2019
comment
Спасибо, но вы должны быть более конкретным, чем не будет отображаться. Может быть, вы получаете ошибки в своей консоли JavaScript? Я думаю, что, возможно, сделал ошибку, не заметив этого раньше - dataType: "json" означает, что jQuery проанализирует загруженный JSON и автоматически преобразует его в объект. Это означает, что (при условии, что doc.d содержит объект, а не строку) $.parseJSON не нужен. - person ADyson; 21.06.2019
comment
Сначала проверьте консоль на наличие ошибок. Затем попробуйте изменить метод done на следующий, чтобы он передавал данные напрямую без дополнительного синтаксического анализа: .done(function (doc) { callback(doc.d); }); - person ADyson; 21.06.2019
comment
Как с обратным вызовом (события), так и с обратным вызовом (doc.d) в консоли нет ошибок, сообщения в календаре не отображаются. И console.log('действие рендеринга событий'); не срабатывает - person Jonas Johansson; 21.06.2019
comment
Ну, если никакие события не отображаются, очевидно, что eventRender не будет запущен. Можете ли вы поставить .done(function (doc) { console.log(JSON.stringify(doc)); callback(doc.d); });, пожалуйста, а затем вставьте мне результат команды console.log. Спасибо. - person ADyson; 21.06.2019
comment
{d:[{\Signed\:1,\ProjectID\:39,\worktypeid\:1,\UserID\:97,\id\:719627,\start\:\2019-01-01T07:00:00\ ,\end\:\2019-01-01T15:00:00\,\title\:\test title\,\color\:\#607d8b\,\className\:null}]} - person Jonas Johansson; 21.06.2019
comment
Правильно, вы, кажется, дважды закодировали свой JSON. Я предполагаю, что в вашем коде на стороне сервера вы создали свои события, сериализовали их в строку JSON и затем вернули их, а ASP.NET затем сериализовала это в JSON (что обычно делается автоматически в WebMethods ), завернутый в дополнительный объект со свойством d. Нет необходимости выполнять собственную сериализацию JSON, просто верните массив событий непосредственно из веб-метода, и ASP.NET выполнит сериализацию за вас. - person ADyson; 21.06.2019
comment
Итак, console.log(JSON.stringify(doc.d)) Возвращает: [{\Signed\:1,\ProjectID\:39,\worktypeid\:1,\UserID\:97,\id\:719627,\ начало\:\2019-01-01T07:00:00\,\конец\:\2019-01-01T15:00:00\,\название\:\название теста\,\цвет\:\#607d8b\,\ className\:null}] Разбор $.parseJSON(doc.d); дает json-объект в console.log. Используя этот объект в событиях или просто doc.d в виде строки, никто не будет отображать записи календаря. - person Jonas Johansson; 21.06.2019
comment
Да, JSON.stringify(doc.d) просто даст тот же результат, что и в вашем предыдущем комментарии, потому что это уже строка. Упорядочивание строки не имеет дополнительного эффекта! Как я уже сказал, оптимальное решение состоит в том, чтобы изменить код вашего сервера, чтобы он не выполнял двойное кодирование, и поэтому вы с самого начала получаете правильный массив. Но вы могли сделать callback(JSON.parse(doc.d));, и это должно сработать. - person ADyson; 21.06.2019
comment
Позже исправим бэкэнд, просто хочу проверить, что сообщения отображаются нормально, все та же проблема с callback($.parseJSON(doc.d)); Нет рендеринга постов и нет ошибок в консоли - person Jonas Johansson; 21.06.2019
comment
Это довольно странно, я не знаю, что именно вы делаете неправильно. Если мы тестируем только образцы данных, которые вы предоставили изолированно, то все работает нормально, вот демонстрация: jsfiddle.net/ gzc5jamn/1 . Я отмечаю, что пример события относится к январю 2019 года ... глупый вопрос, но вы смотрите на правильный период времени в своем календаре, а не только на сегодняшнюю дату, я надеюсь? если дело не в этом, то сложно понять, может что-то в том, что вы мне рассказали, не совсем верно. - person ADyson; 21.06.2019
comment
На самом деле мы можем даже расширить демонстрацию вызовом фиктивной конечной точки AJAX, которая предоставляет точный JSON, который вы мне показали (просто чтобы показать, что это не проблема с AJAX как таковым), и он все еще работает нормально: jsfiddle.net/gzc5jamn/2 . - person ADyson; 21.06.2019
comment
Затем мы можем добавить все остальные параметры fullCalendar, которые вы указали в своем коде в вопросе, это все еще нормально: jsfiddle.net/gzc5jamn/3 . Поэтому я действительно немного озадачен тем, почему вы не видите никаких результатов. Единственным очевидным отличием здесь является вызов AJAX (поскольку мне пришлось использовать фиктивную конечную точку). Но вы сказали мне, что возвращает ваша конечная точка AJAX... так что не должно быть так... если то, что вы сказали мне об этом, неверно, или вызов иногда происходит сбой (вы сможете увидеть это в сетевых инструментах), или есть что-то еще в вашей настройке, о которой вы не упомянули. - person ADyson; 21.06.2019
comment
О, и извините, вот версия, регистрирующая ваше пользовательское поле ProjectID, что, я думаю, было исходной точкой вопроса! jsfiddle.net/mexfos16 - person ADyson; 21.06.2019
comment
Ну ты прав. Представление не было обновлено с помощью $(#calendar).fullCalendar('gotoDate', date); решил проблему. Большое спасибо за помощь! - person Jonas Johansson; 21.06.2019