如何设置所有谷歌日历事件以显示背景渲染?

问题描述 投票:0回答:1

我正在使用FullCalendar 4,我正在从谷歌日历导入事件。我希望这些在日历中显示为全天背景事件,以显示我正忙着而不是显示事件是什么,以及它持续多长时间。导入事件并正常显示它们正常。

我尝试使用EventRender来更改渲染属性,如下所示

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

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

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

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

我在文档中注意到,当使用EventRender时,该函数还可以返回一个将用于渲染的全新元素。对于全天的背景活动,你必须确保返回一个<td>

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

我还试图在EventsRender和DatesRender中创建一个for循环来拉回所有事件,并为每个现有事件创建一个新的后台事件,然后销毁现有事件。这似乎并没有真正起作用。当在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';
        },
fullcalendar fullcalendar-4
1个回答
1
投票

正如所建议的那样,你可以使用eventDataTransfer方法来做到这一点!

eventDataTransform: function(eventData) {
            eventData.rendering = 'background';
        },
© www.soinside.com 2019 - 2024. All rights reserved.