How can I set all google calendar events to display with background rendering?

Question

Im using FullCalendar 4, and I'm importing events from my google calendar. I want these to display in the calendar as full day background events to just show that I'm busy rather than display what the event is, and how long it goes on for. Importing events and displaying them normally works fine.

I've tried using EventRender to change the rendering property as follows

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

That seems to destroy the event and displays nothing, when I try to access the event after updating to log the start date I get the following.

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

Doing that prior to the setProp call outputs the date correctly.

I noticed in the docs that when using EventRender 'The function can also return a brand new element that will be used for rendering instead. For all-day background events, you must be sure to return a <td>.'

I can't find any examples of how to do this in the new docs or examples though?

I've also tried to create a for each loop in both EventsRender and DatesRender to pull back all the events, and create a new background event for each existing event, then destroy the existing. This doesn't really seem to work though. When done in EventsRender I get a permanent loop as the function info.event.remove(); never seems to work. In DatesRender I get a new background event, but only on the second rendering of a month, and it doesn't delete the existing. See below for my DatesRender code.

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

        },

I'm obviously doing something dim. Can anyone point me in the right direction?

UPDATED

As suggested you can use the eventDataTransfer method to do this really simply!

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

in the docs it says that the setProp causes the event to rerender. I can imangine, that if you use it inside the eventRender function, it might cause problems. Try setting it inside the [eventDataTransform](https://fullcalendar.io/docs/eventDataTransform) and check if that changes anything — John, Apr 01 '19 at 11:15
That works brilliantly using `eventDataTransform: function(eventData) { eventData.rendering = 'background'; }` — Rusty_Paul, Apr 01 '19 at 15:32
Guys, please note that the current way of doing this is `eventData.display = 'background';` instead of `eventData.rendering`. — chocolata, Sep 15 '20 at 09:25

score 1 · Answer 1 · answered Apr 01 '19 at 15:35

1

As suggested you can use the eventDataTransfer method to do this really simply!

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

answered Apr 01 '19 at 15:35

Rusty_Paul

21
4

Guys, please note that the current way of doing this is `eventData.display = 'background';` instead of `eventData.rendering`. – chocolata Sep 15 '20 at 09:26

score 0 · Answer 2 · answered Jul 09 '20 at 12:54

This should help someone. For rendering background with a title for google API results, here we go. Am using react, so the snippet may look different in syntax.

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

How can I set all google calendar events to display with background rendering?

2 Answers2