Question

我正在使用FullCalendar 4，并且正在从Google日历中导入事件。我希望这些内容作为全天背景事件显示在日历中，以表明我正忙，而不是显示事件的内容以及持续时间。导入事件并显示它们通常可以正常工作。

我尝试使用EventRender如下更改渲染属性

eventRender: function(info) {
    info.event.setProp( rendering, 'background' );
}

这似乎破坏了事件并且什么也没有显示，当我在更新以记录开始日期后尝试访问事件时，得到以下信息。

Failure parsing JSON {message: "Failure parsing JSON", xhr: XMLHttpRequest}

在setProp调用之前执行此操作会正确输出日期。

我在文档中注意到，使用EventRender时'该函数还可以返回一个全新的元素，该元素将用于呈现。对于全天背景事件，您必须确保返回<td>。'

我在新文档或示例中找不到如何执行此操作的任何示例吗？

我还尝试在EventsRender和DatesRender中为每个循环创建一个，以拉回所有事件，并为每个现有事件创建一个新的后台事件，然后销毁现有事件。不过，这似乎并没有真正起作用。在EventsRender中完成后，由于函数info.event.remove();似乎永远无法正常工作，我得到了一个永久循环。在DatesRender中，我得到一个新的后台事件，但仅在一个月的第二次渲染时，它不会删除现有事件。请参阅下面的我的DatesRender代码。

datesRender: function(info) {
            //now recreate events so they are all background events
            var events = calendar.getEvents();
            console.log("Dates Render!");
            $.each(events, function( index, event ) {
                //get event date
                var date = event.start;
                console.log(date);
                //remove original event
                event.remove();
                //add new as a background event
                calendar.addEvent({
                    title: 'dynamic event',
                    start: date,
                    allDay: true,
                    rendering: 'background',
                    backgroundColor: '#B2B2B2'
                });
            });

        },

我显然在做些暗淡的事情。谁能指出我正确的方向？

已更新

如建议的那样，您可以使用eventDataTransfer方法非常简单地完成此操作！

eventDataTransform: function(eventData) {
            eventData.rendering = 'background';
        },

Answer 1

如建议的那样，您可以使用eventDataTransfer方法非常简单地完成此操作！

eventDataTransform: function(eventData) {
            eventData.rendering = 'background';
        },

Answer 2

这应该可以帮助某人。为了渲染带有Google API结果标题的背景，我们开始。我正在使用react，因此该片段的语法可能看起来有所不同。

  const calendarAPI = calendarRef.current.getApi();
  calendarAPI.addEventSource({
    googleCalendarId: 'en.usa#holiday@group.v.calendar.google.com',
    color: '#ff9f89',
    editable: false,
    display: 'background',
  });

如何设置所有Google日历事件以背景渲染方式显示？

2 个答案: