FullCalendar - None Standard Field with addEventSource

Question

Getting JSON from CodeBehind with additional None Standard fields using ASP.NET.

Im getting the "standard" title,start,end,color,ClassName correctly when passing "obj" to addEventSource.

The problem is that i would like to use the "Events" and "eventRender" instead of using "addEventSource" to be able to handle the None Standard fields, this doesn't work.

Is it possible to pass object or JSON to "Events"?

I have also tried to use the "docd" (the none parseJSON string) not getting any results displayed in the calendar. Using FullCalendar 3

ex.

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

This is request 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}]

********************* UPDATE 1 *********************

Edited the code, the ajax request works without any problems when implemented within the fullcalendar environment, BUT the posts will not appear in the calendar, also the "eventRender" is not triggered.

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

ADyson ADyson · Accepted Answer · 2019-06-21T11:45:50

I think you are mixing up the syntax and functionality of fullCalendar 3 and fullCalendar 4. They are very different.

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

will fail because

a) you haven't defined an info variable in your function parameters (so you should be getting a Console error, although you didn't mention one), and

b) even if you fix that, I strongly suspect (based on the signature you've used for your eventRender function, and the fact you're making extensive use of jQuery) that you're actually using fullCalendar 3, whose event object doesn't have an "extendedProps" property.

If my assumption is correct then I would expect

console.log(event.ProjectID);

to output the required data.

P.S. Your code is shown somewhat out of context, so I'm not sure exactly how you're going about loading the events, but you don't need to have a process where you make an AJAX call outside the calendar environment, and then pass the resulting array to the calendar later. Instead, use one of fullCalendar's built-in features for dealing with dynamic event sources. In your case, the events-as-a-function option is probably the most suitable. This is the recommended way to connect your data to the calendar.

You can implement it like this:

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 will run this code every time it needs new events (e.g. when the calendar loads, and whenever the user changes the calendar view to cover a date range for which it hasn't already fetched events). As you can see, fullCalendar provides you with start and end dates via the callback parameters, which you can pass directly to your server to help it filter the list of events it returns to cover the date range required. Your code currently accepts "month" and "year", so could get those from the start date passed in, but if you are using anything other than "month" views then this won't be flexible enough.

FullCalendar - None Standard Field with addEventSource

1 Answers