FullCalendar - Нет Стандартное поле с addEventSource - PullRequest
Новая
       9

FullCalendar - Нет Стандартное поле с addEventSource

0 голосов
/ 21 июня 2019

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

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

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

Можно ли передать объект или JSON в " Events "?

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

ех. 

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

ExtraParameters: 

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 работает без проблем при реализации в среде fullcalendar, НО сообщения не будут отображаться в календаре, также " 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');
            }
        });

1 Ответ

1 голос
/ 21 июня 2019

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

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

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

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

b) даже если вы это исправите, я сильно подозреваю (основываясь на сигнатуре, которую вы использовали для своей функции 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 через параметры обратного вызова, которые вы можете передать непосредственно на ваш сервер, чтобы помочь ему отфильтровать список возвращаемых событий, чтобы охватить требуемый диапазон дат. Ваш код в настоящее время принимает "месяц" и "год", поэтому он может получить те данные, которые были переданы с начальной даты, но если вы используете что-либо, кроме представлений "месяц", это не будет достаточно гибким.

...