How to show location in fullcalendar and gmail?

Question

i've tried all day but nothing. I need to show also the location but i don't find in fullcalendar documentation anything helpful.

This is my code now. Someone can help me?

Thanks in advance.

$('#eventList').fullCalendar({
        defaultView: 'listWeek',
        contentHeight: 'auto',
        lang:'it',
        navLinks: false,
        eventLimit: true,
        header: false,
        noEventsMessage: 'Nessun evento in programma',
        googleCalendarApiKey: 'AIzaSyDHACIHvtXO4X2bOvdxmfXhZcwS0undxX8',
        events: {
            googleCalendarId: '1fv9gv8e330lkbhn6sgh62ubik@group.calendar.google.com'
        }
});

score 2 · Accepted Answer · answered Jan 29 '18 at 22:30

2

What you have to do in this situation is use the eventRender callback, which runs once for each event which gets loaded into the current calendar view. It allows you access to all the properties of the event, including any custom ones added by the server (and not part of the standard fullCalendar event spec), and also gives you access to the HTML element being used to render the event.

Therefore you can insert extra properties into the event's HTML. To add the location in a suitable place, you can simply write the following (as an extra calendar option:

eventRender: function(event, element, view) {
  if (event.location) element.find(".fc-list-item-title").append(" - " + event.location);
}

See http://jsfiddle.net/sbxpv25p/169/ for a working demo.

Note that this will only work for the "list" type of view which you're using. The HTML used for other view types is different, so if you wanted to support that you'd have to write something different. The callback gives you access to the "view" object, so you can check which view is being used. You can discover the HTML used to render an event simply by right-clicking an existing one in your browser and inspecting it with your developer tools to see how it's structured.

See https://fullcalendar.io/docs/event_rendering/eventRender/ for details of the callback.

answered Jan 29 '18 at 22:30

ADyson

57,178
14
51
63

Thank you very much. Only another question. How can i know what custom property have the event? – Germano Plebani Jan 30 '18 at 08:32
Several ways in this particular case: you can a) look in your browser's network tools, find the request to the Google API and look at the response, or b) use a `console.log(JSON.stringify(event));` inside the eventRender function temporarily and look at the output, or just stop your JavaScript debugger inside the eventRender function and see the properties of the event object. – ADyson Jan 30 '18 at 09:31
1

Thanks again very much. Your help was invaluable – Germano Plebani Jan 30 '18 at 10:49
`eventRender` does not exist in the current version of fullcalendar https://fullcalendar.io/docs – Tom Aug 25 '23 at 08:21
@Tom That's certainly true. This question, and answer, is about fullcalendar 3 (as per the tags). In the newest versions, eventRender is replaced by the more flexible suite of event render hooks - https://fullcalendar.io/docs/event-render-hooks – ADyson Aug 25 '23 at 08:34

How to show location in fullcalendar and gmail?

1 Answers1