FullCalendar 不显示 extraParams答案

【问题标题】：FullCalendar not showing extraParamsFullCalendar 不显示 extraParams
【发布时间】：2020-12-23 23:44:45
【问题描述】：

我在从我的字符串中检索这些时遇到了一些问题

这是我的脚本，取自网站..

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

更新：2020 年 12 月 24 日

回答以下问题.. 我使用的是 5.3.2 版本。我也可以使用它，它会带回除自定义参数之外的所有内容。

events: '/CalendarManager/Findall',

我正在使用从 DB 中提取的 Json - 下面是代码..

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

我更改了我正在使用的版本，这就是额外功能没有出现的时候。所以我添加了我认为文档说要使用的内容。

在 url 之后添加额外的参数不起作用..

更新：我通读了建议。我想我仍然不明白，或者可能没有得到“我应该把代码放在哪里”。

我相信我需要使用eventContent。我也确实使用了console.log(info.event.extendedProps.companyName);，这很棒，它确实显示在控制台窗口中，但是我需要它在日历上而不是在控制台窗口中。 FullCalendar 的例子可能会更好一点！

这是我所做的，但仍然没有显示在日历上。

        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
        }

我确实在其中添加了一些东西，以便在将鼠标悬停在此信息上时只产生一个气泡，但它也不起作用。

谢谢！

更新：2020 年 12 月 27 日工作代码

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

感谢您的帮助！

【问题讨论】：

您确定events 是对象吗？因为在FullCalendar 文档中他们使用的是数组。
extraParams 用于发送到服务器，而不是接收它（如果您感到困惑，我建议您重新阅读文档） .因此，这些属性将不存在于您的事件数据中。如果您想在事件数据中添加自定义属性，那么您应该在返回 JSON 之前在服务器端添加它们。而且，最新的 fullCalendar 中不存在 eventRender。请始终使用您正在使用的确切 fullCalendar 版本标记问题，因为版本之间存在很大差异。下面的答案有更多细节。
感谢您的更新...。您说it will bring back everything but the custom parameters....是的，因为自定义参数是您发送的内容。他们没有回来，他们走了。而且您的 FindAll() 方法不接受传入参数，因此它不期望它们。
那么问题就来了，如何显示json字符串中已经存在的自定义参数？
好的，首先请阅读fullcalendar.io/docs/event-object 并确保您理解文章末尾关于非标准字段的内容。接下来请阅读fullcalendar.io/docs/event-render-hooks - 这是在 fullCalendar 版本 5 中替换 eventRender 的功能。根据这些信息尝试并实施一些方法来解决您的问题。如果您在那之后仍然遇到困难，请编辑您的问题以显示您更新的代码。（附言，据我所知，您根本不需要 customParams，因此您可以将其从事件定义中删除）。

标签： javascript fullcalendar fullcalendar-5

【解决方案1】：

首先，让我知道您使用的是哪种版本的fullcalendar。 fullcalendar v5.5 doesn't provide eventRender.

而extraParams 不是您想要显示的。它是在请求 url 之后附加的查询参数，例如http://example.com/CalendarManager/Findall?custom_param1=customerName&...。

如果您想使用扩展事件道具，那么您应该将parse them 设为extendProps。

如果您使用的是最新版本，则应使用Event Render Hooks 而不是eventRender。

如何解决：

无论如何，您应该使用function，而不是对象。

你可以使用events (as a function)

function( fetchInfo, successCallback, failureCallback ) { }

你也可以使用events (as a json feed)

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

如果你打算使用object而不是function，那么你可以使用eventSources

如果要处理成功响应，请使用eventSourceSuccess function

这是一个示例（使用 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();
})

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

如果您使用的是 fullcalendar v5，则可以使用 extraParams 和 eventSources。

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

你应该使用POST，而不是使用GET，这样就可以了。

【讨论】：