FullCalendar not showing extraParams

Question

I am having some problems retrieving these from my string

here is my script, taken from the website..

  events: {
            url: '/CalendarManager/Findall',
            method: 'GET',
            extraParams: {
                custom_param1: 'customerName',
                custom_param2: 'description'
            },
            failure: function () {
                alert('there was an error while fetching events!');
            },
            eventRender: function (event, element) {
                element.qtip({
                    content: event.custom_param1,
                    content: event.custom_param2
                });
            }
        },

UPDATE: 12/24/2020

To answer questions below.. I am using 5.3.2 version. I can use this as well and it will bring back everything but the custom parameters.

events: '/CalendarManager/Findall',

I am using Json pulling from DB - Below is the code..

    public ActionResult FindAll()
    {
        return Json(db.GetEvents.AsEnumerable().Select(e => new
        {
            id = e.CompanyId,
            companyName = e.CompanyName,
            title = e.Title,
            description = e.Description,
            allDay = e.AllDay,
            start = e.StartDate.ToString("yyyy-MM-ddTHH:mm:ss"),
            end = e.EndDate.ToString("yyyy-MM-ddTHH:mm:ss"),
            color = e.Color
        }).ToList(), JsonRequestBehavior.AllowGet);
    }

I changed the version I was using and that is when the extras did not show up. So I added what I thought the documentation said to use.

Adding the extra Params after the url did not work..

UPDATE: I read through the suggested. I guess I am still not understanding or maybe not getting "Where I am supposed to put the code".

I believe I need to use eventContent. I also did use the console.log(info.event.extendedProps.companyName); Which is great, it does show up in the console window, However i need it on the calendar not in the console window. FullCalendar's examples could be a little better!

Here is what I did but still does not show on the calendar.

        eventDidMount: function (info) {
            var tooltip = new Tooltip(info.el, {
                title: info.event.extendedProps.description,
                placement: 'top',
                trigger: 'hover',
                container: 'body'
            });
            console.log(info.event.extendedProps.companyName);
        },
        eventSources: [{
            url: '/CalendarManager/Findall',
            failure: function () {
                alert('there was an error while fetching events!');
            },
        }],
        eventContent: function (arg) {
           html: arg.event.extendedProps.companyName
        }

I did add some stuff in there to produce just a bubble when hovered over with this info but it does not work either.

Thank You!

UPDATE: 12/27/2020 Working Code

 var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            left: 'prevYear,prev,next,nextYear today',
            center: 'title',
            right: 'dayGridMonth,dayGridWeek,dayGridDay,listWeek'
        },
        initialView: 'dayGridMonth',
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        dayMaxEvents: true, // allow "more" link when too many events
        themeSystem: 'bootstrap',
        selectable: true,
        selectMirror: true,
        //Random default events
        //events: '/CalendarManager/Findall',
        
        eventDidMount: function (info) {
            var tooltip = new Tooltip(info.el, {
                title: info.event.extendedProps.description,
                placement: 'top',
                trigger: 'hover',
                container: 'body'
            });
            console.log(info.event.extendedProps.companyName);
        },
        events: {
            url: '/CalendarManager/Findall',
            failure: function () {
                alert('there was an error while fetching events!');
            },
        },
        eventContent: function (arg) {
            return { html: arg.event.title + '<br>' + arg.event.extendedProps.companyName + '<br>' + arg.event.extendedProps.description };
        }
       
    });

    calendar.render();

Thank you for all your help!

Answer 1

You can use extraParams using eventSources if you are using fullcalendar v5.

    eventSources: [{
        url: '/CalendarManager/Findall',
        method: 'POST',
        extraParams: {
            custom_param1: 'customerName',
            custom_param2: 'description'
        }
        ...
    }]

You should use POST rather use GET, then it will work.

Answer 2

First, let me know what kind of version of fullcalendar you are using. fullcalendar v5.5 doesn't provide eventRender.

And extraParams is not what you want to show. It is the query params which attach after the request url, like http://example.com/CalendarManager/Findall?custom_param1=customerName&....

If you want to use extend event props then you should parse them as extendProps.

And you should use Event Render Hooks rather than eventRender if you are using the latest version.

How to fix:

1. Anyway, you should use function, not an object.

You can use events (as a function)

function( fetchInfo, successCallback, failureCallback ) { }

You can also use events (as a json feed)

var calendar = new Calendar(calendarEl, {
  events: '/myfeed.php'
});

2. If you are going to use object rather than function, then you can use eventSources

And if you want to handle the success response, then use eventSourceSuccess function

Here is an example (using fullcalendar v5.5):

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'listWeek',
        loading: function(bool) {
            if (bool) {
                $("#dashboard-calendar-column .pre-loader").show();
            } else {
                $("#dashboard-calendar-column .pre-loader").hide();
            }
        },
        // get all events from the source
        eventSources: [{
            url: '/CalendarManager/Findall',
            method: 'GET',

            failure: function() {
                document.getElementById('script-warning').style.display = 'block'
            }
        }],
         // convert the response to the fullcalendar events
         eventSourceSuccess: function(content, xhr) {
            var events = [];

            content.events.value.map(event => {
                events.push({
                    id: event.id,
                    allDay: event.isAllDay,
                    title: event.subject,
                    start:event.start.dateTime,
                    end: event.end.dateTime,
                    // The followings are what you want to add as extended
                    custom_param1: 'customerName',
                    custom_param2: 'description',
                    // Or you could add them to the extendedProps object
                    extendedProps: {
                        custom_param1: 'customerName',
                        custom_param2: 'description',
                        description: event.bodyPreview,
                        ...
                    },
                    // You can check fullcalendar event parsing
                    ...
                })
            })

            return events;
        },
        eventDidMount: function (arg) {
            // remove dot between the event titles
            $(arg.el).find('.fc-list-event-graphic').remove();

           
            // You can select the extended props like arg.event.custom_param1 or arg.event.extendProps.custom_param1
            ...
        },
    });

    calendar.render();
})

Hope this would help you.