Fullcalendar v5 中是否有任何方法可以重新呈现事件？答案

【问题标题】：Is there any method in Fullcalendar v5 which rerenders event?Fullcalendar v5 中是否有任何方法可以重新呈现事件？
【发布时间】：2020-12-15 07:52:51
【问题描述】：

我已经在事件上初始化了引导弹出框，在弹出框内容中我有按钮（点击按钮调用函数，它使用event.setExtendedProp() 方法更改相关事件的extendedProp.status）

//above of my code FullCalendar has rendered and set as variable var = calendar


 eventDidMount: function (info) {

        $(info.el).popover({
            html: true,
            content: PopoverHtml(info.event),
            container: 'body',
            animation: true,
        })
}

由于弹出框是在事件元素添加到 DOM 后立即初始化的，因此我需要重新渲染事件以更改弹出框的内容

   eventChange: function (changeInfo) {
        event_source = calendar.getEventSourceById(changeInfo.event.id);
        event_source.refetch();
    },

我也试过bootstrapsetContent()的动态内容设置方法

【问题讨论】：

你检查 eventClick 方法了吗？它会在事件点击时显示弹出框，您可以在方法参数上获取事件详细信息。
@Santosh，当然，但是弹出框会在第一个事件点击时呈现，然后在第二个事件上显示
@Santosh，我会在初始化弹出框后尝试切换内部方法
可以试试。我没有检查 popover 但是它在模态等上工作正常。
@Santosh，无论如何它在eventClick 上不起作用我打电话给$(info.el).popover() 然后$(info.el).popover('toggle')

标签： javascript jquery fullcalendar fullcalendar-5

【解决方案1】：

我使用带有 eventClick 的弹出框没有问题：

         function event_click(info) {
                $('.popover_show').popover('dispose'); 
                $(info.jsEvent.srcElement).popover({
                    container: 'body',
                    animation: false,
                    title: 'Zeitraum: '+fc_date_print(info.event.start, true)+" - "+fc_date_print(info.event.end, false)+
                    "<a href='#' class='float-right' onclick='form_cancel()' ><img src='/icon/x.svg' width='23' height='23' > </a>",
                    placement: 'bottom',
                    boundary: 'window',
                    sanitize: false,
                    trigger : 'manual',
                    popperConfig: {eventsEnabled: false },
                    "html": true,
                    content: function(){ a = get_form(info.event.extendedProps['id']); return a; }
                });
                $(info.jsEvent.srcElement).popover('show'); 
                $(info.jsEvent.srcElement).addClass('popover_show');
          }

我在 get_form() 中动态创建弹出框内容（目前有两种方式，一种是来自extendedProbs的javascript，第二种我通过ajax从弹出框动态加载内容。这比为每个事件创建弹出框要有效得多进步。适合我。

线

            $(info.jsEvent.srcElement).popover('show');

施展魔法，无需再次点击。

我将类 popover_show 添加到 sourceElement，所以 $('.popover_show').popover('dispose'); 将关闭所有弹出窗口。（我在打开一个新的弹出窗口之前这样做）但是还有很多其他方法。

【讨论】：

嘿，这太棒了！无论如何你可以分享你的get_form函数吗？我无法使用 ajax 获取详细信息：/