Search code examples
jqueryfullcalendargoogle-calendar-apifullcalendar-3

How to show location in fullcalendar and gmail?


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

Solution

  • 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.